“模板:板块”的版本间差异

2024年9月24日 (二) 20:44的最新版本

^短链 ^编 ^刷 ^历

首页 > 模板 > 模板:板块

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

说明文档

说明[编辑源代码]

该模板主要适用于想要构筑 WIKI首页的 WIKI编辑萌新。
该模板包含基础的板块功能以及拓展功能的按钮、带图按钮、轮播图
该模板可通过右上角 WIKI功能 → 查看源码 ，直接复制模板内容到需要使用的 WIKI。
复制以下示例中的源码部分即可直接使用。
配合 Bootstrap框架 即可轻松完成首页的建设。

基本部分[编辑源代码]

源码

{{板块|开始|标题=我是一级标题，请替换|查看更多=攻略|追加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}}
显示效果
标签测试文章页面名标签测试文章页面名

轮播图[编辑源代码]

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

源码

{{板块
|轮播图
|轮播编号=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=]]
}}

显示效果

文件:预置banner1.jpg

使用示例[编辑源代码]

默认样式[编辑源代码]

源码

{{板块|开始|标题=DLWIKI}}
{{板块|内容开始}}
{{板块|二级标题|标题=关于本WIKI}}
<!--内容部分：开始-->
欢迎小伙伴们来到DLWIKI！

本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等

如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。
<!--内容部分：结束-->
{{板块|二级标题|标题=按钮测试}}
<!--内容部分：开始-->
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
<!--内容部分：结束-->
{{板块|内容结束}}
{{板块|结束}}

显示效果

DLWIKI

关于本WIKI

欢迎小伙伴们来到DLWIKI！

本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等

如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。

按钮测试

测试2

样式一：BOX-1[编辑源代码]

源码

{{板块|开始|标题=DLWIKI|CSS=BOX-1}}
{{板块|内容开始}}
{{板块|二级标题|标题=关于本WIKI}}
<!--内容部分：开始-->
欢迎小伙伴们来到DLWIKI！

本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等

如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。
<!--内容部分：结束-->
{{板块|二级标题|标题=按钮测试}}
<!--内容部分：开始-->
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|内容结束}}
<!--内容部分：结束-->
{{板块|结束}}

显示效果

DLWIKI

关于本WIKI

欢迎小伙伴们来到DLWIKI！

本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等

如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。

按钮测试

测试2

样式二：BOX-2[编辑源代码]

源码

{{板块|开始|标题=DLWIKI|CSS=BOX-2|追加CSS=background:#404040}}
{{板块|内容开始}}
{{板块|二级标题|标题=关于本WIKI}}
<!--内容部分：开始-->
欢迎小伙伴们来到DLWIKI！

本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等

如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。 
{{板块|二级标题|标题=按钮测试}}
<!--内容部分：开始-->
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|内容结束}}
{{板块|结束}}

显示效果

DLWIKI

关于本WIKI

欢迎小伙伴们来到DLWIKI！

本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等

如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。

按钮测试

测试2

样式二：BOX-3[编辑源代码]

源码

{{板块|开始|标题=DLWIKI|CSS=BOX-3}}
{{板块|内容开始}}
{{板块|二级标题|标题=关于本WIKI}}
<!--内容部分：开始-->
欢迎小伙伴们来到DLWIKI！

本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等

如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。 
{{板块|二级标题|标题=按钮测试}}
<!--内容部分：开始-->
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|内容结束}}
{{板块|结束}}

显示效果

DLWIKI

关于本WIKI

欢迎小伙伴们来到DLWIKI！

本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等

如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。

按钮测试

测试2

样式二：BOX-4[编辑源代码]

源码

{{板块|开始|标题=DLWIKI|CSS=BOX-4}}
{{板块|内容开始}}
{{板块|二级标题|标题=关于本WIKI}}
<!--内容部分：开始-->
欢迎小伙伴们来到DLWIKI！

本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等

如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。 
{{板块|二级标题|标题=按钮测试}}
<!--内容部分：开始-->
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|内容结束}}
{{板块|结束}}

显示效果

DLWIKI

关于本WIKI

欢迎小伙伴们来到DLWIKI！

本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等

如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。

按钮测试

测试2

样式二：BOX-5[编辑源代码]

源码

