全站通知:
页面“模板:悬浮面板”与“模板:板块/文档”之间的差异
刷
历
编
(页面间差异)
跳到导航
跳到搜索
小 (导入1个版本) |
小 (导入1个版本) |
||
第1行: | 第1行: | ||
< | <noinclude>{{面包屑|说明}}[[分类:说明]]</noinclude> | ||
<div class="row"> | |||
<div class="col-sm-7"> | |||
==说明== | |||
*该模板主要适用于想要构筑 WIKI首页 的 WIKI编辑萌新。 | |||
*该模板包含基础的 [[模板:板块#基本部分|板块功能]] 以及拓展功能的 [[模板:板块#按钮|按钮]] 、 [[模板:板块#图标|带图按钮]] 、 [[模板:板块#轮播图|轮播图]] | |||
*该模板可通过右上角 <kbd>WIKI功能</kbd> → <kbd>查看源码</kbd> ,直接复制模板内容到需要使用的 WIKI。 | |||
*复制以下示例中的 '''源码''' 部分即可直接使用。 | |||
*配合 '''Bootstrap框架''' 即可轻松完成首页的建设。 | |||
==懒人包== | |||
*直接复制 '''[https://wiki.biligame.com/wiki/%E5%8F%8C%E6%A0%8FWIKI%E9%A6%96%E9%A1%B5 双栏WIKI首页] '''or''' [https://wiki.biligame.com/wiki/%E4%B8%89%E6%A0%8FWIKI%E9%A6%96%E9%A1%B5 三栏WIKI首页]''' 的页面源码。 | |||
**'''注意:'''需要先复制'''本模板'''的源码。 | |||
**'''替换板块样式''':<kbd>源代码编辑模式</kbd>下→<kbd>工具栏</kbd>的上方→选中<kbd>高级</kbd>→<kbd>工具栏右侧的放大镜高级</kbd>→点击<kbd>工具栏</kbd>右侧的<kbd>放大镜</kbd>,查找内输入 '''BOX-X'''(当前使用的CSS名) 替换为 '''BOX-X'''(想要使用的CSS名)。 | |||
==基本部分== | |||
{| class="wikitable" style="width:100%" | |||
|- | |||
! 源码 | |||
|- | |||
| | |||
<pre>{{板块|开始|标题=我是一级标题,请替换|查看更多=攻略|追加CSS=|追加CSS2=}} | |||
{{板块|内容开始|追加CSS=}} | |||
{{板块|二级标题|标题=我是二级标题,请替换|追加CSS=}} | |||
<!--内容部分:开始--> | |||
我是内容1,请替换 | |||
<!--内容部分:结束--> | |||
{{板块|二级标题|标题=我是二级标题,请替换|追加CSS=}} | |||
<!--内容部分:开始--> | |||
我是内容2,请替换 | |||
<!--内容部分:结束--> | |||
{{板块|内容结束}} | |||
{{板块|结束}}</pre> | |||
|- | |||
! 展示效果 | |||
|- | |||
| | |||
{{板块|开始|标题=我是一级标题,请替换|查看更多=攻略|追加CSS=|追加CSS2=}} | |||
{{板块|内容开始|追加CSS=}} | |||
{{板块|二级标题|标题=我是二级标题,请替换|追加CSS=}} | |||
<!--内容部分:开始--> | |||
我是内容1,请替换 | |||
<!--内容部分:结束--> | |||
{{板块|二级标题|标题=我是二级标题,请替换|追加CSS=}} | |||
<!--内容部分:开始--> | |||
我是内容2,请替换 | |||
<!--内容部分:结束--> | |||
{{板块|内容结束}} | |||
{{板块|结束}} | |||
|} | |||
==拓展部分== | |||
===按钮=== | |||
{| class="wikitable" style="width:100%" | |||
|- | |||
! 源码 | |||
|- | |||
| | |||
<pre> | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
</pre> | |||
|- | |||
! 显示效果 | |||
|- | |||
| | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
|} | |||
===带图按钮=== | |||
*参数:<nowiki>{{板块|图标|链接名,图片名|显示名词,不填则显示为链接名|宽度=20/25/50}}</nowiki> | |||
*宽度为按钮所占版区内的百分比宽度,可选20%、25%、50%,不填则默认为25% | |||
{| class="wikitable" style="width:100%" | |||
|- | |||
! 源码 | |||
|- | |||
| | |||
<pre> | |||
{{板块|图标|预置小图标|公主连结|宽度=50}} | |||
{{板块|图标|预置小图标|公主连结|宽度=50}} | |||
{{板块|图标|预置小图标|公主连结|宽度=50}} | |||
{{板块|图标|预置小图标|公主连结|宽度=50}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
</pre> | |||
|- | |||
! 显示效果 | |||
|- | |||
| | |||
{{板块|图标|预置小图标|公主连结|宽度=50}} | |||
{{板块|图标|预置小图标|公主连结|宽度=50}} | |||
{{板块|图标|预置小图标|公主连结|宽度=50}} | |||
{{板块|图标|预置小图标|公主连结|宽度=50}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
{{板块|图标|预置小图标|公主连结|宽度=20}} | |||
|} | |||
===文章=== | |||
{| class="wikitable" style="width:100%" | |||
|- | |||
!源码 | |||
|- | |||
| | |||
<pre> | |||
{{板块|文章|标签|测试文章页面名|测试文章页面名}} | |||
{{板块|文章|标签|测试文章页面名|测试文章页面名2}} | |||
</pre> | |||
|- | |||
!显示效果 | |||
|- | |||
| | |||
{{板块|文章|标签|测试文章页面名|测试文章页面名}} | |||
{{板块|文章|标签|测试文章页面名|测试文章页面名2}} | |||
|} | |||
===轮播图=== | |||
*同一页面内使用多个轮播图时,注意轮播编号不能重复! | |||
*不需要多个轮播时,从下方开始删除,保留对应数量的图即可(别把 <kbd><nowiki>}}</nowiki></kbd> 删了哦 | |||
{| class="wikitable" style="width:100%" | |||
|- | |||
!源码 | |||
|- | |||
| | |||
<pre> | |||
{{板块 | |||
|轮播图 | |||
|轮播编号=1 | |||
|图1=[[文件:预置banner1.jpg|link=]] | |||
|图2=[[文件:预置banner1.jpg|link=]] | |||
|图3=[[文件:预置banner1.jpg|link=]] | |||
}} | |||
{{板块 | |||
|轮播图 | |||
|轮播编号=2 | |||
|图1=[[文件:预置banner1.jpg|link=]] | |||
|图2=[[文件:预置banner1.jpg|link=]] | |||
|图3=[[文件:预置banner1.jpg|link=]] | |||
|图4=[[文件:预置banner1.jpg|link=]] | |||
|图5=[[文件:预置banner1.jpg|link=]] | |||
|图6=[[文件:预置banner1.jpg|link=]] | |||
}} | |||
</pre> | |||
|- | |||
!显示效果 | |||
|- | |||
| | |||
{{板块 | |||
|轮播图 | |||
|轮播编号=1 | |||
|图1=[[文件:预置banner1.jpg|link=]] | |||
|图2=[[文件:预置banner1.jpg|link=]] | |||
|图3=[[文件:预置banner1.jpg|link=]] | |||
}} | |||
{{板块 | |||
|轮播图 | |||
|轮播编号=2 | |||
|图1=[[文件:预置banner1.jpg|link=]] | |||
|图2=[[文件:预置banner1.jpg|link=]] | |||
|图3=[[文件:预置banner1.jpg|link=]] | |||
|图4=[[文件:预置banner1.jpg|link=]] | |||
|图5=[[文件:预置banner1.jpg|link=]] | |||
|图6=[[文件:预置banner1.jpg|link=]] | |||
}} | |||
|} | |||
==使用示例== | |||
===默认样式=== | |||
{| class="wikitable" style="width:100%" | |||
|- | |||
!源码 | |||
|- | |||
| | |||
<pre> | |||
{{板块|开始|标题=BWIKI}} | |||
{{板块|内容开始}} | |||
{{板块|二级标题|标题=关于本WIKI}} | |||
<!--内容部分:开始--> | |||
欢迎小伙伴们来到BWIKI! | |||
本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 | |||
如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 | |||
<!--内容部分:结束--> | |||
{{板块|二级标题|标题=按钮测试}} | |||
<!--内容部分:开始--> | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
<!--内容部分:结束--> | |||
{{板块|内容结束}} | |||
{{板块|结束}} | |||
</pre> | |||
|- | |||
!显示效果 | |||
|- | |||
| | |||
{{板块|开始|标题=BWIKI}} | |||
{{板块|内容开始}} | |||
{{板块|二级标题|标题=关于本WIKI}} | |||
欢迎小伙伴们来到BWIKI! | |||
本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 | |||
如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 | |||
{{板块|二级标题|标题=按钮测试}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|内容结束}} | |||
{{板块|结束}} | |||
|} | |||
===样式一:BOX-1=== | |||
{| class="wikitable" style="width:100%" | |||
|- | |||
!源码 | |||
|- | |||
| | |||
<pre> | |||
{{板块|开始|标题=BWIKI|CSS=BOX-1}} | |||
{{板块|内容开始}} | |||
{{板块|二级标题|标题=关于本WIKI}} | |||
<!--内容部分:开始--> | |||
欢迎小伙伴们来到BWIKI! | |||
本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 | |||
如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 | |||
<!--内容部分:结束--> | |||
{{板块|二级标题|标题=按钮测试}} | |||
<!--内容部分:开始--> | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|内容结束}} | |||
<!--内容部分:结束--> | |||
{{板块|结束}} | |||
</pre> | |||
|- | |||
!显示效果 | |||
|- | |||
| | |||
{{板块|开始|标题=BWIKI|CSS=BOX-1}} | |||
{{板块|内容开始}} | |||
{{板块|二级标题|标题=关于本WIKI}} | |||
欢迎小伙伴们来到BWIKI! | |||
本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 | |||
如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 | |||
{{板块|二级标题|标题=按钮测试}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|内容结束}} | |||
{{板块|结束}} | |||
|} | |||
===样式二:BOX-2=== | |||
{| class="wikitable" style="width:100%" | |||
|- | |||
!源码 | |||
|- | |||
| | |||
<pre> | |||
{{板块|开始|标题=BWIKI|CSS=BOX-2|追加CSS=background:#404040}} | |||
{{板块|内容开始}} | |||
{{板块|二级标题|标题=关于本WIKI}} | |||
<!--内容部分:开始--> | |||
欢迎小伙伴们来到BWIKI! | |||
本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 | |||
如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 | |||
{{板块|二级标题|标题=按钮测试}} | |||
<!--内容部分:开始--> | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|内容结束}} | |||
{{板块|结束}} | |||
</pre> | |||
|- | |||
! 显示效果 | |||
|- | |||
| | |||
{{板块|开始|标题=BWIKI|CSS=BOX-2|追加CSS=background:#404040}} | |||
{{板块|内容开始}} | |||
{{板块|二级标题|标题=关于本WIKI}} | |||
欢迎小伙伴们来到BWIKI! | |||
本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 | |||
如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 | |||
{{板块|二级标题|标题=按钮测试}} | |||
<!--内容部分:开始--> | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
<!--内容部分:结束--> | |||
{{板块|内容结束}} | |||
{{板块|结束}} | |||
|} | |||
===样式二:BOX-3=== | |||
{| class="wikitable" style="width:100%" | |||
|- | |||
!源码 | |||
|- | |||
| | |||
<pre> | |||
{{板块|开始|标题=BWIKI|CSS=BOX-3}} | |||
{{板块|内容开始}} | |||
{{板块|二级标题|标题=关于本WIKI}} | |||
<!--内容部分:开始--> | |||
欢迎小伙伴们来到BWIKI! | |||
本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 | |||
如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 | |||
{{板块|二级标题|标题=按钮测试}} | |||
<!--内容部分:开始--> | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|内容结束}} | |||
{{板块|结束}} | |||
</pre> | |||
|- | |||
!显示效果 | |||
|- | |||
| | |||
{{板块|开始|标题=BWIKI|CSS=BOX-3}} | |||
{{板块|内容开始}} | |||
{{板块|二级标题|标题=关于本WIKI}} | |||
欢迎小伙伴们来到BWIKI! | |||
本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 | |||
如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 | |||
{{板块|二级标题|标题=按钮测试}} | |||
<!--内容部分:开始--> | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
<!--内容部分:结束--> | |||
{{板块|内容结束}} | |||
{{板块|结束}} | |||
|} | |||
===样式二:BOX-4=== | |||
{| class="wikitable" style="width:100%" | |||
|- | |||
!源码 | |||
|- | |||
| | |||
<pre> | |||
{{板块|开始|标题=BWIKI|CSS=BOX-4}} | |||
{{板块|内容开始}} | |||
{{板块|二级标题|标题=关于本WIKI}} | |||
<!--内容部分:开始--> | |||
欢迎小伙伴们来到BWIKI! | |||
本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 | |||
如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 | |||
{{板块|二级标题|标题=按钮测试}} | |||
<!--内容部分:开始--> | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|内容结束}} | |||
{{板块|结束}} | |||
</pre> | |||
|- | |||
!显示效果 | |||
|- | |||
| | |||
{{板块|开始|标题=BWIKI|CSS=BOX-4}} | |||
{{板块|内容开始}} | |||
{{板块|二级标题|标题=关于本WIKI}} | |||
欢迎小伙伴们来到BWIKI! | |||
本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 | |||
如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 | |||
{{板块|二级标题|标题=按钮测试}} | |||
<!--内容部分:开始--> | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
<!--内容部分:结束--> | |||
{{板块|内容结束}} | |||
{{板块|结束}} | |||
|} | |||
===样式二:BOX-5=== | |||
{| class="wikitable" style="width:100%" | |||
|- | |||
!源码 | |||
|- | |||
| | |||
<pre> | |||
{{板块|开始|标题=BWIKI|CSS=BOX-5}} | |||
{{板块|内容开始}} | |||
{{板块|二级标题|标题=关于本WIKI}} | |||
<!--内容部分:开始--> | |||
欢迎小伙伴们来到BWIKI! | |||
本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 | |||
如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 | |||
{{板块|二级标题|标题=按钮测试}} | |||
<!--内容部分:开始--> | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|内容结束}} | |||
{{板块|结束}} | |||
</pre> | |||
|- | |||
!显示效果 | |||
|- | |||
| | |||
{{板块|开始|标题=BWIKI|CSS=BOX-5}} | |||
{{板块|内容开始}} | |||
{{板块|二级标题|标题=关于本WIKI}} | |||
欢迎小伙伴们来到BWIKI! | |||
本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 | |||
如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 | |||
{{板块|二级标题|标题=按钮测试}} | |||
<!--内容部分:开始--> | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
{{板块|按钮|测试2|测试2}} | |||
<!--内容部分:结束--> | |||
{{板块|内容结束}} | |||
{{板块|结束}} | |||
|}</div></div> | |||
==css样式源码== | |||
复制以下代码到[[mediawiki:common.css]]中. | |||
<SyntaxHighlight lang=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;} | |||
</SyntaxHighlight> |
2021年7月5日 (一) 11:04的最新版本
如果是第一次来,按"Ctrl+D"可以收藏随时查看更新~觉得WIKI好玩的话,请推荐给朋友哦~(◕ω<)☆
按右上角“WIKI功能→编辑”即可修改页面内容。
按右上角“WIKI功能→编辑”即可修改页面内容。
说明
- 该模板主要适用于想要构筑 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}} |
显示效果 |
带图按钮
- 参数:{{板块|图标|链接名,图片名|显示名词,不填则显示为链接名|宽度=20/25/50}}
- 宽度为按钮所占版区内的百分比宽度,可选20%、25%、50%,不填则默认为25%
源码 |
---|
{{板块|图标|预置小图标|公主连结|宽度=50}} {{板块|图标|预置小图标|公主连结|宽度=50}} {{板块|图标|预置小图标|公主连结|宽度=50}} {{板块|图标|预置小图标|公主连结|宽度=50}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} {{板块|图标|预置小图标|公主连结|宽度=20}} |
显示效果 |
文章
源码 |
---|
{{板块|文章|标签|测试文章页面名|测试文章页面名}} {{板块|文章|标签|测试文章页面名|测试文章页面名2}} |
显示效果 |
轮播图
- 同一页面内使用多个轮播图时,注意轮播编号不能重复!
- 不需要多个轮播时,从下方开始删除,保留对应数量的图即可(别把 }} 删了哦
源码 |
---|
{{板块 |轮播图 |轮播编号=1 |图1=[[文件:预置banner1.jpg|link=]] |图2=[[文件:预置banner1.jpg|link=]] |图3=[[文件:预置banner1.jpg|link=]] }} {{板块 |轮播图 |轮播编号=2 |图1=[[文件:预置banner1.jpg|link=]] |图2=[[文件:预置banner1.jpg|link=]] |图3=[[文件:预置banner1.jpg|link=]] |图4=[[文件:预置banner1.jpg|link=]] |图5=[[文件:预置banner1.jpg|link=]] |图6=[[文件:预置banner1.jpg|link=]] }} |
显示效果 |
使用示例
默认样式
源码 |
---|
{{板块|开始|标题=BWIKI}} {{板块|内容开始}} {{板块|二级标题|标题=关于本WIKI}} <!--内容部分:开始--> 欢迎小伙伴们来到BWIKI! 本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 <!--内容部分:结束--> {{板块|二级标题|标题=按钮测试}} <!--内容部分:开始--> {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} <!--内容部分:结束--> {{板块|内容结束}} {{板块|结束}} |
显示效果 |
样式一:BOX-1
源码 |
---|
{{板块|开始|标题=BWIKI|CSS=BOX-1}} {{板块|内容开始}} {{板块|二级标题|标题=关于本WIKI}} <!--内容部分:开始--> 欢迎小伙伴们来到BWIKI! 本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 <!--内容部分:结束--> {{板块|二级标题|标题=按钮测试}} <!--内容部分:开始--> {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试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}} {{板块|内容结束}} {{板块|结束}} |
显示效果 |
样式二:BOX-3
源码 |
---|
{{板块|开始|标题=BWIKI|CSS=BOX-3}} {{板块|内容开始}} {{板块|二级标题|标题=关于本WIKI}} <!--内容部分:开始--> 欢迎小伙伴们来到BWIKI! 本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 {{板块|二级标题|标题=按钮测试}} <!--内容部分:开始--> {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|内容结束}} {{板块|结束}} |
显示效果 |
样式二:BOX-4
源码 |
---|
{{板块|开始|标题=BWIKI|CSS=BOX-4}} {{板块|内容开始}} {{板块|二级标题|标题=关于本WIKI}} <!--内容部分:开始--> 欢迎小伙伴们来到BWIKI! 本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 {{板块|二级标题|标题=按钮测试}} <!--内容部分:开始--> {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|内容结束}} {{板块|结束}} |
显示效果 |
样式二:BOX-5
源码 |
---|
{{板块|开始|标题=BWIKI|CSS=BOX-5}} {{板块|内容开始}} {{板块|二级标题|标题=关于本WIKI}} <!--内容部分:开始--> 欢迎小伙伴们来到BWIKI! 本WIKI开放编辑,任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等 如果有兴趣想参与WIKI的深度建设可以加入交流群,私聊群主或者管理了解详情。 {{板块|二级标题|标题=按钮测试}} <!--内容部分:开始--> {{板块|按钮|测试2|测试2}} {{板块|按钮|测试2|测试2}} {{板块|按钮|测试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;}