Help:資訊框

資訊框的例子

資訊框（Infobox）是設計用來展現一個頁面主題精簡內容的工具，它以有組織而能快速閱讀的方式呈現一些重要的資訊。資訊框中的一些欄位通常適用於整個wiki中不同的文章，以展現出一致性。資訊框一般會以模板來製作。

目前Fandom已經開發了新版資訊框的編碼方式，稱為行動化資訊框（Portable Infobox）。行動化資訊框能夠將所有的資訊在不同的裝置上也能完美的呈現出來，雖然是新版的資訊框，但是使用方式是沒有變動的，唯一的變動是它會影響資訊框在模板頁面中的編碼方式。我們開發了新的工具來將現有的舊版資訊框變更為新版的行動化資訊框。更多資訊可參考Help:變更資訊框。

相關連結

• 有關資訊框編輯器的基本使用，請查看Help:資訊框/編輯
• 有關行動化資訊框標準選項，包括wikitext文本使用和HTML輸出等，請查看Help:資訊框/標籤
• 有關如何使用CSS變更資訊框主題樣式，請查閱Help:資訊框/CSS
• 查看如何將經典資訊框變更為一個行動化資訊框，請查看Help:變更資訊框
• 內容行動化中心：有關行動化資訊框的指導，最佳實踐以及常見問題。

在條目中新增資訊框

在視覺化編輯器中插入資訊框

你可以像新增一般模板一樣的方式來插入資訊框，包括使用編輯器的內建模板工具，或使用原始碼模式。在視覺化編輯器中，行動化資訊框可以直接從「插入」下拉選單中的資訊框選項來插入資訊框至條目中。

同樣是插入資訊框，在原始碼模式中，一般而言你會把模板文件（通常可以在模板頁面的最下方找到）中複製整個語法至條目後，在等號之後輸入該頁面所需要的資訊。舉例來說：

{{角色資訊框
| 標題          = 魯夫
| 圖片          = Example.jpg
| 圖片說明      = 魯夫的圖像
| 位置          = 船長
| 年紀          = 19歲
| 狀態          = 活躍
| 身高          = 172公分
| 生日          = 5月5日
}}

雖然是行動化資訊框，但實際上流程與新增其它模板是一樣的。不過，這種模板頁面還是稍微有些不同，詳情說明如下。

建立新的資訊框

首先，建立一個你想要名稱的新模板，例如 Template:ExampleInfobox，我們可以開始建立一個基本的堆疊（stacked）資訊框，包括標題和圖片：

<infobox layout="stacked">
  <title source="name">
    <default>{{PAGENAME}}</default>
  </title>
  <image source="image" />
</infobox>

這個wiki文本會傳達給你的模板在title和image元素中使用name和image這兩個變數。此外你也可以提供default標籤，該值（包括名稱、圖片）會預設使用於文章中。

現在我們要再增加兩個欄位放置更多的資訊，因此我們先增加一欄：

  <data source="season">
    <label>Season（s）</label>
  </data>

之後再增加一欄first，並標示為 First seen, 最後得到以下內容：

<infobox layout="stacked">
  <title source="name">
    <default>{{PAGENAME}}</default>
  </title>
  <image source="image" />
  <data source="season">
    <label>Season（s）</label>
  </data>
  <data source="first">
    <label>First seen</label>
  </data>
</infobox>

我們可以將這個模板放入文章中，而得到一個有用的資訊框，顯示為右圖：

{{ExampleInfobox
| name   = Eddard Stark
| image  = Eddard.jpg
| season = [[season1|1]]
| first  = "[[Winter is Coming]]"
}}

隱藏元素

若該字段或元素沒有被填入任何值，則該欄會自動被隱藏而不會顯示出來，這適用於所有的標籤，除非該群組被設置為強制顯示（參見#強制所有的群組內容顯示）。如果每個欄位都是空的，那整個資訊框還是不會顯示出來。

變更資訊框布局

使用以上語法的資訊框會自動設定樣式，亦即使用整個社區的樣式。如果任何一項變數是空的，該橫列就不會顯示（除非使用了default標籤）

