模板:板塊

丨前言

• 該模板提供了幾個常用的設定好的板塊，適用於WIKI編輯萌新
• 相關代碼已預置到各大wiki中
• 該模板包含基礎的 板塊功能 以及拓展功能的 按鈕 、 帶圖按鈕 、 輪播圖
• 複製以下示例中的 源碼 部分即可直接使用。
• 配合 Bootstrap框架 即可輕鬆完成首頁的建設。

丨懶人包

• 直接複製 雙欄WIKI首頁 or 三欄WIKI首頁 的頁面源碼。
  • 注意：需要先複製本模板的源碼。
  • 替換板塊樣式：原始碼編輯模式下→工具欄的上方→選中高級→工具欄右側的放大鏡高級→點擊工具欄右側的放大鏡，查找內輸入 BOX-X（當前使用的CSS名） 替換為 BOX-X（想要使用的CSS名）。

丨示例

源碼
{{板块|开始|标题=我是一级标题，请替换|查看更多=攻略|追加CSS=|追加CSS2=}} {{板块|内容开始|追加CSS=}} {{板块|二级标题|标题=我是二级标题，请替换|追加CSS=}} <!--内容部分：开始--> 我是内容1，请替换 <!--内容部分：结束--> {{板块|二级标题|标题=我是二级标题，请替换|追加CSS=}} <!--内容部分：开始--> 我是内容2，请替换 <!--内容部分：结束--> {{板块|内容结束}} {{板块|结束}}
展示效果
我是一級標題，請替換+ 我是二級標題，請替換 我是內容1，請替換 我是二級標題，請替換 我是內容2，請替換

拓展部分

按鈕

源碼
{{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}}
顯示效果
測試2 測試2

帶圖按鈕

• 參數：{{板块|图标|图片名|显示名词与链接地址|宽度=20/25/50}}
• 寬度為按鈕所佔版區內的百分比寬度，可選20%、25%、50%，不填則默認為25%

源碼
{{板块|图标|Pcr icon.png|公主连结|宽度=50}} {{板块|图标|Pcr icon.png|公主连结|宽度=50}} {{板块|图标|Pcr icon.png|公主连结|宽度=50}} {{板块|图标|Pcr icon.png|公主连结|宽度=50}} {{板块|图标|Pcr icon.png|公主连结}} {{板块|图标|Pcr icon.png|公主连结}} {{板块|图标|Pcr icon.png|公主连结}} {{板块|图标|Pcr icon.png|公主连结}} {{板块|图标|Pcr icon.png|公主连结}} {{板块|图标|Pcr icon.png|公主连结}} {{板块|图标|Pcr icon.png|公主连结}} {{板块|图标|Pcr icon.png|公主连结}} {{板块|图标|Pcr icon.png|公主连结|宽度=20}} {{板块|图标|Pcr icon.png|公主连结|宽度=20}} {{板块|图标|Pcr icon.png|公主连结|宽度=20}} {{板块|图标|Pcr icon.png|公主连结|宽度=20}} {{板块|图标|Pcr icon.png|公主连结|宽度=20}} {{板块|图标|Pcr icon.png|公主连结|宽度=20}} {{板块|图标|Pcr icon.png|公主连结|宽度=20}} {{板块|图标|Pcr icon.png|公主连结|宽度=20}} {{板块|图标|Pcr icon.png|公主连结|宽度=20}} {{板块|图标|Pcr icon.png|公主连结|宽度=20}}
顯示效果
公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結 公主連結

文章

源碼
{{板块|文章|标签|测试文章页面名|测试文章页面名}} {{板块|文章|标签|测试文章页面名|测试文章页面名2}}
顯示效果
標籤測試文章頁面名 標籤測試文章頁面名2

不同的標籤文字可以對應不同的標籤顏色，下面是目前本模板內的顏色，一一對應，如前面全部不匹配則使用最後一個默認色。

|公告=FF666B|专题=6089F6|攻略=00B6FF|新手=00B6FF|科普=6089F6|视频=b0b398|角色=FF666B|推图=96DC85|地图=48C9B0|数据包=9B59B6|资源包=EB984E|模组=34495E|00B6FF

公告測試文章頁面名

專題測試文章頁面名

攻略測試文章頁面名

新手測試文章頁面名

科普測試文章頁面名

視頻測試文章頁面名

角色測試文章頁面名

推圖測試文章頁面名

地圖測試文章頁面名

數據包測試文章頁面名

資源包測試文章頁面名

模組測試文章頁面名

其他測試文章頁面名

輪播圖

• 同一頁面內使用多個輪播圖時，注意輪播編號不能重複！
• 不需要多個輪播時，從下方開始刪除，保留對應數量的圖即可（別把 }} 刪了哦

