Модульные инфобоксы/Полезные советы

На этой странице собраны полезные советы, код и рекомендации для работы с модульными инфобоксами. Также не забудьте проверить страницы Справка:Инфобоксы/CSS и Справка:Инфобоксы/Теги, чтобы получить полное представление о том, как использовать, настраивать и оформлять каждый элемент инфобокса.

## Функции парсера

Функции парсера, как и Lua, могут быть использованы внутри тегов `<format>` и `<default>`, а также внутри тех тегов, которые принимают викитекст. Если их использовать за пределами перечисленных тегов, то инфобокс просто не будет отображаться на странице.

## Необязательная навигация

Несмотря на то, что тег `<navigation>` не имеет внутренних тегов `<format>` и `<default>`, вы можете использовать переменные параметры для показа содержимого, если параметр указан или если ему присвоено значение. Первый пример ниже использует функцию парсера #ifeq, чтобы проверить, был ли параметр "showgallery" установлен к значению "yes". Если да, то будет показана ссылка; если нет, то вы не увидите ничего, а строка навигации создана не будет. Второй пример всего лишь проверяет, чтобы параметр "showgallery" не был пустым.

```
<navigation>
</navigation>

<navigation>
</navigation>

```

## Сворачивать легко!

Тут что-то свернули

```
<infobox>
<group collapse="closed"> <header>Сворачивать легко!</header>
<data> <default> Collapsed stuff</default></data>
</group>
</infobox>

```

## Комментирование

Модульные инфобоксы используют XML, поэтому обычные правила комментирования к ним не применимы. Чтобы добавить комментарии или скрыть часть кода, воспользуйтесь следующим решением:

```
<infobox>
<group >
<header>Тони Старк</header>
<data><default>Эра Альтрона</default></data>
<data><default>Железный человек</default></data>
 <!--comment>
Эта часть будет скрыта
<header>Надежда</header>
<data><default>Вера</default></data>
<data><default>Любовь</default></data>
</comment-->
</group>
</infobox>

```

## Оформление

Воспользуйтесь этим кодом для настройки инфобоксов в CSS: Справка:Инфобоксы/CSS.

### Форматирование текста

Очень часто участники хотят расположить текст посередине горизонтально или вертикально. Это можно сделать с помощью CSS (подробнее здесь, на английском). Форматирование самих элементов инфобокса может быть сделано с помощью следующего кода:

```
.portable-infobox .pi-data {
 height: 10em; /\*проставляем высоту элемента\*/
 display: flex;
 align-items: center; /\*выравниваем элемент или текст вертикально\*/
 justify-content: center ; /\*выравниваем элемент или текст горизонтально\*/
}

```

### Предотвращение автоматического перехода на новую строку

Иногда перенос текста на новую строку нежелателен. Предотвратить автоматический перенос поможет такой код в CSS:

```
.portable-infobox .pi-data-label {
 flex-basis: 120px;
}

```

Этот код устанавливает минимальную ширину для названия строки, чтобы текст не переносился до тех пор, пока в этом не возникает необходимости.

### Форматирование изображений

#### Автоматические изменение размера

Использование следующего кода подходит для работы с изображениями любых размеров:

```
.pi-theme-name .pi-image-thumbnail {
    width: 100%;
    height:auto;
}

```

#### В инфобоксах с изменённым размером

Если вы используете нестандартные размеры для ваших инфобоксов (например, с помощью кода `.pi-theme-name { width: 123px; }`), то вам также понадобится изменить размер изображений в CSS. Сделать это можно с помощью класса `.pi-image-thumbnail`:

```
.pi-theme-name .pi-image-thumbnail {
    max-width: 123px; // Используйте такую же ширину, какую имеет инфобокс, минус ширина рамки
    height: auto; // Сохраняет пропорции изображения
}
```

Однако, этот код может сделать изображения слишком длинными. Если вы не хотите, чтобы изображение заполняло инфобокс по ширине, вы можете сократить его размер для сохранения соотношения с инфобоксом, вот так:

```
.pi-theme-name .pi-image-thumbnail {
    max-width: 123px;
    max-height: 123px;
    width: auto;
    height: auto;
}
```

### Настройка заголовков

