- 本文用於介紹萌娘百科中一些特定功能的操作方法；
- 本文僅是一篇論述，不屬於方針或指引。如果本指南與相關方針或指引發生衝突或存在不一致的情況，請以方針或指引的條文為準。
本幫助通過問答的形式對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}}，或者封裝成一個獨立的模板，以便保持Navbox本體代碼清晰且簡潔。
| 示例：使用{{Template Repeat}}簡化代碼¶ | |||
|---|---|---|---|
| |||
{{#invoke:Nav|box
|group1 = 圖標列表
|list1 = {{Template Repeat|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>
-->|1-1=Commons-emblem-success.svg<!--
-->|2-1=Commons-emblem-notice.svg<!--
-->|3-1=Commons-emblem-hand.svg<!--
-->|4-1=Commons-emblem-disambig-notice.svg
}}
}}
|
三、注意參數的順序。Navbox的參數明顯可以分為功能相近的多組，避免將不同組的參數混搭在一起，從而提升代碼的可讀性。
四、避免Navbox過於龐雜。越是大型的代碼越難維護，加以萌娘百科的共筆性質，不同用戶對代碼風格可能有不同的理解。
- 註記：
- 使用{{Template Repeat}}會導致模板展開長度增大，增大幅度取決於納入的代碼的大小以及使用次數。
如何保持Navbox外觀的美觀？
一、運用一些基本的設計知識。例如：
- 優化顏色搭配。
| 反例：可能需要對讀者視力水平與審美水平下降負責的Navbox¶ | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
使用顏色：
對比度比率：
字 1.25、字 6.8、字 15.24
| |||||||||||||||||||
| 示例：有助於讀者保持眼健康並提升審美趣味的Navbox¶ | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
使用顏色：
對比度比率：
字 5.7、字 9.34、字 12.35、字 15.11
| |||||||||||||||||||
- 突出不同元素的主次關係。
| 示例：使用{{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的樣態¶
| |||||
|---|---|---|---|---|---|
{{Template Repeat|tl=<nowiki>
{{#invoke:Nav|box
|{{#ifeq:{{{1}}}|child|child|}}
|name = Navbox
|title = 標題
|navbar = {{#ifeq:{{{1}}}|child|plain|}}
}}</nowiki>
|1-1=
|separator-1=<br/>
|2-1=child
}}
| |||||
如何讓Navbox既可默認展開，又可默認摺疊？
可以通過一個參數來控制Navbox的展開與摺疊。
當用戶給模板的這個參數傳入 collapsed 時，模板會給Module:Nav傳入 |state = mw-collapsed ，此時Navbox默認摺疊；
否則，Navbox默認展開。
示例：利用參數 {{{1}}} 控制Navbox的展開與摺疊¶
| ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||
{{Template Repeat|tl=<nowiki>
{{#invoke:Nav|box
|name = Navbox
|title = 標題
|state = {{#ifeq:{{{1}}}|collapsed|mw-collapsed}}
|list1 = {{center|…}}
|list2 = {{#invoke:Nav|box|child
|name = Navbox
|title = 子導航框也可以按此方法控制
|navbar = plain
|state = {{#ifeq:{{{1}}}|collapsed|mw-collapsed}}
|list1 = {{center|…}}
}}
}}</nowiki>
|1-1=
|separator-1=<br/>
|2-1=collapsed
}}
| ||||||||||||||||||||||||||||
如何默認只展開某一子導航框，其餘全部摺疊？
可以通過collapsible groups配合一個參數來僅展開某一子導航框。
示例：利用collapsible groups配合參數 {{{1}}} 僅展開某一子導航框¶
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
不傳入 1，子導航框全部展開
子導航框一
子導航框二
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
{{Template Repeat|tl=<nowiki>
{{#invoke:Nav|box|collapsible groups
|name = Navbox
|title = 標題
|selected = {{{1|}}}
|group1 = 子導航框一
|abbr1 = {{#if:{{{1|}}}|子導航框一}}
|list1 = {{center|…}}
|group2 = 子導航框二
|abbr2 = {{#if:{{{1|}}}|子導航框二}}
|list2 = {{center|…}}
}}</nowiki>
|separator-1={{center|不傳入 <code>1</code>，子導航框全部展開}}
|1-1=
|separator-2={{center|傳入 <code>1 = 子導航框一</code> ，僅展開第一個子導航框}}
|2-1=子導航框一
|separator-3={{center|傳入 <code>1 = 子導航框二</code> ，僅展開第二個子導航框}}
|3-1=子導航框二
|separator-4={{center|傳入其他值，子導航框全部摺疊}}
|4-1=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|大段內容}}
}}
|list2 = {{#invoke:Nav|box|child
|title = 能摺疊的子導航框·二
|list1 = {{center|大段內容}}
}}
|list3 = {{#invoke:Nav|box|child
|title = 能摺疊的子導航框·三
|list1 = {{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，減小模板展開長度。
還有其他問題…
| |||||||||||||||||||||||||||||||||||