源碼
{{板块 |轮播图 |轮播编号=1 |图1=[[文件:申请创建WIKI.png|申请创建WIKI|link=WIKI申请页面]] |图2=[[文件:申请创建WIKI.png|申请创建WIKI|link=WIKI申请页面]] |图3=[[文件:申请创建WIKI.png|申请创建WIKI|link=WIKI申请页面]] }} {{板块 |轮播图 |轮播编号=2 |图1=[[文件:申请创建WIKI.png|申请创建WIKI|link=WIKI申请页面]] |图2=[[文件:申请创建WIKI.png|申请创建WIKI|link=WIKI申请页面]] |图3=[[文件:申请创建WIKI.png|申请创建WIKI|link=WIKI申请页面]] |图4=[[文件:申请创建WIKI.png|申请创建WIKI|link=WIKI申请页面]] |图5=[[文件:申请创建WIKI.png|申请创建WIKI|link=WIKI申请页面]] |图6=[[文件:申请创建WIKI.png|申请创建WIKI|link=WIKI申请页面]] }}
顯示效果
申請創建WIKI 申請創建WIKI 申請創建WIKI 申請創建WIKI 申請創建WIKI 申請創建WIKI 申請創建WIKI 申請創建WIKI 申請創建WIKI

直至今日，芒果也沒有搞懂這裏的輪播圖為何存在問題，以及如何修復問題。下面是替代解決方案。

BWIKI其實還有一個專業的輪播圖模板，原名Swiper，目前已被搬運至本站的{{輪播圖}}，以供使用。

該模板的頁面上有更多信息，這個模板使用效果見此（搬了BWIKI首頁的那個輪播圖）：

使用示例

默認樣式

源碼
{{板块|开始|标题=BWIKI}} {{板块|内容开始}} {{板块|二级标题|标题=关于本WIKI}} <!--内容部分：开始--> 欢迎小伙伴们来到BWIKI！ 本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。 <!--内容部分：结束--> {{板块|二级标题|标题=按钮测试}} <!--内容部分：开始--> {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} <!--内容部分：结束--> {{板块|内容结束}} {{板块|结束}}
顯示效果
BWIKI 關於本WIKI 歡迎小夥伴們來到BWIKI！ 本WIKI開放編輯，任何人都可以在遵守編輯規則的前提下創建頁面、填充數據、分享小知識等 如果有興趣想參與WIKI的深度建設可以加入交流群，私聊群主或者管理了解詳情。 按鈕測試 測試2 測試2 測試2 測試2

樣式一：BOX-1

源碼
{{板块|开始|标题=BWIKI|CSS=BOX-1}} {{板块|内容开始}} {{板块|二级标题|标题=关于本WIKI}} <!--内容部分：开始--> 欢迎小伙伴们来到BWIKI！ 本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。 <!--内容部分：结束--> {{板块|二级标题|标题=按钮测试}} <!--内容部分：开始--> {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|内容结束}} <!--内容部分：结束--> {{板块|结束}}
顯示效果
BWIKI 關於本WIKI 歡迎小夥伴們來到BWIKI！ 本WIKI開放編輯，任何人都可以在遵守編輯規則的前提下創建頁面、填充數據、分享小知識等 如果有興趣想參與WIKI的深度建設可以加入交流群，私聊群主或者管理了解詳情。 按鈕測試 測試2 測試2 測試2 測試2

樣式二：BOX-2

源碼
{{板块|开始|标题=BWIKI|CSS=BOX-2|追加CSS=background:#404040}} {{板块|内容开始}} {{板块|二级标题|标题=关于本WIKI}} <!--内容部分：开始--> 欢迎小伙伴们来到BWIKI！ 本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。 {{板块|二级标题|标题=按钮测试}} <!--内容部分：开始--> {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|内容结束}} {{板块|结束}}
顯示效果
BWIKI 關於本WIKI 歡迎小夥伴們來到BWIKI！ 本WIKI開放編輯，任何人都可以在遵守編輯規則的前提下創建頁面、填充數據、分享小知識等 如果有興趣想參與WIKI的深度建設可以加入交流群，私聊群主或者管理了解詳情。 按鈕測試 測試2 測試2 測試2 測試2

樣式二：BOX-3

源碼
{{板块|开始|标题=BWIKI|CSS=BOX-3}} {{板块|内容开始}} {{板块|二级标题|标题=关于本WIKI}} <!--内容部分：开始--> 欢迎小伙伴们来到BWIKI！ 本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。 {{板块|二级标题|标题=按钮测试}} <!--内容部分：开始--> {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|内容结束}} {{板块|结束}}
顯示效果
BWIKI 關於本WIKI 歡迎小夥伴們來到BWIKI！ 本WIKI開放編輯，任何人都可以在遵守編輯規則的前提下創建頁面、填充數據、分享小知識等 如果有興趣想參與WIKI的深度建設可以加入交流群，私聊群主或者管理了解詳情。 按鈕測試 測試2 測試2 測試2 測試2

樣式二：BOX-4

源碼
{{板块|开始|标题=BWIKI|CSS=BOX-4}} {{板块|内容开始}} {{板块|二级标题|标题=关于本WIKI}} <!--内容部分：开始--> 欢迎小伙伴们来到BWIKI！ 本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。 {{板块|二级标题|标题=按钮测试}} <!--内容部分：开始--> {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|内容结束}} {{板块|结束}}
顯示效果
BWIKI 關於本WIKI 歡迎小夥伴們來到BWIKI！ 本WIKI開放編輯，任何人都可以在遵守編輯規則的前提下創建頁面、填充數據、分享小知識等 如果有興趣想參與WIKI的深度建設可以加入交流群，私聊群主或者管理了解詳情。 按鈕測試 測試2 測試2 測試2 測試2

