bugfix250107.1
全站通知：

模板:胶囊导航

来自咸鱼之王WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

生成一组胶囊式导航条，方便用户在同一组页面中跳转。

配置

  • 以{{胶囊导航|start}}作为起始模板，{{胶囊导航|end}}作为结束模板。
  • 将需要添加的菜单项目以{{胶囊导航|item|<链接>|<显示文本（可选）>}}的形式填写到以上两个模板之间。
  • 与当前页面名称相同的item会自动高亮。你也可以为item模板增加forceactive=1参数强制要求该item高亮。

示例


{{胶囊导航|start}}
{{胶囊导航|item|主公|主公}}
{{胶囊导航|item|咸将|咸将|forceactive=1}}
{{胶囊导航|item|鱼灵|鱼灵}}
{{胶囊导航|item|玩具|玩具}}
{{胶囊导航|end}}

样式

  • 本模板实际生成的元素如下：
<ul class="tbui-nav-pills nav nav-pills <!--start模板的extraclass参数-->">
    <li class="active"><a>显示文本</a></li>
    <li class=""><a>显示文本</a></li>
    <li class=""><a>显示文本</a></li>
</ul>
  • 其中nav、nav-pills是bootstrap占用的样式类。
  • tbui-nav-pills是本模板的固定样式类，你可以在本类上进行额外修改。
  • start模板的extraclass参数可以按照需求添加新的类，以方便定制。

封装

通常同一组导航会在多个页面中使用，因此建议使用一个新模板来封装上述内容，方便多个页面同步更新。

已知问题

  • 由于分类页的链接需要增加半角冒号，因此会导致PAGENAME和链接不一致。这里使用了#replace函数清除了所有冒号以兼容这种情况。因此可能会造成如帮助:文档和帮助文档在高亮状态上混淆。

引入模板

在https://wiki.biligame.com/你管理的wiki/MediaWiki:Common.css里引入以下卡片样式 

/*自定义导航模板 template:胶囊导航*/
.mw-parser-output .tbui-nav-pills {
    display: block;
    font-size: 14px;
    padding: 5px 15px;
    margin: 10px 0 !important;
    background: rgba(255,255,255,.4);
    border-radius: 8px;
}
.tbui-nav-pills>li {
    margin: 0;
}
.tbui-nav-pills>li>a {
    padding: 0 15px;
    margin: 0;
    border-right: 1px solid #D3D3D3;
}
.tbui-nav-pills>li.active>a {
    border-radius: 4px;
    border: none;
}

扩展阅读

所有模板列表
取自“https://wiki.biligame.com/xyzwgame/index.php?title=模板:胶囊导航&oldid=14120”