如何在MediaWiki中创建“信息框”（infoboxes）？

Question

我正在使用Mediawiki制作一个维基。我在其他维基上看到了每个页面的右侧边栏。 就像这样：http://minecraft.gamepedia.com/Diamond_Ore 右侧边栏上有关于维基帖子所解释的事物或其他内容的信息。

我想知道是否可能在每个页面上都制作这样的边栏，以及如何实现？

- halmi4

---

我知道这是一个老问题，但我看到你的示例URL已经被删除了。它很重要吗？请随意附上屏幕截图以更好地澄清（而不是个人网站的外部链接），因为这个问题对一些人仍然有用。 - Valerio Bozz

我想编辑-mediawiki +MediaWiki，但是编辑队列像往常一样已满。 - undefined

Answer 1

为了制作简单而优雅、灵活的信息框，首先要检查是否安装了ParserFunctions扩展。然后创建一个名为“Infobox”（或其他名称）的模板，其中包含以下HTML和wikitext的组合：

<div class="infobox">
<div class="infobox-title">{{{title|{{PAGENAME}}}}}</div>{{#if:{{{image|}}}|
<div class="infobox-image">[[File:{{PAGENAME:{{{image}}}}}|300px]]</div>}}
<table class="infobox-table">{{#if:{{{param1|}}}|<tr>
    <th>Parameter 1</th>
    <td>{{{param1}}}</td>
</tr>}}{{#if:{{{param2|}}}|<tr>
    <th>Parameter 2</th>
    <td>{{{param2}}}</td>
</tr>}}{{#if:{{{param3|}}}|<tr>
    <th>Parameter 3</th>
    <td>{{{param3}}}</td>
</tr>}}{{#if:{{{param4|}}}|<tr>
    <th>Parameter 4</th>
    <td>{{{param4}}}</td>
</tr>}}{{#if:{{{param5|}}}|<tr>
    <th>Parameter 5</th>
    <td>{{{param5}}}</td>
</tr>}}</table>
</div>

将“param1”，“param2”等替换为您实际想要用于信息框的参数，例如“name”，“birth-date”等。如果需要更多参数，请复制并修改现有参数。

然后前往MediaWiki:Common.css并添加一些样式（如果您没有必要的权限来编辑MediaWiki:Common.css，则必须将此CSS作为内联样式添加到模板中的HTML中，或者更好的方法是使用TemplateStyles extension）：

.infobox {
    background: #eee;
    border: 1px solid #aaa;
    float: right;
    margin: 0 0 1em 1em;
    padding: 1em;
    width: 400px;
}
.infobox-title {
    font-size: 2em;
    text-align: center;
}
.infobox-image {
    text-align: center;
}
.infobox-table th {
    text-align: right;
    vertical-align: top;
    width: 120px;
}
.infobox-table td {
    vertical-align: top;
}

最后，前往需要信息框的维基页面并复制以下维基文本，将“Infobox”替换为您给模板命名的名称，“param1”，“param2”等替换为您赋予参数的名称：

{{Infobox
| title = 
| image = 
| param1 = 
| param2 = 
| param3 = 
| param4 = 
| param5 = 
}}

您可以安全地留空或删除您不使用的任何参数，因为它们都是可选的。如果未提供“title”，信息框将默认为页面名称，这通常是您想要的。

我不得不为无数客户开发这样的信息框，并且逐渐发现这个解决方案在复杂性和灵活性方面是最优的。希望能对某些人有所帮助！

PS：对于任何高级用户：我建议使用HTML而不是维基文本来定义主表格，因为这样我们就可以避免与#ifs的管道发生冲突。在Wikipedia中，通过使用一个称为{{!}}的模板插入管道来避免此冲突，但这会导致难以阅读的维基文本。

- Sophivorus

Answer 2

维基百科信息框只是带有右侧浮动和一些额外样式、颜色等的表格。

最简示例

这里是一个最简示例，一个带有1列（和1行）的浮动表格：

{| style="float:right; border:1px solid black"
| My fantastic infobox
|-
| More info
|}

要理解这个语法，请阅读官方文档。

https://www.mediawiki.org/wiki/Help:Tables

带图片的示例

你可能会感到惊讶，这只是一个有两列和一些行的表格：

这是代码：

