FANDOM


訊息框(Infobox)
90210-infobox-light.png

訊息框的例子

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

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

相關連結

在條目中新增訊息框

VE-portableinfobox.png

在視效編輯器中插入訊息框

你可以像新增一般模板一樣的方式來增加訊息框,包括使用編輯器的內建模板工具,或使用源代碼模式。在視效編輯器中,移動式訊息框可以直接從「插入」下拉選單中的訊息框選項來插入訊息框至條目中。

同樣是插入訊息框,在源代碼(來源)模式中,一般而言你會把模板文檔(通常可以在模板頁面的最下方找到)中複製整個語法至條目後,在等號之後輸入該頁面所需要的信息。舉例來說:

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

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

創建新的訊息框

Tutorialinfobox.png

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

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

這個Wiki文本會傳達給你的模板在titleimage元素中使用nameimage這兩個變量。此外你也可以提供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>
Screen Shot 2015-06-16 at 12.12.17.png

Default (table) layout

Screen Shot 2015-06-16 at 12.10.54.png

"Stacked" layout

自訂樣式

這裡有兩個方法可以覆蓋預設的訊息框樣式,第一個方法是:你可以在進入個別維基的Special:WikiFeatures頁面開啟Europa信息框版式功能,開啟之後,訊息框的顏色就會變成導航欄的顏色。

另外一個方法是使用個別社區的CSS。你可以在訊息框的標籤中使用 themetheme-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形式設定預設字體顏色同樣生效。

使用多個圖片或影片

Infoboxtabs.png

標籤化的圖片

要在訊息框的同一個文字中使用多張圖片,你可以使用<gallery> 標籤,例如:

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

關於這個功能的討論,可參見:這個討論串

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

群組資訊

Advancedinfobox.png

特別的順序和群組

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


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

<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>
 

群組的水平布局選擇

Screen Shot 2015-06-16 at 13.27.08.png

水平顯示的群組

除了垂直布局之外,群組標籤<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
}}
 

可摺疊群組

PI-Collapse.png

使用可摺疊群組

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

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

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

進階用法

欄位設計(format)

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

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

以下是使用的例子:

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

例如,我們再加上a {{money icon}} 標版圖標:

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

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

Field mutators.png

特別設計的欄位

<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>

Parser函數

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

Template代碼 顯示為
<data source="level">
  <label>階層</label>
  <default>半獸人 {{#switch:{{{level}}}|1=工人|2=步兵|#default=步兵}}</default>
</data>

可使用的標籤

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

例子

幫助及反饋

您使用了广告屏蔽软件!


Wikia通过广告运营为用户提供免费的服务。我们对用户通过嵌入广告屏蔽软件访问网站进行了使用调整。

如果您使用了广告屏蔽软件,将无法使用我们的服务。请您移除广告屏蔽软件,以确保页面正常加载。

查看其他FANDOM

随机维基