• 欢迎光临小鱼君和他的朋友们!申请编辑,请联系管理员
  • MediaWiki 1.32.1升级失败!失败!哦豁完蛋……
  • 最近站长很憔悴,这破站怕是药丸……
  • 公告是什么呢?裹上鸡蛋黄,撒上面包糠……嗯,大概就能吃了~
Wiki.png
欢迎光临小鱼君和他的朋友们,参观者!这里是机智的小鱼君的个人网站,您可以随意浏览这里的百余篇文章,无论你有什么想法,都欢迎你进行编辑,不过您需要先登录账号或注册一个账号 !⚠️注意:本社区所有文字内容采用创作共享 署名-非商业用途-相同方式共享(CC BY-SA) 4.0协议授权,转载需注明出处(https://wjghj.cn/wiki/Help:Infobox)

Help:Infobox

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

创建新的讯息框

首先,创建一个你想要名称的新模板,例如 Template:ExampleInfobox,我们可以开始建立一个基本的堆迭(stacked)讯息框,包括标题和图片:


<default>Infobox</default>


这个Wiki文本会传达给你的模板在titleimage元素中使用nameimage这两个变量。此外你也可以提供default标签,该值(包括名称丶图片)会预设使用於文章中。

现在我们要再增加两个栏位放置更多的资讯,因此我们先增加一栏:

Season(s)


之后再增加一栏first,并标示为 first seen, 最后得到以下内容:


<default>Infobox</default>

Season(s)
first seen


我们可以用这个模板放入文章中,而得到一个有用的讯息框,显示为右图:

Template:ExampleInfobox

隐藏元素

若该字段或元素没有被填入任何值,则该栏会自动被隐藏而不会显示出来,这适用於所有的标签,除非该群组被设置为强制显示则例外(参见#强制所有的群组内容显示)。如果每个栏位都是空的,那整个讯息框还是不会显示出来。

更改讯息框布局

使用以上语法的讯息框会自动设置样式,亦即使用整个社区的样式。如果任何一项变量是空的,该横列就不会显示(除非使用了default标签)

布局选项

讯息框有两种可用的布局选项:

预设(表格)布局 堆迭式布局
标签会显示在信息内容值的左边 标签会显示在信息内容值的上面
  ...


  ...


自订样式

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形式设定预设字体颜色同样生效。

使用多个图片或影片

File:Infoboxtabs.png
标签化的图片

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


Template:Example


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

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

群组资讯

File:Advancedinfobox.png
特别的顺序和群组

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


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


 Previous
 Concurrent
 Next
 
 <image source="image" />

</infobox> </syntaxhighlight>

 


群组标签中的分类资讯

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


可摺迭群组

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

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

<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输出,参见移动化讯息框/标签