{| style="float:right;border:1px solid black"
!colspan="2" | Fantastic Page
|-
!colspan="2" | [[File:Example image.svg|260px]]
|-
! Info
| Stuff
|-
! More Info
| More Stuff
|-
! And Info
| Again Stuff
|}

有用的额外信息：

• 如果你懂CSS，可以使用CSS类，并使用扩展模板样式创建一个专门的页面来应用你的CSS规则
• 如果你想创建一个带参数的模板，请阅读关于MediaWiki模板的页面，这样你就不需要在每个页面上手动输入表格，而只需定义一些参数。

---

注意：这对于展示方面来说没问题，但对于内容方面，人们还应仔细考虑在哪里存储实际数据。特别是如果你想创建一个维基农场。可能的选择包括标准的维基文本/模板语法、语义化媒体维基(SemanticMediaWiki)、维基库(Wikibase)。

- David Reeve

---

这对于演示方面来说还不错，但是对于内容方面，人们也应该仔细考虑存储实际数据的位置。可能的选择包括标准的维基文本/模板语法、SemanticMediaWiki和Wikibase。 - Nemo

Answer 3

我不确定@Sophivorus的帖子有多新——没有日期，所以我认为它是2018年的，如果不是——抱歉。

我正在寻找一个教程，解释可怕的infoboxes及其创建过程，但没有找到。维基本身也没有帮助。经过2.5个晚上的搜索，我最终放弃了，并找到了Sophivorus的帖子。它给了我一个提示，即使用简单的CSS在HTML中创建infobox可能是更好、更容易的想法。我认为维基必须将其难以理解的infoboxes转换为HTML，我没有错！:) 我现在拥有一个漂亮的infobox，而不需要学习维基的scribunto-lua-srua-wikitext monster，仅需一些HTML和CSS知识。

我想以逐步方式向像我这样的菜鸟分享解决方案。

1. Go to a wikipage with an infobox you like (in my case Formica fusca page).
2. Select whole content of the infobox and right click on its title at the top of the infobox.
3. Choose to inspect the element (naming might differ between browsers - I use Opera)
4. Look to the right (a window opened).
5. Move cursor above the entries in the right window and look for <table class"[..] marker. Note that the whole infobox was highlighted as you moused over the <table class="
6. Right click on it and go to Copy, then select Copy outerHTML.
7. Create Template:Examplenamehere page on your MediaWiki, edit it and place copied HTML code there. Edit it as you wish.
8. As Sophivorus said go to MediaWiki:Common.css and add some styling - you might use the code he/she mentioned.
9. Styling. In HTML code add classes to elements you wish to style through CSS page (from step 8). You will need at least those: 1) give the whole infobox (in this case it wil be <table class="infobox" bla bla bla>) 2) titles/headers class infobox-subtitle (or whatever; <th class="infobox-subtitle" bla bla>) 3)give sub-title a class if you wish any sub-titles (<td class="infobox-subtitle" bla bla>).

10. Copy CSS from here or create your code in CSS by yourselves using classes mentioned above

    .infobox {
    background-color: #ffff00;
    border: 2px solid #008600;
    float: right;
    margin: 0 0 1em 1em;
    padding: 1em;
    width: 400px;
    }      
    .infobox-title {
    border: 1px solid #000000;
    font-size: 1.5em;
    text-align: center;
    background-color: #ff0000;
    }
    .infobox-subtitle {
    font-size: 1em;
    text-align: center;
    background-color: #fff00;
    }
    .infobox-image {
    text-align: center;
    background-color: #ffff00;
    }
    

在HTML中： 在您希望用户添加信息的地方粘贴{{{somenamehere}}}，然后创建一个模板，您将需要将其放置在其他页面上以调用您的Examplenamehere模板：

 {|Examplenamehere
 |{{{somenamehere1}}}
 |{{{somenamehere2}}}
 |etc. etc.
 |}

在表格顶部放置一个带有页面名称的标题：使用以下代码：{{{nazwa|{{PAGENAME}}}}}，而不是表格顶部的标题。

如果您想检查或复制我的模板，请访问此处：http://wiki.mrowki.ovh/index.php?title=Szablon:Opis 并检查该页面。

- Magorzata Mrwka Zielona Mrwka

---

我只看到了“已于1月5日23:26回答”。我猜这取决于浏览器的样式。 - Magorzata Mrwka Zielona Mrwka