Fandom

Wikia中文

Help:訊息框

(重定向自Help:Infobox) | 简体 | 繁體 | 香港繁體

266个页面创建
于此维基上
添加新页面
聊天0
訊息框(Infobox)
90210-infobox-light.png

訊息框的例子

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

Fandom仍然正在改良這訊息框功能以達到任何介面使用得宜。請參考下方資料或此文章(英文)以閱讀詳細說明。目前有變更訊息框的工具,進一步訊息參見變更訊息框。關於舊式的傳統訊息框的詳細介紹,參見Help:傳統訊息框

使用链接

如何使用訊息框

你可以像增加一般模板一樣的方式來增加訊息框,包括使用編輯器的內建模板工具,或使用源代碼模式。在後者的例子中,一般的作法是複製模板的說明內容(可能會在模板頁的底部)並將它貼到文章中,更改裡面的資訊內容。例如:

{{角色訊息框(移動化)
 | 標題          = 魯夫
 | 圖片          = 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標籤)

佈局選項

訊息框有兩種可用的佈局選項:

  • default(預設)(tabular,水平式) 佈局 - <data> 標籤會在資訊內容值的左邊。
<infobox layout="tabular">
   ...
</infobox>


  • stacked(堆疊式)佈局 - <data> 標籤顯示在資訊內容值的上面。
<infobox layout="stacked">
   ...
</infobox>

自訂樣式

預設的訊息框樣式可以使用infobox 標籤中的themetheme-source屬性來更改。這使得訊息框的樣式可以透過個別社區的CSS來修改。

  • 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

水平顯示的群組

群組標籤也可以有另一種水平佈局的選擇,讓所有的內容在同一橫列上顯示。只要在群組標籤加上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輸出,參見移動化訊息框/標籤

例子

幫助及反饋

  • 請到這裡以瀏覽及搜索其他幫助頁面
  • 瀏覽社區中心以尋求更多幫助與支援
  • 如要報告任何問題或不明白的,請與我們聯絡
  • 觀看Fandom課堂了解如何更好地編輯社區內容。

您使用了广告屏蔽软件!


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

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

更多维基

随机维基