- 本文用于介绍萌娘百科中一些特定功能的操作方法；
- 本文仅是一篇论述，不属于方针或指引。如果本指南与相关方针或指引发生冲突或存在不一致的情况，请以方针或指引的条文为准。
本帮助通过问答的形式对Navbox的使用进行解读。
什么是Navbox？
Navbox是使用一系列模板与模块生成的内容框。这些模板与模块包括但不限于：
- Module:Nav
- {{Navbox}}、{{Navbox subgroup}}、{{Navbox with columns}}、{{Navbox with collapsible groups}}
- Module:Mininav
- {{大家族}}、{{大家族模板子项}}、{{大家族内容行}}
Navbox能够将多个页面链接归纳、整理、排列后呈现给读者，具有导航的作用，因此得名Navigation Box。
- 注记：
- Module:Mininav的特点是展开长度小；{{大家族}}的特点是易于上手。本帮助不涉及这两个模块与模板。
为什么不推荐使用{{Navbox}}？
跟{{Navbox}}相比，Module:Nav具有一些优势：
- Module:Nav生成的Navbox展开长度更小
- {{Navbox}}的
evenodd参数无法正常工作，而Module:Nav修复了这一问题 - 在Module:Nav中，
listn参数的跳跃不会造成任何影响
因此，本帮助的示例代码将全部使用Module:Nav。
导航模板一定要使用Navbox吗？
不一定。善书不择笔，Navbox只是搭建导航模板的一种通用的解决方案；如果存在比Navbox更合适的搭建方式，可以大胆使用。
- 注记：
- 例如{{ANIPLEX周六深夜动画档}}与{{萌元素周期表}}就是使用纯表格搭建的。
如何保持Navbox代码的整洁？
一、最重要的是缩进！缩进可以清晰地体现出不同子导航框的级联关系，以及内容之间的排列关系。
| 反例：灾难性的缩进¶ |
|---|
.svg){kind=small} 【例1 子导航框不缩进】
{{#invoke:Nav|box
|name = Navbox
|title = 标题
|list1 = {{#invoke:Nav|subgroup
|list1 = …
|list2 = {{#invoke:Nav|subgroup
|group1 = 组一
|list1 = …
}}
}}
}}
【例2 内容行不换行不缩进】
|list1 = [[A1]]{{w}}[[B2]]{{w}}[[C3]]{{w}}[[D4]]{{w}}[[E5]]{{w}}[[F6]]{{w}}[[G7]]{{w}}[[H8]]{{w}}[[I9]]{{w}}[[J10]]
【例3 各式各样的二级缩进】
<!-- 8个空格 -->
|name = Navbox
<!-- 2个制表符 -->
|title = 标题
<!-- 1个制表符＋4个空格 -->
<!-- 这并非耸人听闻，你时不时就能在一些Navbox的代码中遇到这种混合缩进 -->
|state = mw-collapsed
|
| 示例：内容行换行并缩进的最佳实践¶ |
|---|
|list1 = [[A1]]{{w}}<!--
-->[[B2]]{{w}}<!--
-->[[C3]]{{w}}<!--
-->[[D4]]{{w}}<!--
-->[[E5]]{{w}}<!--
-->[[F6]]{{w}}<!--
-->[[G7]]{{w}}<!--
-->[[H8]]{{w}}<!--
-->[[I9]]{{w}}<!--
-->[[J10]]
|
二、把重复使用且复杂的代码纳入{{Template Repeat}}或{{ptl}}，或者封装成一个独立的模板，以便保持Navbox本体代码清晰且简洁。
| 示例：使用{{ptl}}简化代码¶ | |||
|---|---|---|---|
{{Ptl}}模板已弃用。
| |||
{{ptl|define=icon|tl=<nowiki><div style="display:inline-flex;flex-direction:column;align-items:center;margin:7px 5px 5px">[[File:{{{1}}}|50px]]<small style="width:75px;text-align:center">{{{1}}}</small></div></nowiki>}}
{{#invoke:Nav|box
|group1 = 图标列表
|list1 = {{ptl|use=icon|Commons-emblem-success.svg}}<!--
-->{{ptl|use=icon|Commons-emblem-notice.svg}}<!--
-->{{ptl|use=icon|Commons-emblem-hand.svg}}<!--
-->{{ptl|use=icon|Commons-emblem-disambig-notice.svg}}
}}
|
三、注意参数的顺序。Navbox的参数明显可以分为功能相近的多组，避免将不同组的参数混搭在一起，从而提升代码的可读性。
四、避免Navbox过于庞杂。越是大型的代码越难维护，加以萌娘百科的共笔性质，不同用户对代码风格可能有不同的理解。
- 注记：
- 使用{{ptl}}会导致模板展开长度增大，增大幅度取决于纳入的代码的大小以及使用次数。
如何保持Navbox外观的美观？
一、运用一些基本的设计知识。例如：
- 优化颜色搭配。
{{Ptl}}模板已弃用。
| 反例：可能需要对读者视力水平与审美水平下降负责的Navbox¶ | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
使用颜色：
对比度比率：
{{Ptl}}模板已弃用。、 {{Ptl}}模板已弃用。、 {{Ptl}}模板已弃用。
| |||||||||||||||||||
| 示例：有助于读者保持眼健康并提升审美趣味的Navbox¶ | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
使用颜色：
对比度比率：
{{Ptl}}模板已弃用。、 {{Ptl}}模板已弃用。、 {{Ptl}}模板已弃用。、 {{Ptl}}模板已弃用。
| |||||||||||||||||||
- 突出不同元素的主次关系。
| 示例：使用{{ps}}突出主次关系¶ | ||||||
|---|---|---|---|---|---|---|
|
二、避免跌宕起伏的侧栏加大阅读难度。这可能是级联关系过于复杂，或者侧标题栏的宽度不一样导致的。
如有必要，可以使用{{Plate}}与{{Plate2}}在行内进一步分类，并添加 |groupstyle = box-sizing: content-box; width: ×em; 参数对齐侧标题栏（其中
|liststyle = width: auto;×em 是期望的每行字数）。
| 反例：跌宕起伏的侧栏¶ | |||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||
| 示例：调整过后的侧栏¶ | |||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||
{{#invoke:Nav|box
|name = Navbox
|title = 标题
|group1 = 角色
|list1 = {{#invoke:Nav|box|subgroup
|group1 = 势力一
|list1 = {{#invoke:Nav|box|subgroup
|group1 = 很长的团体名
|list1 = …
|group2 = 特别长的<br class="nomobile" />团体名称
|list2 = …
|group3 = 更多的团体
|list3 = …
}}
|group2 = 势力二
|list2 = {{#invoke:Nav|box|subgroup
|groupstyle = box-sizing: content-box; width: 6em;
|liststyle = width: auto;
|evenodd = swap
|group2 = 团体一
|list2 = …
|group3 = 团体二
|list3 = …
}}
|group3 = 很长的<br class="nomobile" />势力名称
|list3 = {{#invoke:Nav|box|subgroup
|groupstyle = box-sizing: content-box; width: 6em;
|liststyle = width: auto;
|evenodd = swap
|group1 = 官方机构
|list1 = … {{plate|<small>这个机构下面还有部门</small>}} … {{plate|部门二}} …
|group2 = 隐秘阵线
|list2 = …
}}
|group4 = 小势力
|list4 = …
}}
|group3 = 音乐
|list3 = {{#invoke:Nav|box|subgroup
|groupstyle = box-sizing: content-box; width: 4em;
|liststyle = width: auto;
|group1 = OP
|list1 = …
|group2 = ED
|list2 = …
}}
}}
| |||||||||||||||||||||||||||||||||||||||||||
三、避免Navbox过于庞杂。越是庞杂的Navbox越难整理、清洁。
四、加入艺术创意。
- 注记：
- 艺术创意并非必要的，切忌舍本逐末。
child和subgroup有什么区别？
一、从视觉效果来看：child和subgroup的唯一区别在于，child的左侧的组标题更宽一些，而subgroup偏窄。
二、从原始HTML来看：child和subgroup除了 padding 样式不同外（即上面提到的宽度不同），没有其他任何不同之处。
甚至child的类也是 navbox-subgroup 。
三、从设计目的来看：child主要用在一个独立、完整的Navbox身上，通过去掉它的边框，使得它能够嵌入到另一个Navbox里面；
而subgroup是Navbox的组成部分，一般不独立使用。
因此，在搭建Navbox的过程中，不建议不加区分地混用二者。
| 示例：child和subgroup¶ | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||
- 注记：
- 在实践中，也有为了代码简洁，而把一些复杂的subgroup作为一个模板独立出来，再嵌入回Navbox的情况。
如何让Navbox既可独立使用，又可嵌入其他Navbox？
可以通过一个参数来控制Navbox的样态。
当用户给模板的这个参数传入 child 时，模板会给Module:Nav传入 |child ，此时Navbox即可嵌入到其他Navbox里。
|navbar = plain
示例：利用参数 {{{1}}} 控制Navbox的样态¶
|
|---|
|
{{Ptl}}模板已弃用。 {{Ptl}}模板已弃用。
|
{{ptl|define=Navbox|tl=<nowiki>
{{#invoke:Nav|box
|{{#ifeq:{{{1}}}|child|child|}}
|name = Navbox
|title = 标题
|navbar = {{#ifeq:{{{1}}}|child|plain|}}
}}</nowiki>
}}
{{ptl|use=Navbox}}
<br/>
{{ptl|use=Navbox|child}}
|
如何让Navbox既可默认展开，又可默认折叠？
可以通过一个参数来控制Navbox的展开与折叠。
当用户给模板的这个参数传入 collapsed 时，模板会给Module:Nav传入 |state = mw-collapsed ，此时Navbox默认折叠；
否则，Navbox默认展开。
示例：利用参数 {{{1}}} 控制Navbox的展开与折叠¶
|
|---|
|
{{Ptl}}模板已弃用。 {{Ptl}}模板已弃用。
|
{{ptl|define=Navbox|tl=<nowiki>
{{#invoke:Nav|box
|name = Navbox
|title = 标题
|state = {{#ifeq:{{{1}}}|collapsed|mw-collapsed}}
|list1 = <center>…</center>
|list2 = {{#invoke:Nav|box|child
|name = Navbox
|title = 子导航框也可以按此方法控制
|navbar = plain
|state = {{#ifeq:{{{1}}}|collapsed|mw-collapsed}}
|list1 = <center>…</center>
}}
}}</nowiki>
}}
{{ptl|use=Navbox}}
<br/>
{{ptl|use=Navbox|collapsed}}
|
如何默认只展开某一子导航框，其余全部折叠？
可以通过collapsible groups配合一个参数来仅展开某一子导航框。
示例：利用collapsible groups配合参数 {{{1}}} 仅展开某一子导航框¶
|
|---|
|
{{Ptl}}模板已弃用。 1，子导航框全部展开{{Ptl}}模板已弃用。
1 = 子导航框一 ，仅展开第一个子导航框{{Ptl}}模板已弃用。
1 = 子导航框二 ，仅展开第二个子导航框{{Ptl}}模板已弃用。
{{Ptl}}模板已弃用。 |
{{ptl|define=Navbox|tl=<nowiki>
{{#invoke:Nav|box|collapsible groups
|name = Navbox
|title = 标题
|selected = {{{1|}}}
|group1 = 子导航框一
|abbr1 = {{#if:{{{1|}}}|子导航框一}}
|list1 = <center>…</center>
|group2 = 子导航框二
|abbr2 = {{#if:{{{1|}}}|子导航框二}}
|list2 = <center>…</center>
}}</nowiki>
}}
<center>不传入 <code>1</code>，子导航框全部展开</center>
{{ptl|use=Navbox}}
<center>传入 <code>1 = 子导航框一</code> ，仅展开第一个子导航框</center>
{{ptl|use=Navbox|子导航框一}}
<center>传入 <code>1 = 子导航框二</code> ，仅展开第二个子导航框</center>
{{ptl|use=Navbox|子导航框二}}
<center>传入其他值，子导航框全部折叠</center>
{{ptl|use=Navbox|collapsed}}
|
如何添加“全隐 / 全显”按钮？
在 title 参数里面使用Widget:LargeNavbox，并给Navbox添加 |class = largeNavbox 参数。
对于较大的、拥有3个以上可折叠子导航框的Navbox，“全隐 / 全显”按钮可以帮助读者大幅提高阅览效率。
| 示例：使用Widget:LargeNavbox¶ | |||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{{#invoke:Nav|box
|name = Navbox
|title = 标题{{#Widget:LargeNavbox}}
|class = largeNavbox
|list1 = {{#invoke:Nav|box|child
|title = 能折叠的子导航框·一
|list1 = <center>大段内容</center>
}}
|list2 = {{#invoke:Nav|box|child
|title = 能折叠的子导航框·二
|list1 = <center>大段内容</center>
}}
|list3 = {{#invoke:Nav|box|child
|title = 能折叠的子导航框·三
|list1 = <center>大段内容</center>
}}
}}
| |||||||||||||||||||||||||||
如何更改“折叠”按钮的颜色？
给 titlestyle 参数添加 -webkit-text-fill-color 属性即可。
示例：添加与不添加 -webkit-text-fill-color 属性¶
| ||||||
|---|---|---|---|---|---|---|
{{#invoke:Nav|box
|name = Navbox
|title = {{color|;-webkit-text-fill-color:white|标题}}
|titlestyle = background: #000000; color: #D8FA00; -webkit-text-fill-color: #D8FA00;
}}
<br/>
{{#invoke:Nav|box
|name = Navbox
|title = {{color|white|标题}}
|titlestyle = background: #000000; color: #D8FA00;
}}
| ||||||
萌娘百科的全站样式表给 <a> 设置了自己的 color 属性，因此 titlestyle 里的 color 无法作用到它的身上。
而 -webkit-text-fill-color 具有更高的优先级，能够覆盖 <a> 自己的样式。
如何更改“查论编”按钮？
使用模板样式表。不推荐使用{{VteStyle}}，因为它对Module:Nav不起作用，并且性能开销较大。
标题插入图片时带有水印，如何解决？
使用{{Image-clip}}。{{Image-clip}}在避免水印和确保链入方面进行了专门设计。
| 示例：使用{{Image-clip}}避免水印与直接插入图片¶ | ||||||
|---|---|---|---|---|---|---|
| ||||||
{{#invoke:Nav|box
|name = Navbox
|title = {{Image-clip|img=Minecraft.png|link=Minecraft|width=180|宽=|img-css=margin:7px 0;}}
}}
<br/>
{{#invoke:Nav|box
|name = Navbox
|title = [[File:Minecraft.png|180px|link=Minecraft]]
}}
| ||||||
- 注记：
- 使用{{Image-clip}}避免水印还有两个好处：
- 加载的图片是原图大小，显示更加清晰
- 可以利用
img-css参数调整上下边距，优化视觉效果
- 如果图片有矢量图（SVG）版本，也可以直接插入矢量图，这时图片不会带有水印。
- 实际上，导航模板{{Minecraft}}使用的图片就是cm:File:Minecraft_brand_logo.svg
多个Navbox之间有间隙，如何解决？
检查并去除Navbox的源代码与 <includeonly> 、 </includeonly> 等标签之间的空行。
| 示例：避免Navbox首尾出现空行¶ |
|---|
【例1】
<noinclude>{{Doc}}</noinclude><!-- 不要在这里换行 -->{{#invoke:Nav|box
【例2】
<includeonly><!-- 不要在这里换行 -->{{#invoke:Nav|box
【例3】
}}<!-- 不要在这里换行 --></includeonly>
|
- 注记：
- 在Navbox中使用{{背景图片}}会不可避免地在末尾添加一个空行。
Navbox的奇偶样式错位，如何解决？
出现奇偶样式错位的情况时，可以按以下流程调整：
- 检查不同地方的
oddstyle和evenstyle参数是否一致，并去除所有listnstyle参数中涉及背景颜色的部分。 - 找到首个奇偶样式错位的点位（一般出现在两个子导航框的交界处）。
- 对于该点位下方的那个子导航框，反转其奇偶样式。
具体来说：如果那个子导航框没有设置|evenodd = swap，则加入该参数；反之，则去除该参数。 - 预览调整后的效果，并回到第2步，直到所有奇偶样式显示正常。
| 示例：调整一个简单Navbox的奇偶样式¶ | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||
{{#invoke:Nav|box
|name = Navbox
|title = 标题
|group1 = 组壹
|list1 = {{color|#006cd0|（奇数行）}}
|group2 = 组贰
|list2 = {{#invoke:Nav|box|subgroup
<!-- 需要在这里加入 |evenodd = swap -->
|group1 = 子组一
|list1 = {{color|#dd3333|（偶数行）}}
|group2 = 子组二
|list2 = {{color|#006cd0|（奇数行）}}
}}
|group3 = 组叁
|list3 = {{color|#dd3333|（偶数行）}}
}}
| |||||||||||||||||
另一种节省人力的办法是让奇行样式与偶行样式相同。然而，在Navbox比较复杂时，这种办法会将成本转嫁给读者。
- 注记：
- User:Chi_ZJ2制作了一个半自动工具NavEO，可以自动执行上述调整过程。
嵌入Navbox后只有一行链接，如何解决？
一、检查Navbox是否存在已过审版本。若不存在，等待过审后即可解决。
二、检查模板展开长度是否超过限制，并进行下面任意一个工作：
- 使用{{TemplateAsyncLoad}}异步加载Navbox。
- 将Navbox拆分成多个更小的Navbox，减小模板展开长度。
还有其他问题…
| |||||||||||||||||||||||||||||||||||