Настройка текста заголовков ничем не отличается от оформления любого другого текста. Для этого вам потребуется лишь использование подходящего класса. Например код,

```
.pi-theme-name .pi-title {
 font-family:formalscrp421 bt;
 font-weight:bold;
 color:blue;
}

```

сделает все заголовки инфобоксов на вики такими.

## Группы

Существует множество способов настроить группы в модульных инфобоксах. Группы можно сделать сворачиваемыми или поменять их макет. Если в инфобоксе содержится большое количество информации, то лучше всего организовать информацию по группам и сделать их сворачиваемыми:

```
<infobox>
<group layout="horizontal">
<data source="яблоки"/>
<data source="груши"/>
<data source="апельсины"/>
</group>
<group layout="horizontal">
<data source="огурцы"/>
<data source="помидоры"/>
<data source="редиска"/>
</group>
<group collapse="closed">
<header>Good food</header>
<data source="картофель"/>
<data source="морковь"/>
<data source="лук"/>
</group>

```

## Многозначные параметры

### Для одного и того же поля

Макбет

```
<infobox>
<data source="женщины">
    <default>{{{леди|Макбет}}}</default>
</data>
</infobox>

```

## CSS

### Оформление целой строки

Тогда как вы можете применить инлайновые стили к некоторым элементам инфобокса, этого будет недостаточно для того, чтобы поменять настройки целой строки и её заголовка одновременно — например, изменить цвет фона всей строки. Каждая строка с тегом `<data>` состоит из его значений (и его `<format>`, если есть) внутри тегов `<div>`, находящихся внутри других тегов `<div>`. Чтобы заполнить каждую строку желаемым цветом, вам нужно сосредоточиться на самом внешнем теге `<div>`. Для этого вам потребуется найти нужный `<div>`.

Читайте код вашего инфобокса сверху вниз и считайте каждый тег `<data>`, пока не дойдёте до того, чью строку вы хотите настроить. **Не засчитывайте** теги `<title>`, `<image>` или `<navigation>`, так как они не содержатся в элементах `<div>`. Для примера возьмём инфобокс с тегами `<title>`, `<image>` и тремя тегами `<data>`: Возраст, Пол и Город.

* **Важно:** Если ваш инфобокс имеет теги `<data>`, в которых значение не прописано по умолчанию, то они не будут отображаться, если их не заполнить, что может сбить ваш счёт. Ниже приведены некоторые решения для борьбы с этой проблемой.

Если вы уже знаете номер нужного `<div>` при счёте сверху, вы можете использовать следующий код, заменив **1** в `div:nth-of-type(1)` вашим номером (в нашем примере это 1 для Возраста, 2 для Пола, 3 для Города).

```
.pi-theme-name div:nth-of-type(1) {
    background-color: #000000;
}
```

Код вверху выберет целую первую строку (Возраст) вместе с заголовком. Чтобы затронуть только `<div>`, содержащий нужное значение, используйте:

```
.pi-theme-name div:nth-of-type(1) div:first-of-type {
    background-color: #000000;
}
```

Дополнительный `div:first-of-type`  в конце выбирает объект между полной строкой и содержимым, поэтому заголовок затронут не будет. Отметим, что `first-of-type (or nth-of-type(1))` используется всегда для этого выбора, вне зависимости от того, с какой строкой вы работаете.

Подобное решение может использовано для добавления и других характеристик элементов, которые трудно настроить с помощью инлайновых стилей, таких как списки. Вы можете пойти даже дальше в использовании операторов ветвления CSS, которые позволят вам затронуть отдельные элементы списков, например, каждый второй элемент `(li:nth-child(2n+2))`, каждый первый элемент и др. в одном разделе объявлений.

### Как работать с необязательными полями

Если ваш инфобокс содержит необязательные поля, не имеющие значения по умолчанию, установление точной позиции определённой строки может оказаться невозможным, и данное решение настроит не те строки. В зависимости от расположения вашего кода, вы сможете обойти эту проблему следующими способами:

1. Расположите нужную вам строку ближе к концу или даже в самом конце вашего инфобокса. Если вы не знаете количество предшествующих строк, но знаете, сколько строк будет после, вы можете посчитать снизу вверх. Для этого используйте `div:nth-last-of-type(1)` вместо `div:nth-of-type(1)`. В нашем примере, эта функция выберет самым первым выберет строку Город.
2. В зависимости от вашего кода, вы можете попробовать использовать тег `<navigation>` для тех записей, которые сложно указать точно. Поскольку этот тег использует HTML-элементы `<nav>` вместо элементов `<div>`, вы можете считать их отдельно и, возможно, определить их позиции вне зависимости от необязательного контента, если только вы не используете сразу несколько `<nav>`, которые могут не отображаться. Просто выберите их с помощью `nav:nth-of-type(1)` или `nav:nth-last-of-type(1)` по ситуации.

## Список операторов для настройки модульных инфобоксов

Ниже приведён краткий список операторов ветвления CSS, которые вы можете использовать для настройки инфобоксов.

Запишите эти операторы на странице `MediaWiki:Wikia.css` на вашей вики и добавьте те стили и темы, какие вам интересны:

```
/\* Активация новой темы происходит путём добавления theme="yourtheme" в тег <infobox> \*/

.pi-theme-yourtheme.pi-background { } /\* общий фон \*/

.pi-theme-yourtheme .pi-image { } /\* выравнивание поля для изображения \*/

.pi-theme-yourtheme .pi-image-thumbnail { /\* для подгонки изображения \*/
/\* max-width: 123px; Размер изображения; используйте такую же ширину, какую имеет инфобокс, минус рамка \*/
/\* max-height: 123px; (если требуется) \*/
/\* width: auto; (если требуется) \*/
/\* height: auto; Сохраняет пропорции изображения \*/
}

.pi-theme-yourtheme { } /\* общая рамка, цвет, шрифт, др. \*/

.pi-theme-yourtheme .pi-item-spacing { } /\* отступы между элементами \*/

.pi-theme-yourtheme .pi-title { } /\* отступы для заголовка, границы, шрифт... \*/

.pi-theme-yourtheme .pi-caption { } /\* шрифт, цвет и другие характеристики подписи \*/

.pi-theme-yourtheme .pi-group { } /\* рамка и другие характеристики группы \*/

.pi-theme-yourtheme .pi-border-color { } /\* цвет рамки для групп и строк \*/

.pi-theme-yourtheme .pi-header { } /\* выравнивание, рамка и другие характеристики заголовков \*/

.pi-theme-yourtheme .pi-secondary-font { } /\* заголовок, шрифт названия строки \*/

.pi-theme-yourtheme .pi-secondary-background { } /\* фон заголовков \*/

.pi-theme-yourtheme .pi-data { } /\* div названия строки и значения \*/

.pi-theme-yourtheme .pi-data-label { } /\* выравнивание названия строки, перенос на новую строку, скользящая точка ширины колонок \*/
{
/\* flex-basis: 50%; \*/ /\* Меняет пропорции между шириной левой и правой колонки \*/
}

.pi-theme-yourtheme .pi-data .pi-secondary-font { } /\* делает шрифт значений строк отличным от шрифта заголовков \*/

.pi-theme-yourtheme .pi-data-value { } /\* поле для значений (правая колонка) \*/

.pi-theme-yourtheme .pi-data-value:not(:first-child) { } /\* отступы и рамки для колонок со значениями \*/
{
/\* padding-left: 0; \*/ /\* По вашему выбору \*/
/\* margin-left: 4px; \*/
}
.pi-theme-yourtheme .pi-font { } /\* шрифт значений строк \*/

.pi-theme-yourtheme .pi-horizontal-group { } /\* стили таблицы для горизонтальных групп \*/

.pi-theme-yourtheme .pi-horizontal-group-item { } /\* отступы и рамки для ячеек \*/

.pi-theme-yourtheme .pi-horizontal-group .pi-data-label { } /\* названия строк в горизонтальных группах \*/

.pi-theme-yourtheme .pi-horizontal-group-item { } /\* ячейки таблицы в горизонтальных группах \*/

.pi-theme-yourtheme .pi-navigation { } /\* тег nav \*/

.pi-theme-yourtheme .pi-item /\* используется почти везде \*/ { }

```

## Смотрите также

* Модульные инфобоксы/Практические рекомендации
* Помощь в создании/редактировании модульных инфобоксов

## Примечания

1. ↑ http://www.w3.org/Style/Examples/007/center.en.html