布局選項

資訊框有兩種可用的佈局選項：

預設（表格）布局	堆疊式布局
標籤會顯示在資訊內容值的左邊	標籤會顯示在資訊內容值的上面
<infobox> ... </infobox>	<infobox layout="stacked"> ... </infobox>
Default （table） layout	"Stacked" layout

自訂樣式

這裡有兩個方法可以覆蓋預設的資訊框樣式，第一個方法是：你可以在進入個別wiki的Special:WikiFeatures頁面啟用Europa資訊框樣式功能，啟用後，資訊框的顏色就會變成導航欄的顏色。

另外一個方法是使用個別社區的CSS。你可以在資訊框的標籤中使用 theme或theme-source屬性來更改。這樣一來就能輕易地針對特定的資訊框模版使用不同的類別（class）。

• theme屬性使用於將自訂的CSS類別（class）用於資訊框時。
• theme-source屬性讓你可以用模板變數來變更CSS類別。

如果兩個屬性都使用在資訊框中，theme屬性會被視為預設。

關於更多自訂的方式和詳細介紹，參見Help:資訊框/CSS或者是內容移動化維基的資訊框樣式與主題的例子。

重點色

每個資訊框的標題或者頁眉背景的顏色都可以通過使用重點色實現。比如theme-source就是使用accent-color-source （背景） and accent-color-text-source （文字）模版參數中的值。

比如，如果一個模版設定accent-color-source="bkg" 然後文章中的資訊框設定bkg = #fff，標題和頁眉的背景顏色將變成#fff（白色）。 顏色必須設定為#fff或者#ffffff HEX的形式，否則將無法實現。

重點色將優先於預設顏色進行呈現。

它也包含預設顏色的參數，所以accent-color-default="#fff"將適用於所有標題和頁眉的背景顏色，accent-color-text-default="#000000"透過使用hex形式設定預設字體顏色同樣生效。

使用多個圖片或影片

標籤化的圖片

要在資訊框的同一個欄位中使用多張圖片，你可以使用<gallery> 標籤，例如：

{{Example
| name   = Eddard Stark
| image  = <gallery>
Eddard 1.jpg|在馬上的Eddard
Eddard 2.jpg|在房子裡的Eddard
Eddard 3.jpg|在靈車旁的Eddard
</gallery>
}}

關於這個功能的討論，可參見：這個討論串

要在資訊框中增加影片，使用<image> 標籤 - 就像你要增加圖片時一樣。當影片插入之後，會出現一個播放圖示以及影片長度資訊，點擊該影片就會出現影片播放器。如果你想要增加多個影片，在每個影片上都加上新的 <image> 標籤。

群組資訊

特別的順序和群組

現在你已經能建立簡單的資訊框，可以開始學習使用更多的欄位。這一段我們將介紹建立放置在右側的資訊框。

這個資訊框有三個資訊欄位，以及標題和圖片欄位。如你所見，標題欄位不一定要放在最前面，不過在一個資訊框中只能使用一次。

<infobox layout="stacked">
  <data source="prev">
    <label>Previous</label>
  </data>
  <data source="conc">
    <label>Concurrent</label>
  </data>
  <data source="next">
    <label>Next</label>
  </data>
  <title source="name" />
  <image source="image" />
</infobox>

群組標籤中的分類資訊

<group>欄位讓你可以把一些欄位置入一個群組（group）中，每個群組可以有一個開頭（header）。記住：沒有內容的欄位不會顯示。這個規則也適用於群組-如果特定的群組中沒有任何欄位（除了群組標題）有內容的話，整個群組就不會顯示。

<infobox layout="stacked">
  <data source="prev">
    <label>Previous</label>
  </data>
  <data source="conc">
    <label>Concurrent</label>
  </data>
  <data source="next">
    <label>Next</label>
  </data>
  <title source="name" />
  <image source="image" />
  <group>
    <header>Details</header>
    <data source="conflict">
      <label>Conflict</label>
    </data>
    <data source="date">
      <label>Date</label>
    </data>
    <data source="place">
      <label>Place</label>
    </data>
    <data source="result">
      <label>Outcome</label>
    </data>
  </group>
