FANDOM


本页使用了标题或全文手工转换

90210-infobox-light

信息框的例子

信息框(Infobox)是设计用来展现一个页面主题精简内容的工具,它以有组织而能快速阅读的方式呈现一些重要的信息。信息框中的一些栏位通常适用于整个wiki中不同的文章,以展现出一致性。信息框一般会以模板来制作。

当前Fandom已经开发了新版信息框的编码方式,称为移动化信息框(Portable Infobox)。移动化信息框能够将所有的信息在不同的装置上也能完美的呈现出来,虽然是新版的信息框,但是使用方式是没有变动的,唯一的变动是它会影响信息框在模板页面中的编码方式。我们开发了新的工具来将现有的旧版信息框变更为新版的移动化信息框。更多信息可参考帮助:变更信息框

相关链接

在文章中新增信息框

VE-portableinfobox

在视效编辑器中插入信息框

你可以像新增一般模板一样的方式来插入信息框,包括使用编辑器的内建模板工具,或使用源代码模式。在视效编辑器中,移动化信息框可以直接从“插入”下拉选单中的信息框选项来插入信息框至文章中。

同样是插入信息框,在源代码模式中,一般而言你会把模板文档(通常可以在模板页面的最下方找到)中复制整个语法至文章后,在等号之后输入该页面所需要的信息。举例来说:

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

虽然是移动化信息框,但实际上流程与新增其它模板是一样的。不过,这种模板页面还是稍微有些不同,详情说明如下。

创建新的信息框

Tutorialinfobox

首先,创建一个你想要名称的新模板,例如 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

Default (table) layout

Screen Shot 2015-06-16 at 12.10.54

"Stacked" layout

自定义样式

这里有两个方法可以覆盖默认的信息框样式,第一个方法是:你可以在进入个别wiki的Special:WikiFeatures页面启用Europa信息框样式功能,启用后,信息框的颜色就会变成导航栏的颜色。

另外一个方法是使用个别社区的CSS。你可以在信息框的标签中使用 themetheme-source属性来更改。这样一来就能轻易地针对特定的信息框模版使用不同的类别(class)。

  • theme属性使用于将自定义的CSS类别(class)用于信息框时。
  • theme-source属性让你可以用模板变数来变更CSS类别。

如果两个属性都使用在信息框中,theme属性会被视为默认。

关于更多自定义的方式和详细介绍,参见帮助:信息框/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

标签化的图片

要在信息框的同一个栏位中使用多张图片,你可以使用<gallery> 标签,例如:

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

关于这个功能的讨论,可参见:这个讨论串

要在信息框中增加影片,使用<image> 标签 - 就像你要增加图片时一样。当影片插入之后,会出现一个播放图示以及影片长度信息,点击该影片就会出现影片播放器。如果你想要增加多个影片,在每个影片上都加上新的 <image> 标签。

群组信息

Advancedinfobox

特别的顺序和群组

现在你已经能创建简单的信息框,可以开始学习使用更多的栏位。这一段我们将介绍创建放置在右侧的信息框。

这个信息框有三个信息栏位,以及标题和图片栏位。如你所见,标题栏位不一定要放在最前面,不过在一个信息框中只能使用一次。

<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

水平显示的群组

除了垂直布局之外,群组标签<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

使用可折叠群组

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

例如,我们再加上一个{{money icon}}图示:

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

右图显示的效果可以用以下的代码达成:

Field mutators

特别设计的栏位

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

解析器函数

解析器函数也可以加到任何信息框中。然而如果变数、标签或数据来源中没有任何文字,它会自动隐藏。例如

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

可使用的标签

关于移动化信息框中,可使用标签的详细列表,以及包括wiki文本与其HTML输出,参见帮助:信息框/标签

例子

对于信息框成品仍旧没有概念?没关系,您可以从模仿开始!首先来看看这些社区成功的模板。

帮助及反馈

除了特别提示,社区内容遵循CC-BY-SA 授权许可。