使用說明: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

這個頁面「Help:Navbox問與答」是萌娘百科的幫助文檔

本文用於介紹萌娘百科中一些特定功能的操作方法；
本文僅是一篇論述，不屬於方針或指引。如果本指南與相關方針或指引發生衝突或存在不一致的情況，請以方針或指引的條文為準。

本幫助通過問答的形式對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中， list_n 參數的跳躍不會造成任何影響

因此，本幫助的示例代碼將全部使用Module:Nav。

導航模板一定要使用Navbox嗎？

不一定。善書不擇筆，Navbox只是搭建導航模板的一種通用的解決方案；如果存在比Navbox更合適的搭建方式，可以大膽使用。

註記：

例如{{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}}簡化代碼¶

圖標列表	Commons-emblem-success.svg Commons-emblem-notice.svg Commons-emblem-hand.svg Commons-emblem-disambig-notice.svg

{{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外觀的美觀？

一、運用一些基本的設計知識。例如：

優化顏色搭配。

反例：可能需要對讀者視力水平與審美水平下降負責的Navbox¶

使用顏色：

對比度比率：

字

1.25、

字

6.8、

字

15.24

標題

組一

子組一	內容

子組二	內容

子組三	內容

示例：有助於讀者保持眼健康並提升審美趣味的Navbox¶

使用顏色：

對比度比率：

字

5.7、

字

9.34、

字

12.35、

字

15.11

標題

組一

子組一	內容

子組二	內容

子組三	內容

（此Navbox來自{{hct}}的文檔）

突出不同元素的主次關係。

示例：使用{{ps}}突出主次關係¶

好	A1A1（OP） • B2B2（ED） • C3C3（伴隨曲） • D4D4（伴隨曲）

還行	A1A1（OP） • B2B2（ED） • C3C3（伴隨曲） • D4D4（伴隨曲）

二、避免跌宕起伏的側欄加大閱讀難度。這可能是級聯關係過於複雜，或者側標題欄的寬度不一樣導致的。

如有必要，可以使用{{Plate}}與{{Plate2}}在行內進一步分類，並添加 |groupstyle = box-sizing: content-box; width: ×em; |liststyle = width: auto; 參數對齊側標題欄（其中 ×em 是期望的每行字數）。

反例：跌宕起伏的側欄¶

標題

角色

勢力一

很長的團體名	…

特別長的團體名稱	…

更多的團體	…

勢力二

團體一	…

團體二	…

小勢力

…

很長的勢力名稱

官方機構

…

這個機構下面還有部門	…

部門二	…

隱秘陣線

…

音樂

OP	…

ED	…

示例：調整過後的側欄¶

標題

角色

勢力一

很長的團體名	…

特別長的團體名稱	…

更多的團體	…

勢力二

團體一	…

團體二	…

很長的
勢力名稱

官方機構	… 這個機構下面還有部門 … 部門二 …

隱秘陣線	…

小勢力

…

音樂

OP	…

ED	…

{{#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¶

child

組一	…

組二	…

subgroup

組一	…

組二	…

註記：

在實踐中，也有為了代碼簡潔，而把一些複雜的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]]
}}

註記：