</infobox>

群組的水平布局選擇

水平顯示的群組

除了垂直布局之外，群組標籤<group>也有另一種水平佈局的選擇，讓所有的內容在同一橫列上顯示。只要在群組標籤加上layout="horizontal"的屬性就可以。

  <group layout="horizontal">
     ...
  </group>

智慧布局

和水平布局類似的結構是智慧布局。它允許資料可以在一行中以組的形式進行輸入。當達到極限的時候，新的資料會另起一行進行顯示。一行中的內容將根據寬度自行調整。

使用智慧布局，你可以添加row-items="3" （或者其他的數字進行限制）。智慧布局中的內容將自動使用水平布局，因此如果你已經使用了智慧布局，就無需再添加這個屬性。儘管如此，你無法透過將layout="default"添加到標籤<data>中，然後在智慧布局中混合輸入橫向和縱向資料。

如果你需要將資料進行分行，可以在標籤<data>中使用span="2"。

  <group collapse="closed">
    <header>Appearances</header>
    <data source="films" />
    <data source="comics" />
  </group>

強制所有的群組內容顯示

使用show="incomplete"，你可以強制所有的群組欄位顯示，即使該欄位內容是空的，但如果所有的欄位都是空的，那整個群組還是不會顯示：

  <group layout="horizontal" show="incomplete">
    <header>Combatants</header>
    <data source="side1" />
    <data source="side2" />
  </group>

現在我們把所有的部分加在一起，我們得到最後的模板代碼：

<infobox layout="stacked">
  <data source="prev">
    <label>Previous</label>
  </data>
  <data source="conc">
    <label>Concurrent</label>
  </data>
  <data source="next">
    <label>Next</label>
  </data>
  <title source="name" />
  <image source="image" />
  <group>
    <header>Details</header>
    <data source="conflict">
      <label>Conflict</label>
    </data>
    <data source="date">
      <label>Date</label>
    </data>
    <data source="place">
      <label>Place</label>
    </data>
    <data source="result">
      <label>Outcome</label>
    </data>
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Combatants</header>
    <data source="side1" />
    <data source="side2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Commanders</header>
    <data source="commanders1" />
    <data source="commanders2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Strength</header>
    <data source="forces1" />
    <data source="forces2" />
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Casualties</header>
    <data source="casual1" />
    <data source="casual2" />
  </group>
  <data source="civilian">
    <label>Civilian casualties</label>
  </data>
</infobox>

現在我們可以在一篇文章中使用這個資訊框。使用如下：

{{Battle
| prev        = [[Battle of Fair Isle]]
| conc        = [[Siege of Old Wyk]]
| next        = [[Siege of Pyke]]
| name        = [[Siege of Great Wyk]]
| image       = Stannis Great Wyk.png
| conflict    = [[Greyjoy Rebellion]]
| date        = 289 AL
| place       = [[Great Wyk]], the [[the Iron Islands]]
| result      = [[Iron Throne]] victory
| side1       = [[File:Greyjoy.png|20px|link=House Greyjoy]] [[House Greyjoy]]
| side2       = [[File:Baratheon.png|20px|link=House Baratheon]] [[Iron Throne]]
| commanders1 = Unknown
| commanders2 = Lord [[Stannis Baratheon]]
| casual1     = Unknown
| casual2     = Unknown
}}

可摺疊群組

使用可摺疊群組

Groups can be made collapsible. 藉由在群組標籤中增加 collapse="open" 或 collapse="closed" 可以使群組變為可摺疊。這會使群組的開頭變成可以點擊（用以展開或摺疊整個群組），而這兩者可以分別設定預設是要打開或關上。例子：

  <group collapse="closed">
    <header>Appearances</header>
    <data source="films" />
    <data source="comics" />
  </group>

注意: 開頭行中如果有內容，必須要直接接續在這個標籤之後。

面板

