Help:Navbox问与答

这个页面“Help:Navbox问与答”是萌娘百科的帮助文档

• 本文用于介绍萌娘百科中一些特定功能的操作方法；
• 本文仅是一篇论述，不属于方针或指引。如果本指南与相关方针或指引发生冲突或存在不一致的情况，请以方针或指引的条文为准。

本帮助通过问答的形式对Navbox的使用进行解读。

什么是Navbox？

Navbox是使用一系列模板与模块生成的内容框。这些模板与模块包括但不限于：

• Module:Nav
• {{Navbox}}、{{Navbox subgroup}}、{{Navbox with columns}}、{{Navbox with collapsible groups}}
• Module:Mininav
• {{大家族}}、{{大家族模板子项}}、{{大家族内容行}}

Navbox能够将多个页面链接归纳、整理、排列后呈现给读者，具有导航的作用，因此得名Navigation Box。

注记：

1. Module:Mininav的特点是展开长度小；{{大家族}}的特点是易于上手。本帮助不涉及这两个模块与模板。

为什么不推荐使用{{Navbox}}？

跟{{Navbox}}相比，Module:Nav具有一些优势：

• Module:Nav生成的Navbox展开长度更小
• {{Navbox}}的 evenodd 参数无法正常工作，而Module:Nav修复了这一问题
• 在Module:Nav中， listn 参数的跳跃不会造成任何影响

因此，本帮助的示例代码将全部使用Module:Nav。

导航模板一定要使用Navbox吗？

不一定。善书不择笔，Navbox只是搭建导航模板的一种通用的解决方案；如果存在比Navbox更合适的搭建方式，可以大胆使用。

注记：

1. 例如{{ANIPLEX周六深夜动画档}}与{{萌元素周期表}}就是使用纯表格搭建的。

如何保持Navbox代码的整洁？

一、最重要的是缩进！缩进可以清晰地体现出不同子导航框的级联关系，以及内容之间的排列关系。

反例：灾难性的缩进¶

【例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|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过于庞杂。越是大型的代码越难维护，加以萌娘百科的共笔性质，不同用户对代码风格可能有不同的理解。

注记：

1. 使用{{ptl}}会导致模板展开长度增大，增大幅度取决于纳入的代码的大小以及使用次数。

如何保持Navbox外观的美观？

一、运用一些基本的设计知识。例如：

• 优化颜色搭配。

反例：可能需要对读者视力水平与审美水平下降负责的Navbox¶
使用颜色： 对比度比率： 字  1.25、 字  6.8、 字  15.24

示例：有助于读者保持眼健康并提升审美趣味的Navbox¶
使用颜色： 对比度比率： 字  5.7、 字  9.34、 字  12.35、 字  15.11 （此Navbox来自{{hct}}的文档）

• 突出不同元素的主次关系。

示例：使用{{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越难整理、清洁。

四、加入艺术创意。

注记：

1. 艺术创意并非必要的，切忌舍本逐末。

child和subgroup有什么区别？

一、从视觉效果来看：child和subgroup的唯一区别在于，child的左侧的组标题更宽一些，而subgroup偏窄。

二、从原始HTML来看：child和subgroup除了 padding 样式不同外（即上面提到的宽度不同），没有其他任何不同之处。

甚至child的类也是 navbox-subgroup 。

三、从设计目的来看：child主要用在一个独立、完整的Navbox身上，通过去掉它的边框，使得它能够嵌入到另一个Navbox里面；

而subgroup是Navbox的组成部分，一般不独立使用。

因此，在搭建Navbox的过程中，不建议不加区分地混用二者。

示例：child和subgroup¶
child 组一 … 组二 …   subgroup 组一 … 组二 …

注记：

1. 在实践中，也有为了代码简洁，而把一些复杂的subgroup作为一个模板独立出来，再嵌入回Navbox的情况。

如何让Navbox既可独立使用，又可嵌入其他Navbox？

可以通过一个参数来控制Navbox的样态。

当用户给模板的这个参数传入 child 时，模板会给Module:Nav传入 |child
|navbar = plain ，此时Navbox即可嵌入到其他Navbox里。

示例：利用参数 {{{1}}} 控制Navbox的样态¶
标题
{{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|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}}} 仅展开某一子导航框¶
不传入 1，子导航框全部展开 传入 1 = 子导航框一 ，仅展开第一个子导航框 传入 1 = 子导航框二 ，仅展开第二个子导航框 传入其他值，子导航框全部折叠
{{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]] }}

注记：

1. 使用{{Image-clip}}避免水印还有两个好处：
   • 加载的图片是原图大小，显示更加清晰
   • 可以利用 img-css 参数调整上下边距，优化视觉效果
2. 如果图片有矢量图（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>

注记：

1. 在Navbox中使用{{背景图片}}会不可避免地在末尾添加一个空行。

Navbox的奇偶样式错位，如何解决？

出现奇偶样式错位的情况时，可以按以下流程调整：

1. 检查不同地方的 oddstyle 和 evenstyle 参数是否一致，并去除所有 listnstyle 参数中涉及背景颜色的部分。
2. 找到首个奇偶样式错位的点位（一般出现在两个子导航框的交界处）。
3. 对于该点位下方的那个子导航框，反转其奇偶样式。
   具体来说：如果那个子导航框没有设置 |evenodd = swap ，则加入该参数；反之，则去除该参数。
4. 预览调整后的效果，并回到第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比较复杂时，这种办法会将成本转嫁给读者。

注记：

1. User:Chi_ZJ2制作了一个半自动工具NavEO，可以自动执行上述调整过程。

嵌入Navbox后只有一行链接，如何解决？

一、检查Navbox是否存在已过审版本。若不存在，等待过审后即可解决。

二、检查模板展开长度是否超过限制，并进行下面任意一个工作：

• 使用{{TemplateAsyncLoad}}异步加载Navbox。
• 将Navbox拆分成多个更小的Navbox，减小模板展开长度。

还有其他问题…

毋需顾虑，欢迎在讨论版或本帮助的讨论页提问。