设计 【更新至2.0】MediaWiki 导航栏代码,CSS样式设计与分享

终于知道MediaWiki语法{{#if}}了哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
咳咳(这是1.0,2.0请看三楼)
先上CSS
CSS:
            /*导航栏一般样式*/
      
        ul.tab {
          list-style-type: none;
          margin: 0 auto;
          padding: 0;
          overflow: hidden;
          border: 1px solid #e7e7e7;
          background-color: #f3f3f3;
          display:table;
          text-align:center;
        }
        ul.tab li {float: left;}
        ul.tab li a {
          display: block;
          color: #666;
          text-align: center;
          padding: 5px 16px;
          text-decoration: none;transition-duration: .4s;
        }
        /*鼠标移上去之后的样式*/
        ul.tab li a:hover {background-color: #c5c5c5;}
        /*MediaWiki会自动给当前页面的链接(写在[[]]内的)一个<strong>,这里利用了这一点*/
        ul.tab li strong {
          display: block;
          color: #666;
          text-align: center;
          padding: 5px 16px;
          text-decoration: none;
          color: white;
          background-color: #3b446c;
        }
普通页面可以插入
HTML:
<ul class="tab">
    <li>[[(写上链接内容,按正常格式)]]</li>
    <li>[[(写上链接内容,按正常格式)]]</li>
    <!--可以复制多个<li>啥的-->
</ul>


最重要的东西:模板!(怎能只在普通页面罢休呢:滑稽:,当然,可以只止步于上面)
Ps:这些内容需要在名字空间为"Template: "下面写入。

代码:
<noinclude>
{{Tab|[[Template:Tab|主页面]]|[[Template:Tab/图片册|图片册]]|[[Template:Tab/其他|其他]]}}
</noinclude>
<includeonly>
<ul class="tab">
    {{#if: {{{1|}}} | <li>{{{1}}}</li> | }}
    {{#if: {{{2|}}} | <li>{{{2}}}</li> | }}
    {{#if: {{{3|}}} | <li>{{{3}}}</li> | }}
    {{#if: {{{4|}}} | <li>{{{4}}}</li> | }}
    {{#if: {{{5|}}} | <li>{{{5}}}</li> | }}
    {{#if: {{{6|}}} | <li>{{{6}}}</li> | }}
    {{#if: {{{7|}}} | <li>{{{7}}}</li> | }}
    {{#if: {{{8|}}} | <li>{{{8}}}</li> | }}
    {{#if: {{{9|}}} | <li>{{{9}}}</li> | }}
    {{#if: {{{10|}}} | <li>{{{10}}}</li> | }}
</ul>
</includeonly>
很好,接下来到普通页面引入就行
代码:
{{Tab|[[Template:Tab|主页面]]|[[Template:Tab/图片册|图片册]]|[[Template:Tab/其他|其他]]}}
<!--还可以继续写,最多10个-->
 
最后编辑:
  • 点赞
反馈: _Wr_

Sonicth0623

音速汉化组
管理成员
2021/10/24
43
19
17
Green Hill
www.sonicth.org
金环
612
本来想修改一下,输的太彻底啦!!!!!!!!!!!!!!!!!!!!!
:line-2020-40:1641102793827.png
 
  • 点赞
反馈: _Wr_

Sonicth0623

音速汉化组
管理成员
2021/10/24
43
19
17
Green Hill
www.sonicth.org
金环
612
2.0新版模板!(当然,得先把CSS样式复制了:滑稽:)
特色:优化易用性

代码:
<includeonly>
<ul class="tab">
        <li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}|主页面]]</li>
        {{#if: {{{1|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{1}}}|{{{1}}}]]</li> | }}
        {{#if: {{{2|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{2}}}|{{{2}}}]]</li> | }}
        {{#if: {{{3|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{3}}}|{{{3}}}]]</li> | }}
        {{#if: {{{4|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{4}}}|{{{4}}}]]</li> | }}
        {{#if: {{{5|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{5}}}|{{{5}}}]]</li> | }}
        {{#if: {{{6|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{6}}}|{{{6}}}]]</li> | }}
        {{#if: {{{7|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{7}}}|{{{7}}}]]</li> | }}
        {{#if: {{{8|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{8}}}|{{{8}}}]]</li> | }}
        {{#if: {{{9|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{9}}}|{{{9}}}]]</li> | }}
        {{#if: {{{10|}}} |<li>[[{{#if:{{NAMESPACE}}|{{NAMESPACE}}:| }}{{BASEPAGENAME}}/{{{10}}}|{{{10}}}]]</li> | }}
</ul>
</includeonly>
以后引用只要这样——
代码:
{{Tab|图片册}}
<!--最多10个,按{{Tab|1|2|3|。。。。。。}}格式-->
 
  • 点赞
反馈: _Wr_