添加標籤<panel>爲<infobox>的子標籤以建立面板，每一個<panel>可以有一至多個<section>子標籤以分節，每一節<section>都可以憑藉<label>子標籤創建一個標號。

<infobox>
  <title source="title">
    <default>{{PAGENAME}}</default>
  </title>
  <panel>
    <section>
      <label>5E</label>
      <data source="size1">
        <label>Size</label></data>
      <data source="type1">
        <label>Type</label></data>
    </section>
    <section>
      <label>4E</label>
      <data source="origin2">
        <label>Origin</label></data>
      <data source="type2">
        <label>Type</label></data>
      <group>
        <header>Details</header>
        <data source="input2">
          <label>Input</label></data>
        <data source="output2">
          <label>Output</label></data>
      </group>
    </section>
  </panel>
</infobox>

進階用法

欄位設計（format）

如果你想要在資訊框中增加一些附加的資訊-例如一些圖標、分類-，或處理欄位中的數值，使用欄位設計功能以達成這些目的。

• 當format標籤被指定時，source=中提供的變數會被設定為在 format標籤之內。
• 如果source=中提供的變數是空的，會自動使用default標籤中的值。 （如果未指定default標籤，則不會顯示。

以下是使用的例子：

• 增加的文字 - ${{{price}}}
• 連結 - [[{{{Harry Potter}}}]]
• 分類 - [[Category:{{{car type}}}]]

例如，我們再加上一個{{money icon}}圖示：

  <data source="price">
    <label>Price</label>
    <format>{{{price}}} {{money icon}}</format>
  </data>

右圖顯示的效果可以用以下的代碼達成：

特別設計的欄位

  <header>Price to buy</header>
  <data source="buyhaggle">
    <label>Price with Haggling</label>
    <format>{{{buyh}}} {{money icon}}</format>
  </data>
  <data source="buy">
    <label>Undiscounted price</label>
    <format>{{{buy}}} {{money icon}}</format>
  </data>
  <data source="sell">
    <label>Price to sell</label>
    <format>{{{sell}}} {{money icon}}</format>
  </data>
  <data source="weight">
    <label>Weight</label>
    <format>{{{weight}}} {{weight icon}}</format>
  </data>

解析器函數

解析器函數也可以加到任何資訊框中。然而如果變數、標籤或資料來源中沒有任何文字，它會自動隱藏。例如

階層	半獸人 步兵

模板原始碼
<data source="level"> <label>階層</label> <default>半獸人 {{#switch:{{{level}}}|1=工人|2=步兵|#default=步兵}}</default> </data>

可使用的標籤

關於行動化資訊框中，可使用標籤的詳細列表，以及包括wiki文本與其HTML輸出，參見Help:訊息框/標籤！

例子

對於資訊框成品仍舊沒有概念？沒關係，您可以從模仿開始！首先來看看這些社區成功的模板。

• 哆啦A夢wiki--絕大多數是標準資訊框，構架簡單明瞭。
  • 如果您只是希望建立一個簡單陳列簡潔資料的表格，不妨來看看這些：
  • Template:電影
• 香港巴士大典--極為複雜的傳統資訊框轉換的行動化資訊框。
  • 哇，這些可以自動計算的魔術字太炫了！您有許多複雜wiki文本編寫的傳統資訊框？不妨看看怎麼把它們升級改造吧：
  • Template:巴士路線資訊
  • Template:專綫小巴路線資訊
  • Template:公共小巴路線資訊
• 万界规划局--超高自定義度的資訊框，幾乎用到了所有參數配置，結合了大量CSS實現進階效果。
  • 行動化資訊框還能長這樣？想學會自定義的全能套餐嗎？不妨看看這些：
  • MediaWiki:Gadget-sitelib/infobox.css
  • Template:Character

更多帮助和反馈

• 於帮助:帮助中心瀏覽或搜索其他帮助頁面。
• 查看Fandom社区中心以尋求更多協助和支持。
• 查看联系Fandom頁面，了解如何报告本條目中的任何錯誤或不清楚的步驟。