ФЭНДОМ


МодИнфобоксПример1

Пример инфобокса

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

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

Создание инфобокса Править

Конструктор инфобоксовПравить

Если при создании страницы шаблона вы выбрали тип «Инфобокс», то вы будете автоматически перемещены на страницу конструктора инфобоксов Служебная:InfoboxBuilder/НазваниеШаблона. Этот интерактивный инструмент позволит вам собрать инфобокс из наиболее распространённых элементов — таких как изображения, разделы, строки. Просто добавляйте и перетаскивайте элементы в том порядке, который нравится вам. Кликнув на каждый элемент, вы увидите подробную информацию о нём и те параметры, которые можете настроить вы.

Чтобы перейти в редактор исходного кода, кликните на [ ] в правом нижнем углу.

Редактирование кодаПравить

Инфобокс представляет собой набор простых тегов внутри общего тега <infobox></infobox>. Например, любая строка внутри инфобокса задаётся следующим образом:

<data source="Значение строки"><label>Название строки</label></data>

Для создания заголовка используется тег:

<title source="название" />

Для создания изображения используется тег:

<image source="изображение" />

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

МодИнфобоксПример2
<infobox>
 <title source="имя"><default>{{PAGENAME}}</default></title>
 <image source="изображение" />
 <data source="сезон"><label>Сезон(ы)</label></data>
 <data source="первое появление"><label>Первое появление</label></data>
</infobox>

Разместите этот код на странице Шаблон:Персонаж, и инфобокс готов! Чтобы использовать его, вызовите соответствующее диалоговое окно в Визуальном редакторе, а в режиме Исходного кода шаблон будет выглядеть также, как при использовании классического инфобокса:

{{Персонаж
 |имя   = Эддард Старк
 |изображение  = eddard.jpg
 |сезон = [[Сезон 1]]
 |первое появление  = "[[Зима близко]]"
}}

Вид шаблонов Править

Стили Править

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

  • По умолчанию данные в строках располагаются в двух колонках: заголовок слева, значение справа.
  • Если в код инфобокса добавить <infobox layout="stacked">, то значения будут отображаться в следующей строке после заголовка и с небольшим отступом. Этот стиль подходит, если у вас длинный текст в строке.
МодИнфобоксПример2

Инфобокс по умолчанию

МодИнфобоксПример3

Инфобокс со стилем "stacked"

Пользовательские стили Править

Обычные стили инфобоксов можно заменить двумя способами.

Во-первых, вы можете подключить тему для инфобоксов «Europa» в WikiFeatures. Это расширение автоматически применит цветовую гамму, настроенную через Конструктор тем.

Во-вторых, создать индивидуальные стили инфобокса можно через CSS. Используйте атрибуты theme или theme-source в теге infobox, чтобы настроить инфобоксы с помощью классов CSS.

  • Атрибут theme используется, чтобы указать на пользовательский класс CSS для шаблона инфобокса.
  • Атрибут theme-source позволяет вам задать стиль шаблона в зависимости от переменной конкретной строки самой карточки.

Подробнее об этом читайте в статье Справка:Инфобоксы/CSS.

Акцентные цвета Править

Цвета названий и фона заголовков могут быть изменены с помощью функции акцентирования цветов. Как и в случае theme-source, цвет — это значение параметра шаблона, которое указывается через accent-color-source для фона и accent-color-text-source для текста.

Например, если в шаблоне инфобокса указано accent-color-source="bkg" и в инфобоксе статьи прописано bkg = #FFF, то цвет фона заголовков и названий будет #FFF (HEX-код для белого цвета). Все цвета должны быть указаны в формате HEX (то есть как #FFF или #FFFFFF), или они просто не будут работать.

Акцентные цвета заменят собой все другие цвета: цвета по умолчанию и даже цвета, указанные через атрибут theme.

Сюда также включён параметр для цвета по умолчанию, и поэтому использование accent-color-default="#FFF" проставит цвет для всех названий и фона заголовков, а accent-color-text-default="#000000" установит цвет по умолчанию, используя формат HEX.

Добавление видео Править

В инфобокс можно добавить видеоролик. Для этого используйте тот же тег, что и для вставки изображения. Видео в инфобоксе будет представлено как картинка со значком воспроизведения.

Дополнительные теги Править

Группировка Править

МодИнфобоксПример4

Инфобоксы могут выглядеть по-разному и не всегда можно обойтись простым набором строк. Если вы хотите сгруппировать несколько строк под общим заголовком, используйте тег "group". Пример такого инфобокса и кода можно увидеть ниже:

<infobox layout="stacked">
 <title source="название" />
 <image source="изображение" />
 <group>
  <header>Информация</header>
  <data source="конфликт"><label>Конфликт</label></data>
  <data source="дата"><label>Дата</label></data>
  <data source="место"><label>Место</label></data>
 </group>
