ФЭНДОМ


Разметка инфобоксов состоит из тегов. Используя и комбинируя их, можно создать такой инфобокс, который нужен именно вашей вики. О том, как задать инфобоксам индивидуальный стиль, смотрите статью Справка:Инфобоксы/CSS.

<infobox>

Тег <infobox> является основным тегом, который определяет границы кода инфобокса и может задавать стиль всего инфобокса.

Допустимые теги

Внешние теги Дочерние теги
Не существуют
  • <title>
  • <image>
  • <header>
  • <navigation>
  • <data>
  • <group>
  • <panel>

Параметры

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> используется один раз в коде инфобокса для заголовка инфобокса в целом. Если внутри тега разместить изображение, то оно не появится в мобильном скине.

Допустимые теги

Внешние теги Дочерние теги
  • <infobox>
  • <group>
  • <default>
  • <format>

Параметры

source
Название строки внутри инфобокса.
name
Внутреннее название элемента и его дочерних тегов. Может использоваться как data-item-name в HTML.

Пример

<title source="имя персонажа"><default>{{PAGENAME}}</default></title>

<h2 class="pi-item pi-item-spacing pi-title">Имя</h2>

<data>

<data> - тег, который используется для задания переменных внутри инфобокса.

Допустимые теги

Внешние теги Дочерние теги
  • <infobox>
  • <group>
  • <default>
  • <label>
  • <format>

Параметры

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. Задаёт заголовок для переменной, если это необходимо. Для заголовков можно использовать викитекст.

Допустимые теги

Внешние теги Дочерние теги
  • <data>
  • <section>
Не существуют

Параметры

Не существуют.

Пример

<label>Титул</label>

<h3 class="pi-secondary-font pi-data-label">Титул</h3>

<label>[[Сезоны сериала|Сезон]]</label>

<default>

<default> может использоваться внутри других тегов, показывая значение переменной по умолчанию. Воспринимает викитекст.

Допустимые теги

Внешние теги Дочерние теги
  • <title>
  • <data>
  • <image>
  • <alt>
  • <caption>
Не существуют

Параметры

Не существуют.

Пример

<default>[[:Категория:Простолюдины|нет титула]]</default>

<div class="pi-font pi-data-value">нет титула</div>

<format>

<format> - можно использовать, если к переменной нужно добавить стандартную информацию (описание, иконку, категорию и пр.) Воспринимает викитекст.

Допустимые теги

Внешние теги Дочерние теги
  • <title>
  • <data>
  • <caption>
Не существуют

Параметры

Не существуют.

Пример

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

Допустимые теги

Внешние теги Дочерние теги
  • <infobox>
  • <group>
  • <alt>
  • <caption>
  • <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 для текста, который всплывает при наведении курсора на изображение в инфобоксе.

Допустимые теги

Внешние теги Дочерние теги
  • <image>
  • <default>

Параметры

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, если необходимо добавить подпись к изображению.

Допустимые теги

Внешние теги Дочерние теги
  • <image>
  • <default>
  • <format>

Параметры

source
Название строки в инфобоксе.

Пример

<image source="изображение">
 <caption source="подпись">
  <default>Неизвестное изображение</default>
 </caption>
</image>

<figcaption class="pi-item-spacing pi-caption">My caption</figcaption>

<group>

<group> - используется для группировки строк инфобокса, в том числе и под одним заголовком. Если строки с переменными внутри группы будут пустыми, то вся группа, включая заголовок, показана не будет. Однако можно использовать параметр show как incomplete. Тогда все строки инфобокса будут показаны, если хотя бы одна строка внутри группы будет заполнена.

Допустимые теги

Внешние теги Дочерние теги
  • <infobox>
  • <group>
  • <data>
  • <header>
  • <image>
  • <title>
  • <group>
  • <navigation>
  • <panel>

Параметры

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> - используется, чтобы задать заголовок секции внутри инфобокса, в том числе и внутри тега.

Допустимые теги

Внешние теги Дочерние теги
  • <infobox>
  • <group>
  • <panel>
Не существуют

Параметры

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>

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

Допустимые теги

Внешние теги Дочерние теги
  • <infobox>
  • <group>
  • <header>
  • <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>.

Допустимые теги

Внешние теги Дочерние теги
  • <panel>
  • <title>
  • <data>
  • <label>
  • <image>
  • <group>
  • <header>
  • <navigation>

Параметры

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>

Материалы сообщества доступны в соответствии с условиями лицензии CC-BY-SA , если не указано иное.