На этой странице собраны полезные советы, код и рекомендации для работы с модульными инфобоксами. Также не забудьте проверить страницы Справка:Инфобоксы/CSS и Справка:Инфобоксы/Теги, чтобы получить полное представление о том, как использовать, настраивать и оформлять каждый элемент инфобокса.
Конвертация инфобоксов[]
Главная статья: Конвертация инфобоксов
Функции парсера[]
Функции парсера, как и Lua, могут быть использованы внутри тегов <format> и <default>, а также внутри тех тегов, которые принимают викитекст. Если их использовать за пределами перечисленных тегов, то инфобокс просто не будет отображаться на странице.
Необязательная навигация[]
Несмотря на то, что тег <navigation> не имеет внутренних тегов <format> и <default>, вы можете использовать переменные параметры для показа содержимого, если параметр указан или если ему присвоено значение. Первый пример ниже использует функцию парсера #ifeq, чтобы проверить, был ли параметр "showgallery" установлен к значению "yes". Если да, то будет показана ссылка; если нет, то вы не увидите ничего, а строка навигации создана не будет. Второй пример всего лишь проверяет, чтобы параметр "showgallery" не был пустым.
<navigation>
{{#ifeq: {{{showgallery}}} | yes | [[Main Page|Галерея]] |}}
</navigation>
<navigation>
{{#if: {{{showgallery|}}} | [[Main Page|Галерея]] |}}
</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 (подробнее здесь, на английском). Форматирование самих элементов инфобокса может быть сделано с помощью следующего кода[1]:
.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)), каждый первый элемент и др. в одном разделе объявлений.
Как работать с необязательными полями[]
Если ваш инфобокс содержит необязательные поля, не имеющие значения по умолчанию, установление точной позиции определённой строки может оказаться невозможным, и данное решение настроит не те строки. В зависимости от расположения вашего кода, вы сможете обойти эту проблему следующими способами:
- Расположите нужную вам строку ближе к концу или даже в самом конце вашего инфобокса. Если вы не знаете количество предшествующих строк, но знаете, сколько строк будет после, вы можете посчитать снизу вверх. Для этого используйте
div:nth-last-of-type(1)вместоdiv:nth-of-type(1). В нашем примере, эта функция выберет самым первым выберет строку Город. - В зависимости от вашего кода, вы можете попробовать использовать тег
<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 /* используется почти везде */ { }