</infobox>

Использование стиля show="incomplete" позволяет отображать обе колонки, даже если вторая или первая колонка пустые. Однако если обе строки останутся незаполненными, то этот блок инфобокса не будет отображаться.

Дополнения к переменным Править

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

МодИнфобоксПример6

Пример:

<infobox layout="stacked">
 <title source="название" />
 <data source="цена">
 <label>Цена</label>
 <format>{{{цена}}} монет</format>
 </data>
 <data source="цена драг камни">
 <label>Цена в драгоц. камнях</label>
 <format>{{{цена драг камни}}} [[Файл:Драгкамень.png|20px]]</format>
 </data>
 <data source="здоровье">
 <label>Восст. здоровья</label>
 <format>{{{здоровье}}} {{Сердце}}</format>
 </data>
</infobox>

Горизонтальный макет для групп Править

МодИнфобоксПример5

Необязательно, чтобы группы отображались вертикально. Поля групп можно выставить по горизонтали, и названия с содержимым строк будут показываться в виде столбцов. Для этого просто нужно добавить атрибут layout="horizontal" внутри тега «group». Пример:

<group layout="horizontal" show="incomplete">
 <header>Стороны конфликта</header>
 <data source="Сторона1" />
 <data source="Сторона2" />
</group>

«Умный» макет для групп Править

Справка - инфобоксы - умные группы

При установке параметра row-items="2" инфобокс будет автоматически группировать указанные поля в пары.

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

Чтобы использовать умные группы, добавьте row-items="2" (или любую другую цифру, чтобы установить предел количества полей). Все поля в умных группах используют горизонтальный макет, поэтому указывать его необязательно. Тем не менее, вы можете смешивать горизонтальный и вертикальный макеты в умных группах (см. скриншот)): для этого вам нужно добавить атрибут layout="default" к каждому тегу <data>.

Чтобы каждое поле с данными занимало больше одной строки, используйте атрибут span="2" в теге <data>.

<infobox>
  <title source="название" />
  <image source="изображение" />
  <group row-items="3">
    <header>Детали</header>
    <data source="conflict"><label>Сражение</label></data>
    <data source="date"><label>Даты</label></data>
    <data source="place"><label>Место</label></data>
    <data source="result" layout="default"><label>Результат</label></data>
  </group>
</infobox>
 

Сворачиваемые группыПравить

PI-Collapse

Группы можно сделать сворачивающимися, если добавить или collapse="open", или collapse="closed" к тегу группы. На заголовок в этом случае можно будет кликнуть, чтобы развернуть или свернуть группу, а сама группа после загрузки страницы отобразится развернутой или свернутой соответственно.

<group collapse="closed">
  <header>Появления</header>
  <data source="films" />
  <data source="comics" />
</group>

Примечание: заголовок должен следовать сразу же после открывающего тега группы.

Все теги Править

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

Заполнение инфобоксов Править

Табберы и галереиПравить

Для справки - табберы на ПК

Под каждой закладкой находится одно изображение

Вы можете добавить сразу несколько изображений в инфобокс с помощью тегов <gallery> или <tabber> непосредственно на странице статьи.

{{Инфобокс 
|изображение=<gallery>
Изображение 1.jpg|Номер 1
Изображение 2.jpg|Номер 2
Изображение 3.jpg|Номер 3
</gallery>
}}
{{Инфобокс
|изображение=<tabber>
Номер 1 = [[Файл:Изображение 1.jpg]] |-|
Номер 2 = [[Файл:Изображение 2.jpg]] |-|
Номер 3 = [[Изображение 3.jpg]]
</tabber>
}}

Примечание: предпочтительнее использовать тег <gallery>, т.к. он более универсален.

Parser Functions Править

Расширение Parser Functions может быть использовано в любом инфобоксе. Однако результат будет скрыт, если переменная в data окажется пустой.

Код шаблона Результат
<data source="level">
  <label>Ранг</label>
  <format>Игрок {{#switch:{{{level}}}
         |1=профессионал
         |2=герой
         |новичок
  }}</format>
  <default>Игрок</default>
</data>

В данном случае переменная 'level' является пустой, однако эта информация не передаётся в switch и стандартное значение для него — 'новичок' — не проставляется, так как данную задачу выполняет тэг default.

Примеры инфобоксовПравить

Вот примеры рабочих и красиво оформленных инфобоксов:

См. также Править

Обнаружено использование расширения AdBlock.


Викия — это свободный ресурс, который существует и развивается за счёт рекламы. Для блокирующих рекламу пользователей мы предоставляем модифицированную версию сайта.

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