Разметка инфобоксов состоит из тегов. Используя и комбинируя их, можно создать такой инфобокс, который нужен именно вашей вики. О том, как задать инфобоксам индивидуальный стиль, смотрите статью Справка:Инфобоксы/CSS.
<infobox>
Тег <infobox>
является основным тегом, который определяет границы кода инфобокса и может задавать стиль всего инфобокса.
Допустимые теги
Внешние теги | Дочерние теги |
---|---|
Не существуют |
|
Параметры
-
theme
- Применяет к инфобоксу стиль, прописанный в CSS как theme. В CSS прописывается стиль в формате
.pi-theme-$1
. Данный параметр не перекрывает параметрыtheme-source
илиtype
. -
theme-source
- Позволяет задавать инфобоксу стиль, в зависимости от содержимого какой-либо строки внутри инфобокса. В CCS прописывается как
.pi-theme-$1
. Данный параметр не перекрывает значения параметровtheme
илиtype
. -
type
- Позволяет задать инфобоксу некий логический стиль. В CSS прописывается как
.type-$1
. Данный параметр не перекрывает параметрыtheme
илиtheme-source
. -
accent-color-source
- Используется для акцентного цвета инфобокса (перекрывающего другие стили).
-
accent-color-default
- Акцентный цвет инфобокса по умолчанию. Можно прописать цвет в стандартном коде
#f00
или#ff0000
. -
accent-color-text-source
- Используется для акцентного цвета текста.
-
accent-color-text-default
- Используется для акцентного цвета текста по умолчанию. Можно прописать цвет в стандартном коде
#f00
или#ff0000
. -
layout
- Может быть двух вариантов:
default
илиstacked
. Используется для форматирования текста внутри инфобокса. -
name
- Внутреннее название для элементов инфобокса. Связано с кодом
data-item-name
в HTML.
Пример
<infobox> <title source="title_source" /> </infobox>
<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default"> <h2 class="pi-item pi-item-spacing pi-title">Title</h2> </aside>
<infobox layout="stacked" theme="MyInfobox"> <title source="title_source" /> </infobox>
<title>
Тег <title>
используется один раз в коде инфобокса для заголовка инфобокса в целом. Если внутри тега разместить изображение, то оно не появится в мобильном скине.
Допустимые теги
Внешние теги | Дочерние теги |
---|---|
|
|
Параметры
-
source
- Название строки внутри инфобокса.
-
name
- Внутреннее название элемента и его дочерних тегов. Может использоваться как
data-item-name
в HTML.
Пример
<title source="имя персонажа"><default>{{PAGENAME}}</default></title>
<h2 class="pi-item pi-item-spacing pi-title">Имя</h2>
<data>
<data>
— тег, который используется для задания переменных внутри инфобокса.
Допустимые теги
Внешние теги | Дочерние теги |
---|---|
|
|
Параметры
-
source
- Название строки внутри инфобокса.
-
span
- Количество колонок. Может использоваться в «умном» макете.
-
layout
- Возможное значение:
default
. Может использоваться в «умном» макете. -
name
- Внутреннее название элемента и его дочерних тегов. Может использоваться как
data-item-name
в HTML.
Пример
<data source="Титул"> <label>Титул персонажа</label> <default>нет титула</default> </data>
<div class="pi-item pi-item-spacing pi-data pi-border-color"> <h3 class="pi-secondary-font pi-data-label">Титул персонажа</h3> <div class="pi-font pi-data-value">нет титула</div> </div>
<data source="конфликт"><label>Конфликт</label></data> <data source="дата"><label>Дата</label></data> <data source="место"><label>Место</label></data>
<label>
<label>
используется внутри тега data. Задаёт заголовок для переменной, если это необходимо. Для заголовков можно использовать викитекст.
Допустимые теги
Внешние теги | Дочерние теги |
---|---|
| Не существуют |
Параметры
Не существуют.
Пример
<label>Титул</label>
<h3 class="pi-secondary-font pi-data-label">Титул</h3>
<label>[[Сезоны сериала|Сезон]]</label>
<default>
<default>
может использоваться внутри других тегов, показывая значение переменной по умолчанию. Воспринимает викитекст.
Допустимые теги
Внешние теги | Дочерние теги |
---|---|
| Не существуют |
Параметры
Не существуют.
Пример
<default>[[:Категория:Простолюдины|нет титула]]</default>
<div class="pi-font pi-data-value">нет титула</div>
<format>
<format>
— можно использовать, если к переменной нужно добавить стандартную информацию (описание, иконку, категорию и пр.) Воспринимает викитекст.
Допустимые теги
Внешние теги | Дочерние теги |
---|---|
| Не существуют |
Параметры
Не существуют.
Пример
<data source="цена"> <label>Цена предмета</label> <format>{{{цена}}} монет</format> </data>
<div class="pi-item pi-item-spacing pi-data pi-border-color"> <h3 class="pi-secondary-font pi-data-label">Цена предмета</h3> <div class="pi-font pi-data-value">15 монет</div> </div>
<data source="цена"> <label>Цена предмета</label> <format>{{{цена}}} [[Файл:ЗолотаяМонета.jpg]]</format> </data>
<image>
<image>
— используется для вставки изображения в инфобокс. При этом значение переменной в Исходном коде должно указываться в формате ИмяФайла.jpg
или [[Файл:ИмяФайла.jpg]]
. Для нескольких изображений с вкладками используйте внутри тег <gallery>
.
При использовании <default>
можно задать инфобоксу изображение, которое будет добавляться в инфобокс, если пользователь не указал какое-либо изображение. Для этого используется код типа <default>ИмяФайла.jpg</default>
.
Допустимые теги
Внешние теги | Дочерние теги |
---|---|
|
|
Attributes
-
source
- Название строки инфобокса.
-
name
- Внутреннее название элемента и его дочерних тегов. Может использоваться как
data-item-name
в HTML.
Пример
<image source="изображение" />
<figure class="pi-item pi-image"> <a href=".../File:Image.jpg" class="image image-thumbnail" title=""> <img src="Image.jpg" class="pi-image-thumbnail" alt="" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg"> </a> </figure>
<alt>
<alt>
— используется только внутри тега image для текста, который всплывает при наведении курсора на изображение в инфобоксе.
Допустимые теги
Внешние теги | Дочерние теги |
---|---|
|
|
Параметры
-
source
- Название строки в инфобоксе.
Пример
<image source="изображение"> <alt source="описание изображения"> <default>Неизвестное изображение</default> </alt> </image>
<figure class="pi-item pi-image"> <a href=".../File:Image.jpg" class="image image-thumbnail" title="Default alt text"> <img src="Image.jpg" class="pi-image-thumbnail" alt="Default alt text" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg"> </a> </figure>
<caption>
<caption>
— используется только внутри тега image, если необходимо добавить подпись к изображению.
Допустимые теги
Внешние теги | Дочерние теги |
---|---|
|
|
Параметры
-
source
- Название строки в инфобоксе.
Пример
<image source="изображение"> <caption source="подпись"> <default>Неизвестное изображение</default> </caption> </image>
<figcaption class="pi-item-spacing pi-caption">My caption</figcaption>
<group>
<group>
— используется для группировки строк инфобокса, в том числе и под одним заголовком. Если строки с переменными внутри группы будут пустыми, то вся группа, включая заголовок, показана не будет. Однако можно использовать параметр show
как incomplete
. Тогда все строки инфобокса будут показаны, если хотя бы одна строка внутри группы будет заполнена.
Допустимые теги
Внешние теги | Дочерние теги |
---|---|
|
|
Параметры
-
layout
- Допустимые значения:
default
,horizontal
. -
show
- Допустимые значения:
default
,incomplete
. -
collapse
- Допустимые значения:
open
,closed
. Работает только в том случае, если первым дочерним тегом в группе является тег<header>
. -
row-items
- Добавляет столбцы в группу, превращая её в «умный» макет. Этот макет имеет свои ячейки с тегами
<data>
, расположенными горизонтально. -
name
- Внутреннее название элемента и его дочерних тегов. Может использоваться как
data-item-name
в HTML.
Пример
<group> <header>Информация</header> <data source="конфликт"><label>Конфликт</label></data> <data source="дата"><label>Дата</label></data> </group>
<group layout="horizontal" show="incomplete"> <header>Стороны конфликта</header> <data source="Сторона1" /> <data source="Сторона2" /> </group>
<section class="pi-item pi-group pi-border-color"> <h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Group name</h2> <div class="pi-item pi-item-spacing pi-data pi-border-color"> <div class="pi-font pi-data-value">Data value</div> </div> </section>
<section class="pi-item pi-group pi-border-color"> <table class="pi-horizontal-group"> <caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Group name</caption> <thead> <tr> <th class="pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing">Data label</th> </tr> </thead> <tbody> <tr> <td class="pi-font pi-horizontal-group-item pi-data-value pi-border-color pi-item-spacing">Data value</td> </tr> </tbody> </table> </section>
<header>
<header>
— используется, чтобы задать заголовок секции внутри инфобокса, в том числе и внутри тега.
Допустимые теги
Внешние теги | Дочерние теги |
---|---|
| Не существуют |
Параметры
-
name
- Внутреннее название элемента и его дочерних тегов. Может использоваться как
data-item-name
в HTML.
Пример
<header>Дополнительная информация</header>
<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Header Text</h2>
<navigation>
— используется для добавления внутри инфобокса любого викитекста.
Допустимые теги
Внешние теги | Дочерние теги |
---|---|
| Не существуют |
Параметры
-
name
- Внутреннее название элемента и его дочерних тегов. Может использоваться как
data-item-name
в HTML.
Пример
<navigation>[[Ссылка]]</navigation>
<nav class="pi-item-spacing pi-secondary-background pi-secondary-font pi-navigation"> <a href="/wiki/Link" title="Link">Link</a> </nav>
<panel>
<panel>
— используется, чтобы создать вкладки внутри инфобокса. Контент для каждой вкладки размещается внутри тега <section>
.
Допустимые теги
Внешние теги | Дочерние теги |
---|---|
|
|
Параметры
-
name
- Внутреннее название элемента и его дочерних тегов. Может использоваться как
data-item-name
в HTML.
Пример
<panel> <section> <label>A</label> <data source="one" /> <data source="two" /> </section> <section> <label>B</label> <data source="three" /> <data source="four" /> </section> </panel>
<section class="pi-item pi-panel pi-border-color"> <div class="pi-panel-scroll-wrapper"> <ul class="pi-section-navigation"> <li class="pi-section-tab pi-section-active" data-ref="0"> <div class="pi-section-label">A</div> </li> <li class="pi-section-tab" data-ref="1"> <div class="pi-section-label">B</div> </li> </ul> </div> <div class="pi-section-contents"> <div class="pi-section-content pi-section-active" data-ref="0"> <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="one"> <div class="pi-data-value pi-font">1st</div> </div> <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="two"> <div class="pi-data-value pi-font">2nd</div> </div> </div> <div class="pi-section-content" data-ref="1"> <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="three"> <div class="pi-data-value pi-font">3rd</div> </div> <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="four"> <div class="pi-data-value pi-font">4th</div> </div> </div> </div> </section>
<section>
<section>
— используется внутри тега <panel>
, для контента вкладок. Название каждой вкладки задаётся с помощью тега <label>
.
Допустимые теги
Внешние теги | Дочерние теги |
---|---|
|
|
Параметры
-
name
- Внутреннее название элемента и его дочерних тегов. Может использоваться как
data-item-name
в HTML.
Пример
<section> <label>A</label> <data source="one" /> <data source="two" /> </section>
<div class="pi-section-content" data-ref="0"> <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="one"> <div class="pi-data-value pi-font">1st</div> </div> <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="two"> <div class="pi-data-value pi-font">2nd</div> </div> </div>