ФЭНДОМ


На этой странице собраны полезные советы, код и рекомендации для работы с модульными инфобоксами. Также не забудьте проверить страницы Справка:Инфобоксы/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)), каждый первый элемент и др. в одном разделе объявлений.

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

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

  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