使用{{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 參數是否一致，並去除所有 list_nstyle 參數中涉及背景顏色的部分。
找到首個奇偶樣式錯位的點位（一般出現在兩個子導航框的交界處）。
對於該點位下方的那個子導航框，反轉其奇偶樣式。
具體來說：如果那個子導航框沒有設置 |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，減小模板展開長度。

還有其他問題…

毋需顧慮，歡迎在討論版或本幫助的討論頁提問。

查 · 論 · 編萌娘百科幫助文檔

加粗的為政策性文件。

入門	登錄 • 確認電子郵件地址 • 搜索（搜索代碼） • Wiki入門 • 簽名使用指南 • 用戶頁面（自我展示） • 討論頁面 • 投票 • 用戶框 • WAF

創建條目	創建新條目 • 條目創建請求 • 創建條目的四種方法 • 萌娘化創作方法指導 • 萌百編輯簡明指南 • 方針 • 收錄範圍 • 條目命名 • 條目編寫

初級編輯	編輯規範 • 編輯提示 • 編輯用代碼 • 編輯衝突 • 標題限制 • 註腳 • 著作權信息

中級編輯	表格 • 重新導向頁面 • 消歧義頁 • 分類索引順序 • 命名空間 • 魔術字（狀態開關 • 系統變量 • 解析器函數） • 語言標籤 • 繁簡轉換（公共轉換組 • 字詞轉換模式的說明） • 日語（條目標題日本漢字） • 子頁面 • 內容模型 • 跨wiki

高級編輯	模板入門 • 模板 • 常用模板 • 模板規範 • 模板樣式表 • 替換引用 • Navbox問與答 • 創建作品模板 • 字詞轉換語法（高級語法） • HTML標籤 • 代碼高亮工具 • Poem • InputBox • 摺疊 • 正則表達式 • Lua • 使用VSCode • 使用Node.js • 使用Sublime Text • 使用Python

媒體	媒體幫助 • 圖像（頁面圖像） • 上傳圖片 • 授權協議選擇指引 • 覆蓋上傳文件 • 外部圖像（圖床） • 動圖 • 上傳遊戲封面 • 尋找原圖 • 插入視頻 • 插入音樂 • 插入ogg音樂文件 • MP3播放器 • Imagemap

條目格式	動畫 • 遊戲 • 畫集 • 音樂（VOCALOID）

管理	移動頁面 • 撤銷與回退 • 來源請求 • 濫用過濾器（使用指導） • 標籤 • 用戶討論存檔 • 緩存 • Widget代碼的安全性審查步驟 • 用戶交流用語樣板

小工具	編輯草稿本地保存工具 • HotCat小工具 • UserMessages小工具 • DynamicPageList • CategoryTree • 屏蔽插件白名單 • 維基友愛擴展 • Echo擴展 • 日本論壇用語對照表 • 聲優暱稱對照表 • 特殊符號表 • 顏文字表 • 顏色列表 • 維基星章

另請參見：萌娘百科政策文件 • 專題編輯指導 • 論述與其他文檔 • 工具箱

目錄

什麼是Navbox？

為什麼不推薦使用{{Navbox}}？

導航模板一定要使用Navbox嗎？

如何保持Navbox代碼的整潔？

如何保持Navbox外觀的美觀？

child和subgroup有什麼區別？

如何讓Navbox既可獨立使用，又可嵌入其他Navbox？

如何讓Navbox既可默認展開，又可默認摺疊？

如何默認只展開某一子導航框，其餘全部摺疊？

如何添加「全隱 / 全顯」按鈕？

如何更改「摺疊」按鈕的顏色？

如何更改「查論編」按鈕？

標題插入圖片時帶有水印，如何解決？

多個Navbox之間有間隙，如何解決？

Navbox的奇偶樣式錯位，如何解決？

嵌入Navbox後只有一行連結，如何解決？

還有其他問題…

什麼是Navbox？

為什麼不推薦使用{{Navbox}}？

導航模板一定要使用Navbox嗎？

如何保持Navbox代碼的整潔？

如何保持Navbox外觀的美觀？

child和subgroup有什麼區別？

如何讓Navbox既可獨立使用，又可嵌入其他Navbox？

如何讓Navbox既可默認展開，又可默認摺疊？

如何默認只展開某一子導航框，其餘全部摺疊？

如何添加「全隱 / 全顯」按鈕？

如何更改「摺疊」按鈕的顏色？

如何更改「查論編」按鈕？

標題插入圖片時帶有水印，如何解決？

多個Navbox之間有間隙，如何解決？

Navbox的奇偶樣式錯位，如何解決？

嵌入Navbox後只有一行連結，如何解決？

還有其他問題…