模板:板块

首页 > 模板 > 模板:板块

短 刷 阅 编 历

模板：[刷新此页面] [编辑] [页面历史]
文档：[查看] [编辑] [页面历史]

说明文档

说明

• 该模板主要适用于想要构筑 WIKI首页 的 WIKI编辑萌新。
• 该模板包含基础的 板块功能 以及拓展功能的 按钮 、 带图按钮 、 轮播图
• 该模板可通过右上角 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%

源码
{{板块|图标|预置小图标|公主连结|宽度=50}} {{板块|图标|预置小图标|公主连结|宽度=50}} {{板块|图标|预置小图标|公主连结|宽度=50}} {{板块|图标|预置小图标|公主连结|宽度=50}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}}
显示效果
公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结 公主连结

文章

源码
{{板块|文章|标签|测试文章页面名|测试文章页面名}} {{板块|文章|标签|测试文章页面名|测试文章页面名2}}
显示效果
标签测试文章页面名 标签测试文章页面名2

轮播图

• 同一页面内使用多个轮播图时，注意轮播编号不能重复！
• 不需要多个轮播时，从下方开始删除，保留对应数量的图即可（别把 }} 删了哦

源码
{{板块 |轮播图 |轮播编号=1 |图1=[[文件:Scene09Bg.png|link=]] |图2=[[文件:Scene09Bg.png|link=]] |图3=[[文件:Scene09Bg.png|link=]] }} {{板块 |轮播图 |轮播编号=2 |图1=[[文件:Scene09Bg.png|link=]] |图2=[[文件:Scene09Bg.png|link=]] |图3=[[文件:Scene09Bg.png|link=]] |图4=[[文件:Scene09Bg.png|link=]] |图5=[[文件:Scene09Bg.png|link=]] |图6=[[文件:Scene09Bg.png|link=]] }}
显示效果

使用示例

默认样式

源码
{{板块|开始|标题=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样式源码

复制以下代码到模板:板块中.

.BILIBILI-BOX{width:100%;margin-bottom:20px}
.BOX-title-1{height:auto;padding:5px 0 5px 15px;margin:3px 0 5px;background:linear-gradient(135deg,#ff1a89 75%,#f4d31f 75.4%);color:#fff;border-radius:5px;width:100%;max-width:100%;text-align:left;font-size:18px;font-weight:700}
.BOX-title-2{height:auto;padding:5px 0 5px 15px;margin:3px 0 5px;background:linear-gradient(135deg,#ff1a89 75%,#f4d31f 75.4%);color:#fff;border-radius:5px;width:100%;max-width:100%;text-align:left;font-size:18px;font-weight:700}
.BOX-N{width:100%;padding:0}
.BOX-GD{color:#f7f7f7;border:1px solid #f7f7f7;padding:0 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:0 0}
.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 0 5px 0}
.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 0 0}
.BOX-4{background:#f7f7f7;border-radius:8px;padding:0}
.BOX-4 .BOX-N{padding:5px 10px}
.BOX-5 .BOX-title-1{border-radius:8px 8px 0 0;background:#262626;color:#f7f7f7}
.BOX-5 .BOX-title-2{padding:10px 0 5px 0;border-bottom:1px solid #262626}
.BOX-5{background:#404040;border-radius:8px;padding:0}
.BOX-5 .BOX-N{padding:5px 10px;border:2px solid #262626;border-top:0 solid;box-shadow:inset 0 0 1px 2px #000;color:#f7f7f7;border-radius:0 0 8px 8px}
.BOX-5 .bili-section-normal,.BOX-5 .bili-section-primary{color:#f7f7f7;background:#626262;border:1px solid #000}
.BOX-5 .bili-section-normal:hover{color:#fff;background:#000;border:1px solid rgba(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}
.bili-section-normal,.bili-section-primary{font-family:"黑体",Arial,sans-serif,"PingFang SC";font-size:14px;font-weight:700;border:2px solid #9a56ee;border-radius:10px;display:inline-block;color:#f4d31f;text-align:center;line-height:1.5;background-color:ff1a89;margin-right:10px;padding:8px 16px;transition:background-color 150ms,color 150ms,border-color 150ms}
.bili-section-normal:hover{color:#fff;background-color:#56ee8f;border-color:#9a56ee;cursor:pointer}

---

所有模板列表