帮助:自定义WIKI导航栏

首页 > 帮助:自定义WIKI导航栏

短 刷 阅 编 历

什么是导航栏

• 这个东西就是啦~

如何自定义导航栏内容

• BWIKI改造了MediaWiki:Sidebar页面，方便有权限的用户（界面管理员）更改各自站点的导航栏。
• WIKI导航栏目前只支持最多7个1级导航，和最多三级的展开内容。超过将会导致样式上的问题。

导航写法

• 如果有下级菜单，需要按照如下格式编写：*导航文本
• 如果没有下级菜单，则需要按照如下格式编写：*实际的链接|导航文本
  • 链接支持内链和外链。

样例

*一级导航链接|一级导航文本 <!--无下级菜单的一级导航-->
*一级导航文本 <!--有下级菜单的一级导航-->
**二级导航链接|二级导航文本 <!--无下级菜单的二级导航-->
**二级导航文本 <!--有下级菜单的一级导航-->
***三级导航链接|三级导航文本 <!--三级导航-->
***三级导航链接|三级导航文本 <!--三级导航-->

如何自定义导航栏的样式

进阶内容，需要有前端基础，点击展开

• 如下代码需要前端进行修改后，置入您的WIKI中MediaWiki:common.css页面才能生效。

代码

• 以下所有样式如果不生效，可在样式后面加!important强行覆盖例如：

/* 一级导航背景色*/
.menu-wrap .wiki-menu-li-1 {
    background:red!important
}

• 以下是所有代码

/* 一级导航背景色*/
.menu-wrap .wiki-menu-li-1 {
    background:red;
} 

/* 二级导航背景色 */
.menu-wrap .wiki-menu-ul-2{
    background:red;
}
/* 二级导航子项背景色 */
.menu-wrap .wiki-menu-ul-2 .wiki-menu-li-2{
    background:red;
}

/* 二级滚动条 */
.menu-wrap .wiki-menu-ul-2::-webkit-scrollbar{
    width: 8px;
    border-radius: 4px;
}
.menu-wrap .wiki-menu-ul-2::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
        border-radius: 5px;
        background: #4D4D4D;
      }
.menu-wrap .wiki-menu-ul-2::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
        border-radius: 0;
        background: blue;
 }

/* 三级导航背景色 */
.wiki-hoverbox{
    background: transparent;
}
/* 三级导航子项背景色 */
.wiki-hoverbox .wiki-menu-li-3{
    background:red
}

/* 三级导航滚动条 */
.wiki-hoverbox .wiki-hoverbox-inner::-webkit-scrollbar {
    width: 8px;
    border-radius: 4px
}

.wiki-hoverbox .wiki-hoverbox-inner::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #4d4d4d
}

.wiki-hoverbox .wiki-hoverbox-inner::-webkit-scrollbar-track {
    border-radius: 0;
    background: #000
}