使用說明:Navbox問與答
- 本文用於介紹萌娘百科中一些特定功能的操作方法；
- 本文僅是一篇論述，不屬於方針或指引。如果本指南與相關方針或指引發生衝突或存在不一致的情況，請以方針或指引的條文為準。
本幫助通過問答的形式對Navbox的使用進行解讀。
Navbox是使用一系列模板與模塊生成的內容框。這些模板與模塊包括但不限於：
- Module:Nav
- {{Navbox}}、{{Navbox subgroup}}、{{Navbox with columns}}、{{Navbox with collapsible groups}}
- Module:Mininav
- {{大家族}}、{{大家族模板子項}}、{{大家族內容行}}
Navbox能夠將多個頁面連結歸納、整理、排列後呈現給讀者，具有導航的作用，因此得名Navigation Box。
- 註記：
- Module:Mininav的特點是展開長度小；{{大家族}}的特點是易於上手。本幫助不涉及這兩個模塊與模板。
跟{{Navbox}}相比，Module:Nav具有一些優勢：
- Module:Nav生成的Navbox展開長度更小
- {{Navbox}}的
evenodd參數無法正常工作，而Module:Nav修復了這一問題 - 在Module:Nav中，
listn參數的跳躍不會造成任何影響
因此，本幫助的示例代碼將全部使用Module:Nav。
不一定。善書不擇筆，Navbox只是搭建導航模板的一種通用的解決方案；如果存在比Navbox更合適的搭建方式，可以大膽使用。
- 註記：
- 例如{{ANIPLEX週六深夜動畫檔}}與{{萌元素週期表}}就是使用純表格搭建的。
一、最重要的是縮進！縮進可以清晰地體現出不同子導航框的級聯關係，以及內容之間的排列關係。
| 合併 |
|---|
.svg){kind=small}
|
| 合併 |
|---|
|
二、把重複使用且複雜的代碼納入{{Template Repeat}}或{{ptl}}，或者封裝成一個獨立的模板，以便保持Navbox本體代碼清晰且簡潔。
| 合併 | |||
|---|---|---|---|
| |||
|
三、注意參數的順序。Navbox的參數明顯可以分為功能相近的多組，避免將不同組的參數混搭在一起，從而提升代碼的可讀性。
四、避免Navbox過於龐雜。越是大型的代碼越難維護，加以萌娘百科的共筆性質，不同用戶對代碼風格可能有不同的理解。
- 註記：
- 使用{{ptl}}會導致模板展開長度增大，增大幅度取決於納入的代碼的大小以及使用次數。
一、運用一些基本的設計知識。例如：
- 優化顏色搭配。
| 合併 | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
使用顏色：
對比度比率：
字 1.25、
字 6.8、
字 15.24
| |||||||||||||||||||
| 合併 | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
使用顏色：
對比度比率：
字 5.7、
字 9.34、
字 12.35、
字 15.11
| |||||||||||||||||||
- 突出不同元素的主次關係。
| 合併 | ||||||
|---|---|---|---|---|---|---|
|
二、避免跌宕起伏的側欄加大閱讀難度。這可能是級聯關係過於複雜，或者側標題欄的寬度不一樣導致的。
如有必要，可以使用{{Plate}}與{{Plate2}}在行內進一步分類，並添加 |groupstyle = box-sizing: content-box; width: ×em; 參數對齊側標題欄（其中
|liststyle = width: auto;×em 是期望的每行字數）。
| 合併 | |||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||
| 合併 | |||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||
三、避免Navbox過於龐雜。越是龐雜的Navbox越難整理、清潔。
四、加入藝術創意。
- 註記：
- 藝術創意並非必要的，切忌捨本逐末。
child和subgroup有什麼區別？
一、從視覺效果來看：child和subgroup的唯一區別在於，child的左側的組標題更寬一些，而subgroup偏窄。
二、從原始HTML來看：child和subgroup除了 padding 樣式不同外（即上面提到的寬度不同），沒有其他任何不同之處。
甚至child的類也是 navbox-subgroup 。
三、從設計目的來看：child主要用在一個獨立、完整的Navbox身上，通過去掉它的邊框，使得它能夠嵌入到另一個Navbox裡面；
而subgroup是Navbox的組成部分，一般不獨立使用。
因此，在搭建Navbox的過程中，不建議不加區分地混用二者。
| 合併 | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||
- 註記：
- 在實踐中，也有為了代碼簡潔，而把一些複雜的subgroup作為一個模板獨立出來，再嵌入回Navbox的情況。
可以通過一個參數來控制Navbox的樣態。
當用戶給模板的這個參數傳入 child 時，模板會給Module:Nav傳入 |child ，此時Navbox即可嵌入到其他Navbox裡。
|navbar = plain
合併{{{1}}} 控制Navbox的樣態¶
| |||||
|---|---|---|---|---|---|
| |||||
| |||||
可以通過一個參數來控制Navbox的展開與摺疊。
當用戶給模板的這個參數傳入 collapsed 時，模板會給Module:Nav傳入 |state = mw-collapsed ，此時Navbox默認摺疊；
否則，Navbox默認展開。
合併{{{1}}} 控制Navbox的展開與摺疊¶
| |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||
| |||||||||||||||||
如何默認只展開某一子導航框，其餘全部摺疊？
可以通過collapsible groups配合一個參數來僅展開某一子導航框。
合併{{{1}}} 僅展開某一子導航框¶
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1，子導航框全部展開
1 = 子導航框一 ，僅展開第一個子導航框
1 = 子導航框二 ，僅展開第二個子導航框
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
如何添加「全隱 / 全顯」按鈕？
在 title 參數裡面使用Widget:LargeNavbox，並給Navbox添加 |class = largeNavbox 參數。
對於較大的、擁有3個以上可摺疊子導航框的Navbox，「全隱 / 全顯」按鈕可以幫助讀者大幅提高閱覽效率。
| 合併 |
|---|
|
如何更改「摺疊」按鈕的顏色？
給 titlestyle 參數添加 -webkit-text-fill-color 屬性即可。
合併-webkit-text-fill-color 屬性¶
| ||||||
|---|---|---|---|---|---|---|
| ||||||
| ||||||
萌娘百科的全站樣式表給 <a> 設置了自己的 color 屬性，因此 titlestyle 裡的 color 無法作用到它的身上。
而 -webkit-text-fill-color 具有更高的優先級，能夠覆蓋 <a> 自己的樣式。
如何更改「查論編」按鈕？
使用模板樣式表。不推薦使用{{VteStyle}}，因為它對Module:Nav不起作用，並且性能開銷較大。
標題插入圖片時帶有水印，如何解決？
使用{{Image-clip}}。{{Image-clip}}在避免水印和確保鏈入方面進行了專門設計。
| 合併 | ||||||
|---|---|---|---|---|---|---|
| ||||||
| ||||||
- 註記：
- 使用{{Image-clip}}避免水印還有兩個好處：
- 加載的圖片是原圖大小，顯示更加清晰
- 可以利用
img-css參數調整上下邊距，優化視覺效果
- 如果圖片有矢量圖（SVG）版本，也可以直接插入矢量圖，這時圖片不會帶有水印。
- 實際上，導航模板{{Minecraft}}使用的圖片就是cm:File:Minecraft_brand_logo.svg
檢查並去除Navbox的原始碼與 <includeonly> 、 </includeonly> 等標籤之間的空行。
| 合併 |
|---|
|
- 註記：
- 在Navbox中使用{{背景圖片}}會不可避免地在末尾添加一個空行。
出現奇偶樣式錯位的情況時，可以按以下流程調整：
- 檢查不同地方的
oddstyle和evenstyle參數是否一致，並去除所有listnstyle參數中涉及背景顏色的部分。 - 找到首個奇偶樣式錯位的點位（一般出現在兩個子導航框的交界處）。
- 對於該點位下方的那個子導航框，反轉其奇偶樣式。
具體來說：如果那個子導航框沒有設置|evenodd = swap，則加入該參數；反之，則去除該參數。 - 預覽調整後的效果，並回到第2步，直到所有奇偶樣式顯示正常。
| 合併 | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||
| |||||||||||||||||
另一種節省人力的辦法是讓奇行樣式與偶行樣式相同。然而，在Navbox比較複雜時，這種辦法會將成本轉嫁給讀者。
- 註記：
- User:Chi_ZJ2製作了一個半自動工具NavEO，可以自動執行上述調整過程。
一、檢查Navbox是否存在已過審版本。若不存在，等待過審後即可解決。
二、檢查模板展開長度是否超過限制，並進行下面任意一個工作：
- 使用{{TemplateAsyncLoad}}異步加載Navbox。
- 將Navbox拆分成多個更小的Navbox，減小模板展開長度。
還有其他問題…
| |||||||||||||||||||||||||||||||||||