樣式二：BOX-5

源碼
{{板块|开始|标题=BWIKI|CSS=BOX-5}} {{板块|内容开始}} {{板块|二级标题|标题=关于本WIKI}} <!--内容部分：开始--> 欢迎小伙伴们来到BWIKI！ 本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。 {{板块|二级标题|标题=按钮测试}} <!--内容部分：开始--> {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|内容结束}} {{板块|结束}}
顯示效果
BWIKI 關於本WIKI 歡迎小夥伴們來到BWIKI！ 本WIKI開放編輯，任何人都可以在遵守編輯規則的前提下創建頁面、填充數據、分享小知識等 如果有興趣想參與WIKI的深度建設可以加入交流群，私聊群主或者管理了解詳情。 按鈕測試 測試2 測試2 測試2 測試2

css樣式源碼

複製以下代碼到mediawiki:common.css中.

.BILIBILI-BOX {width:100%;margin-bottom:20px;}
.BOX-title-1 {width:100%;font-size:14px;padding:7px 10px;font-weight: bold;background:#404040;color:#fff;}
.BOX-title-2 {padding: 10px 0px 5px 0px;font-size: 14px;font-weight: bold;border-bottom: 1px solid #384348;}
.BOX-N {width:100%;padding:0px;}
.BOX-GD {color:#f7f7f7;border: 1px solid #f7f7f7;padding: 0px 5px;border-radius: 50%;}
.BOX-AN-50 {width:50%}
.BOX-AN-25 {width:25%}
.BOX-AN-20 {width:20%}
.BOX-AN2 {width:100%;display: inline-block;height:30px;line-height:30px;padding-left:35px;padding-right:5px;color:#404040;}
.BOX-AN2:hover {background:#000;color:#f7f7f7;}
@media only screen and (max-width:759px){
.BOX-AN-25 {width:50%}
.BOX-AN-20 {width:50%}
}

.update-log .log-title {display: none;}
.update-log .bili-list-group {padding: 0px 0px;}
.update-log .read-more {display: none;}

.carousel.big-carousel .carousel-indicators li, .carousel.big-carousel .carousel-indicators li.active {width: 8px;height: 8px;}
.carousel.big-carousel .carousel-indicators {bottom: -2.4em;margin-left: -30%;margin-bottom: 45px;}
.carousel.big-carousel {margin-bottom: 15px;}

.BOX-1 .BOX-title-2 {padding: 10px 0px 5px 0px;}
.BOX-1 {background:#f7f7f7;border:1px solid #404040;}
.BOX-1 .BOX-N {padding:5px 10px;}

.BOX-2 .BOX-title-1 {border-radius: 8px;}
.BOX-2 {border:1px solid #404040;border-radius: 4px;padding:2px}
.BOX-2 .BOX-2-1 {background:#f7f7f7;border:1px solid #404040;border-radius: 8px;padding:10px;}

.BOX-3 .BOX-title-1 {border-radius: 8px;}
.BOX-3 {background:#f7f7f7;border-radius: 8px;padding:10px}

.BOX-4 .BOX-title-1 {border-radius: 8px 8px 0px 0px;}
.BOX-4 {background:#f7f7f7;border-radius: 8px;padding:0px;}
.BOX-4 .BOX-N {padding:5px 10px;}

.BOX-5 .BOX-title-1 {border-radius: 8px 8px 0px 0px;background:#262626;color:#f7f7f7;}
.BOX-5 .BOX-title-2 {padding: 10px 0px 5px 0px;border-bottom: 1px solid #262626;}
.BOX-5 {background:#404040;border-radius: 8px;padding:0px;}
.BOX-5 .BOX-N {padding:5px 10px;border:2px solid #262626;border-top:0px solid ;box-shadow: inset 0 0 1px 2px #000;color:#f7f7f7;border-radius: 0px 0px 8px 8px;}
.BOX-5 .bili-section-normal,.BOX-5 .bili-section-primary {color: #f7f7f7;background: #626262;border: 1px solid rgb(0, 0, 0);}
.BOX-5 .bili-section-normal:hover {color: #fff;background: #000;border: 1px solid rgba(0, 0, 0, 0.1);cursor: pointer;}
.BOX-5 .BOX-zt {color:#f7f7f7}
.BOX-5 .update-log a {color: #f7f7f7 !important;}
.BOX-5 .BOX-AN2 {width:100%;display: inline-block;height:30px;line-height:30px;padding-left:35px;padding-right:5px;color: #f7f7f7;background: #626262;}
.BOX-5 .BOX-AN2:hover {color: #fff;background: #000;}