{{板块|开始|标题=DLWIKI|CSS=BOX-5}}
{{板块|内容开始}}
{{板块|二级标题|标题=关于本WIKI}}
<!--内容部分：开始-->
欢迎小伙伴们来到DLWIKI！

本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等

如果有兴趣想参与WIKI的深度建设可以加入交流群，私聊群主或者管理了解详情。 
{{板块|二级标题|标题=按钮测试}}
<!--内容部分：开始-->
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|按钮|测试2|测试2}}
{{板块|内容结束}}
{{板块|结束}}

显示效果

DLWIKI

关于本WIKI

欢迎小伙伴们来到DLWIKI！

本WIKI开放编辑，任何人都可以在遵守编辑规则的前提下创建页面、填充数据、分享小知识等

按钮测试

测试2

css样式源码[编辑源代码]

复制以下代码到mediawiki:common.css中. <SyntaxHighlight lang=css> .yingdi-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 .yd-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 .yd-section-normal,.BOX-5 .yd-section-primary {color: #f7f7f7;background: #626262;border: 1px solid rgb(0, 0, 0);} .BOX-5 .yd-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>

所有模板列表

@@ 第6行： / 第6行： @@
 |结束=</div></div>
 |按钮=[[{{{2|}}}|<span class="yd-section-normal section-wrap" style="margin:5px 5px 5px 0px;{{#ifeq:{{{颜色|}}}|||border:1px solid #{{{颜色|}}};border-left:3px solid #{{{颜色|}}};}}">{{#ifeq:{{{3|}}}||{{{2|}}}|{{{3|}}}}}</span>]]
+|按钮外链=<a href="{{{2|}}}"><span class="yd-section-normal section-wrap" style="margin:5px 5px 5px 0px;{{#ifeq:{{{颜色|}}}|||border:1px solid #{{{颜色|}}};border-left:3px solid #{{{颜色|}}};}}">{{#ifeq:{{{3|}}}||{{{2|}}}|{{{3|}}}}}</span></a>
 |图标=<div class="BOX-AN-{{#ifeq:{{{宽度|}}}||25|{{{宽度|}}}}}" style="float:left;position:relative;height:30px;margin:5px 0px">[[{{{3|}}}|<span class="BOX-AN2">{{#ifeq:{{{4|}}}||{{{3|}}}|{{{4|}}}}}</span></span>]]<div style="position: absolute;top: 0px;left:0px;">[[file:{{{2|}}}.png|30px|link={{{3|}}}]]</div></div>
 |文章=<div style="width:100%;overflow:hidden"><span style="float:left;width:36px;height:22px;line-height:22px;background-color:#{{#switch:{{{2}}}|官方|公告=b96f3f|角色=ab5356|活动=294184|新手=449bca|讨伐|每月=4b69b9|解读|配队|推图=75a26a|本地化=6089F6|526398}};border-radius: 4px;color: #fff;text-align: center;margin:4px 0px;margin-right:10px;font-size:12px" >{{{2|}}}</span><span style="float:left;width:calc(100% - 46px);height:22px;line-height:22px;margin:4px 0px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{{3|}}}</span></div>
@@ 第14行： / 第15行： @@
 |通知3|卡池=<div style="border-radius: 6px;padding: 5px;background:#FFF;border: 1px solid #d0d0d0;border-left: 5px solid rgb(255 29 29 / 78%);margin-bottom:5px;width:100%;max-width:100%;text-align:left"><font style="color: rgb(255 29 29 / 78%)">'''{{{2|}}}'''</font><br><font style="font-size:10px">{{{3|}}} ～{{{4|}}}</font></div>
 |日替=<div style="border-radius: 6px;padding: 5px;background:#FFF;border: 1px solid #d0d0d0;border-left: 5px solid #008c8c;margin-bottom:5px;width:100%;max-width:100%;text-align:left">'''[[{{#if:{{{跳转|}}}|{{{跳转|}}}|{{{2|}}}}}|<font style="color: #008c8c">{{{2|}}}</font>]]'''<br><font style="font-size:10px">{{{3|}}}</font></div>
-}}</includeonly><noinclude>{{面包屑|模板}}[[分类:模板]]{{模板说明}}</noinclude>
+}}</includeonly>
+<noinclude>{{面包屑|模板}}[[分类:模板]]{{模板说明}}</noinclude>