Эскадра Фэндома
Нет учётной записи?
Регистрация
Advertisement
Регистрация
Эскадра Фэндома
Эскадра Фэндома
69
страниц
в: Мануалы

Инфобоксы

Sign in to edit

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

Инфобокс — это?..[]

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

Изначально они создавались вручную, с помощью табличной разметки или отдельных шаблонов. FANDOM с 2014 года использует собственную структуру инфобокса, построенную на XML-тегах, что позволяет им быть мультиплатформенными. Это подразумевает собою работу на абсолютно всех устройствах. Именно поэтому рекомендуется использовать модульные инфобоксы. Если на вики-проекте есть уже написанные табличные инфобоксы, то их следует конвертировать на новую разметку.

Создать инфобокс можно двумя способами: с помощью конструктора (InfoboxBuilder) или самостоятельно, с помощью тегов.

Конструктор инфобоксов[]

InfoboxBuilderManual

Интерфейс конструктора инфобоксов

Когда участник, создавая новый шаблон, указывает тип «Инфобокс», автоматически загружается страница с конструктором инфобоксов. Им можно воспользоваться в странице InfoboxBuilder. Рекомендуется для тех вкладчиков, которые незнакомы с XML-структурой и хотят видеть, как будет выглядеть инфобокс. Единственным недостатком является то, что в нём не работает CSS-код, написанный для элементов инфобокса. Этот конструктор инфобоксов сразу же создаёт «документацию» шаблона, которая содержит в себе все добавленные параметры.

Его можно использовать в случае, если строк планируется слишком много, а затем зайти в редактор исходного кода. Чтобы сделать это, нужно нажать на кнопку справа внизу. При наведении на неё появится надпись «Редактор исходного кода».

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

Если пользователь закончил создание инфобокса, ему нужно нажать на кнопку «Записать» справа вверху. Если ему нужно отменить создание шаблона, либо он выбрал не тот тип, то нужно нажать на стрелку слева вверху.

Работа с элементами[]

Изначально отображается инфобокс с названием «Название статьи», изображением и двумя одинаковыми строками. Пользователь может работать с четырьмя элементами инфобокса: названием, изображением, строками и заголовками. При нажатии на любой элемент инфобокса даются объяснения, что будет на месте этого элемента, и настройки. Элементы можно перетаскивать, что указывается при нажатии на них.

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

Название

Является самой первой кнопкой. В конструкторе можно настроить название инфобокса, чтобы по умолчанию вместо него стояло название статьи. Если галочка с этой настройки снята, то вместо названия в конструкторе отображается «Заголовок инфобокса». Эта функция рекомендуется к использованию, т.к. в случае, если пользователь не указал параметр title1, этот элемент не будет отображаться.

Элементы названия обозначаются по порядковому номеру: title1, title2, title3 и т.д.

Изображение

Кнопка расположена справа от названия. Изображение не имеет никаких настроек. По умолчанию содержит в себе описание изображения, за которое отвечает параметр caption1. Таким образом, стандартный элемент изображения имеет следующий код: <image source="image1"><caption source="caption1"/></image>.

Строка

Кнопка расположена под названием с правой стороны. Настроить можно только название строки, по умолчанию оно называется "Заголовок". Если название строки не меняется, то за него отвечают параметры row1, row2, row3 и т.д. Если название строки меняется, то за него отвечает одноименный параметр, записанный в нижнем регистре и с нижним подчёркиванием вместо пробела. К примеру, к строке, название которой — "Предыдущий эпизод", будет добавляться параметр предыдущий_эпизод.

Опять-таки, если вам нужно улучшить параметр или поменять содержимое строки, то нужно зайти в редактор исходного кода.

Заголовок
InfoboxBuilderCollapseClosed

Сворачиваемый заголовок в конструкторе

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

Заголовок не имеет параметров, так как не изменяется. Для дополнительных настроек группы следует зайти в редактор исходного кода. К этим настройкам относится внешний вид, количество строк и способ отображения данных.

Результат[]

Инфобокс, созданный конструктором, по умолчанию имеет следующий код: 

<infobox>
  <title source="title1">
    <default>{{PAGENAME}}</default>
  </title>
  <image source="image1">
    <caption source="caption1"/>
  </image>
  <data source="row1">
    <label>Заголовок</label>
  </data>
  <data source="row2">
    <label>Заголовок</label>
  </data>
</infobox>

А вот код инфобокса, состоящий из одной обычной и одной сворачиваемой группы: 

<infobox>
  <title source="title1">
    <default>{{PAGENAME}}</default>
  </title>
  <image source="image1">
    <caption source="caption1"/>
  </image>
  <group>
    <data source="row1">
      <label>Заголовок</label>
    </data>
    <data source="имя">
      <label>Имя</label>
    </data>
  </group>
  <group collapse="closed">
    <data source="row2">
      <label>Заголовок</label>
    </data>
    <data source="возраст">
      <label>Возраст</label>
    </data>
  </group>
</infobox>

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

Редактор исходного кода[]

InfoboxSourceCode

Работа в исходном коде инфобоксов

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

Примечание: не используйте таблицы в инфобоксах, даже построенные на HTML-тегах. Особенность модульных инфобоксов состоит в том, что их теги мультиплатформенны. Таблицы зачастую ломаются в мобильном скине Фэндома. Отличной альтернативой таблицам являются горизонтальные группы (подробнее в разделе «Группа») или манипуляции с тегами переменных.
Примечание: не используйте атрибуты style и class в тегах инфобоксов. Они в них не сработают. По этой причине оформление инфобокса меняется в CSS.

Теги[]

Основа

<infobox> — обязательный тег, с которого начинается инфобокс. В открывающем теге можно указать отдельные параметры оформления (подробнее в «Изменение темы оформления»), используя следующие атрибуты:

  • theme — тема инфобокса, название которой берётся из CSS вики;
  • theme-source — параметр, влияющий на отдельную тему оформления;
  • layout — параметр, влияющий на расположение значения строк. При stacked значения располагаются на следующей строчке;
  • accent-color-source — указывается параметр, от которого зависит цвет фона в заголовках инфобокса;
  • accent-color-text-source — указывается параметр, от которого зависит цвет текста в заголовках инфобокса;
  • accent-color-default — указывает стандартный цвет фона в заголовках инфобокса. Работает без accent-color-source;
  • accent-color-text-default — указывает стандартный цвет текста в заголовках инфобокса. Работает без accent-color-text-source.

Внутри <infobox> используются все остальные теги: <title>, <image>, <header>, <navigation>, <data>, <group>.

Название

<title> — тег, отвечающий за главный заголовок с названием. Имеет только атрибут source, который обязателен. Он указывает параметр, который влияет на название.

Примечание: даже если вы укажете этот параметр в тегах <default> или <format>, но не напишете атрибут source, название не будет отображаться. Поэтому так важно записать хоть какой-нибудь рабочий параметр.

Внутри названия можно использовать следующие теги:

  • <format> — влияет на содержимое главного заголовка;
  • <default> — в нём записывается содержимое, которое должно отобразиться в случае, если параметр, указанный в source, не имеет значения в статье. Зачастую в нём записывают {{PAGENAME}}, чтобы название не пропадало (к тому же, зачастую оно совпадает с названием статьи). Если имеется тег format, рекомендуется копировать его содержимое и вставлять между тегами default, чтобы форматирование названия не пропало.
Изображение

<image> — тег, отвечающий за изображение в инфобоксе. Так же, как и название, имеет атрибут source, работающий точно так же.

Примечание: в исходном коде статьи, вставляя изображение, достаточно лишь написать его название и формат — например, Example.png. Подобное использование даже желательно.
Примечание: если на месте изображения должна быть какая-то сложная конструкция, которую никак не может заменить галерея (например, особенный шаблон или карта), можно использовать нацигацию (подробнее в разделе «Навигация»).

Внутри тега изображения используются теги <caption>, <alt> и <default> — изображение, которое будет использоваться в случае, если в статье не указан параметр для изображения. Полезно в случае, если вам нужно, чтобы в случае отсутствия картинки было изображение с надписью "Изображение недоступно", или что-то в таком духе.

Описание

<caption> — тег подписи под картинкой. Имеет атрибут source, в который вписывается параметр, влияющий на описание. В свою очередь, в нём работают следующие теги:

  • <format> — влияет на содержимое описания и форматирование его текста;
  • <default> — используется, если нужно, чтобы описание всегда было, и если оно не указано отдельно в статье, то на его месте вставляется значение из этого тега.
Примечание: описание не будет работать внутри других тегов. Также оно не будет отображаться в случае, если в статье на месте изображения расположена галерея или таббер. Даже если параметр описания указан.
Всплывающий текст

<alt> — текст, всплывающий при наведении на изображение. Имеет атрибут source, а также тег <default>. Примечание: если на месте изображения расположена галерея, то заголовки изображений будут исполнять роль тега <alt>.

Группа

<group> — тег, добавляющий отдельную группу данных в инфобокс. Чтобы было видно отдельную группу, зачастую внутри неё используют тег <header>, не имеющий атрибутов и своих тегов, и внутри которого просто записывается заголовок группы. <group> имеет множество различных атрибутов, которые определяют вид оформления группы:

  • collapse — сворачивает или разворачивает группу. Имеет значения open и closed. При использовании этого атрибута заголовок группы приобретает стрелку, которая может сворачивать и разворачивать группу данных. При значении open группа открыта, но при нажатии на стрелочку сворачивается; при значении closed — закрыта и может открыться нажатием;
  • layout — определяет, как должны отображаться данные: в виде строчек или «квадратиков». Имеет два значения — default и horizontal. По умолчанию атрибут имеет первое значение. При добавлении второго значения подразумевается, что в каждой строчке данные будут отображаться в «квадратиках». Примечание: при горизонтальном значении этого атрибута вам достаточно лишь самозакрывающегося тега <data> (подробнее в «Данные»), без тегов внутри него;
  • row-items — атрибут, указывающий количество «квадратиков» в группе. В случае наличия горизонтального оформления, по умолчанию значение этого атрибута равно количеству тегов <data> в группе. Примечание: при наличии этого атрибута автоматически используются горизонтальные группы.

Внутри группы допустимо использование следующих тегов: <data>, <header>, <image>, <title>, <navigation>.

Данные

<data> — тег строчек с информацией в инфобоксе. Его можно использовать и внутри группы, и вне группы. Имеет следующие атрибуты:

  • source — обязательный атрибут, без которого тег не будет работать. Принцип его действия такой же, как и у других тегов — в нём записывается параметр строчки инфобокса. Примечание: если нужно вставить какую-то информацию, не прикрепляя к ней никакого параметра, используйте навигацию.
  • layout — атрибут, используемый в случае, если группа имеет горизонтальный вид, а отдельная строчка в ней должна быть обычного вида. Тогда мы в теге <data> этой строчки записываем: layout="default".
  • span — работает при наличии у группы атрибута layout="horizontal". К примеру, в одной строке имеется 3 «квадратика». Нужно, чтобы в отдельной строке их было 2, причём один должен быть больше, т.е. иметь в себе 2/3 строки. В этой строке записываем: span="2". Примечание: если «квадратиков» два, то при значении span="2" эта часть заполнит всю строчку. Очень часто для такого используют навигацию, но рекомендуется всего лишь «поиграть» с атрибутами тега данных.

Допустимо использовать следующие теги:

  • <label> — тег, в котором записывается название строчки. Он обязателен у обычных групп и у строчек с кодом layout="default".
  • <format> — влияет на формат содержимого в строчке. В нём можно записать функции парсера, стандарт отображения значения строчки и т.д.
  • <default> — в нём записывается содержимое, которое должно отобразиться в случае, если параметр, указанный в source, не имеет значения в статье.

Тег <navigation> описывают, как элемент, содержащий в себе вики-текст. Его можно использовать и внутри группы, и вне. В навигации можно вставить ссылку на код шаблона (как часто делают на англоязычных вики), карту, отдельный шаблон, сложную конструкцию и т.д. Словом, в неё можно поместить всё то, что нельзя вставить в другие теги.

Примечание: так как этот тег не имеет атрибутов и дочерних тегов — следовательно, сам по себе не имеет параметров — его содержимое по умолчанию отображается в любом случае.

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

Функции парсера[]

Эти функции помогают улучшать инфобокс в зависимости от указанных значений отдельно взятых параметров. Самыми распространёнными являются функции по наличию параметра (#if), по сравнению параметра с определённым значением (#ifeq) и по различным его значениям (#switch).

Наличие параметра[]

Синтаксис: {{#if:Влияющий текст | Код, работающий, если текст есть | Код, работающий, если текст пуст}}

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

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

Представьте ситуацию, что в навигации пользователь может вставить изображение — совершенно любое, какое только захочет, в параметре Навигация. Но он может и не вставлять изображение, если оно ему не нужно. Тяжёлая задача, правда? Здесь поможет следующий код: 

<navigation>
    {{#if:{{{Навигация|}}} | Наше изображение! :) <br/> [[File:{{{Навигация|}}}]]|}}
</navigation>

Расшифровка кода:

  • {{{Навигация|}}} — параметр, от которого зависит вставляемый код. После названия параметра, перед закрывающимися кривыми скобками, рекомендуется указывать прямую черту. Это действует во всех функциях парсера.
  • Далее идёт код, который сработает, если редактор указал влияющий параметр в статье. В данном случае он может указать лишь название файла, так как мы упростили использование кода, подстроив функцию под подразумевающееся собою использование файла.
  • После этого идёт пустой код — если редактор не указал параметр, то функция ничего не добавляет и оставляет всё, как обычно.

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

К сожалению, для осуществления этого мы не можем использовать тег <image> и не можем даже записать ссылку на категорию в дочернем теге <default>. Поэтому для этого переводим изображение в навигацию.

Было: 

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

Стало: 

<navigation>
  {{#if:{{{Изображение|}}} | {{{Изображение|}}} | [[:Категория:Без изображения]]}}
</navigation>

В данном случае мы указали, что при наличии изображения мы просто вставляем его, а при отсутствии — вставляем категорию.

Сравнение параметра[]

Синтаксис: {{#ifeq:Влияющий текст | Сравниваемый текст | Код, работающий, если тексты одинаковы | Код, работающий, если тексты различны}}

Название этой функции происходит от «if equal», т.е. здесь функция работает не по наличию параметра, а по его значению. В функции указывается параметр и определённое значение. Если в статье используется это значение, то работает первый код; в ином случае — второй.

Функция используется нечасто, но очень полезна в некоторых случаях (хоть и реже, чем функция #if). Например, в инфобоксе указан следующий код: 

<data source="Профессия">
    <label>Профессия</label>
    <format>{{{Профессия}}} [[Категория:Работающие]]</format>
</data>

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

{{#ifeq:{{{Профессия|}}} | Нет | | [[Категория:Работающие]]}}

Расшифровка кода:

  • {{{Профессия|}}} — главный параметр, который мы на данный момент сравниваем.
  • Нет — значение, которое параметр должен иметь, чтобы заработал пустой код, расположенный далее. Это значение может быть любым.
  • Последняя часть функции будет работать, если значение параметра {{{Профессия|}}} в статье не равно Нет. Поэтому так важно запомнить указанное вами значение, чтобы функция успешно исполнялась.

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

{{#ifeq:{{{Профессия|}}} | Да | [[Категория:Работающие]] | }}

«Переключатель»[]

Синтаксис: 

{{#switch: Влияющий текст
| Значение 1 = Код 1
| Значение 2 = Код 2
| Значение 3 | Значение 4 = Код 3
...
| #default = Код по умолчанию}}

По коду эта функция похожа на #ifeq, но, в отличии от него, в «Переключателе» учитываются коды и для других значений. Необязательно писать код для каждого значения отдельно — можно записать несколько значений в ряд и код для них, как показано в синтаксисе выше: для значений 3 и 4 используется код 3.

Если значений немного, то можно использовать #ifeq. «Переключатель» удобен в случае, если значений очень много. Например, если вы хотите использовать его в графе «Пол», то вам достаточно функции #ifeq: 

<data source="Пол">
    <label>Пол</label>
    <format>
        {{#ifeq:{{{Пол|}}} | Ж | [[File:Female.png]] | [[File:Male.png]]}}
    </format>
    <default>Неизвестен</default>
</data>

Этот код будет вставлять изображение со символом Венеры, если пол указан, как Ж (что очень упрощает значение параметра); в ином случае — символ Марса.

Однако случаи бывают разные. Например, вы улучшаете инфобокс на вики с 300~ статьями, где значения параметра являются самыми разными; или вам не хочется ограничивать параметры. Как было сказано ранее, в «Переключателе» можно вписывать один и тот же код для множества различных значений. Если вам хочется по этой причине использовать #switch, то код будет таким: 

<data source="Пол">
    <label>Пол</label>
    <format>{{#switch: {{{Пол|}}}
            | Ж | Женщина | Девушка | Женский = [[File:Female.png]]
            | М | Мужчина | Парень | Мужской = [[File:Male.png]]
            | #default = Неизвестен
    }}</format>
    <default>Неизвестен</default>
</data>

В данном случае, если участник написал любое из первых четырёх значений, будет вставлен символ Венеры; при вторых четырёх значениях — символ Марса; если значение другое — надпись «Неизвестен». Примечание: несмотря на наличие #default, если значение параметра не указано, то строчка просто исчезнет. Поэтому, если вам нужно её обязательное наличие, добавляйте тег <default> с тем же значением.

Примечание: Наличие #default в коде обязательно! Иначе функция не будет знать, какой код вернуть при ином параметре.

Другие функции[]

Выше были описаны наиболее распространённые и рекомендуемые к использованию функции парсера. Список остальных функций и их синтаксис можно найти в справке MediaWiki.

Вики-разметка[]

Узнать о вики-разметке можно в справке.

Викитекст работает во всех тегах, кроме <image> и <alt>. Для оформления данных её можно использовать в <format> и <default>. Но если это оформление используется во всех строчках, то лучше чуть позже перейти к CSS.

Как вы поняли выше, все параметры в коде имеют вид {{{Параметр}}}. Например, если нужно, чтобы в какой-то строчке текст был жёлтого цвета, то нужно написать: 

<data source="Текст">
    <label>Текст</label>
    <format><span style="color: yellow;">{{{Текст}}}</span></format>
</data>

Или если название (по умолчанию не отображающееся без тега <default>) содержит часть с полужирным шрифтов: 

<title source="Название">
    <format>Эпизод '''{{{Название}}}'''</format>
    <default>Эпизод '''{{PAGENAME}}'''</default>
</title>

Кроме того, используя инфобокс в статье, участник может использовать вики-текст в любых параметрах, кроме тех, что предназначены для изображения и всплывающего текста. В описании не разрешается окрашивание текста и изменение шрифта, т.е. теги <span> и <div> не работают.

Участник может использовать списки, задавая значение параметрам строк. Но рекомендуется разделять текст тегом <br/>. Примечание: если на вики уже слишком часто использовались списки в инфобоксе, а вам хочется улучшить их внешний вид, чтобы точек не было видно, можно использовать свойство list-style-type в CSS.

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

Результат[]

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

<infobox>
    <title source="Назв">
        <format>Это {{{Назв}}}!</format>
        <default>Это {{PAGENAME}}!</default>
    </title>
    <image source="Изображение">
        <default>Wiki-wordmark.png</default>
        <caption source="Описание">
            <format>Это {{{Описание}}}</format>
            <default>Это логотип вики</default>
        </caption>
        <alt source="Всплывающий">
            <default>Видишь текст? :)</default>
        </alt>
    </image>
    <group layout="horizontal" row-items="3" collapse="open">
        <header>Горизонтальная группа</header>
        <data source="Строка1"/>
        <data source="Строка2"/>
        <data source="Строка3"/>
        <data source="Строка4" span="2"/>
        <data source="Строка5"/>
        <data source="Строка6" layout="default">
            <label>Заголовок</label>
            <format>{{{Строка6}}} пройден</format>
        </data>
    </group>
    <group collapse="closed">
        <header><span style="color: blue;">Скрытая группа</span></header>
        <data source="Тест">
            <label>Сюрприз!</label>
        </data>
        <navigation><!--
        -->{{#if:{{{Нав|}}}<!--
        -->|{{{Нав}}}<br/>Держи ссылку на шаблон :) [[Шаблон:ИнфобоксТест]]|}}<!--
        --></navigation>
    </group>
</infobox>

Примечание: Вы можете заметить стрелочки в навигации — это комментарии вики-разметки. Они применены здесь, чтобы «пустое пространство между строками» не учитывалось кодом. Когда вы выносите код на новую строку в тегах <navigation>, <format> и <default>, обязательно используйте этот метод, иначе данные исказятся. Внимательно осмотрите, как в коде использованы комментарии.

Использование[]

В исходном коде[]

Код использования в статье: 

{{ИнфобоксТест
|Назв    = Инфобокс
|Строка1 = Тест 1
|Строка2 = Тест 2
|Строка3 = Тест 3
|Строка4 = Тест 4
|Строка5 = Тест 5
|Строка6 = Тест 6
|Строка7 = Тест 7
|Строка8 = Тест 8
|Тест    = <span style="color: gray;">Хехе</span>
|Нав     = Привет!
}}

Мы начали с того, что написали {{ИнфобоксТест — две кривые скобки и название инфобокса. Затем начали вводить значения параметров инфобокса. Они разделяются прямой вертикальной чертой. Словом, всё, как у обычных шаблонов. В значении параметра Тест мы применили стиль текста, окрасив его в серый.

Обязательно нажмите на все кнопки, которые видите в инфобоксе. Так вы сможете понять, как, например, работает тег <alt> и заметите раскрывающуюся группу. Сравните код и внешний вид инфобокса.

В визуальном редакторе[]

Окно с параметрами

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

Для начала вы вставляете инфобокс в страницу — Вставить > Инфобокс. В списке вы либо находите свой инфобокс, либо вводите название. В этот момент вы замечаете, что открывается окно с параметрами. «Что, нужно просто ввести параметры, указать изображение, и работа окончена?» — к сожалению, нет, в случае, если у вас имеются дополнительные параметры: указанные не в атрибуте source, а, например, в функции парсера внутри кода навигации.

InfoboxSourceEditor

Путь к исходному коду в визуальном редакторе

Вы заполняете нужные вам параметры в окне, нажимаете «Применить изменения», а затем, если нужно, открываете редактор исходного кода. В визуальном редакторе его можно найти в панели сверху, нажав на «Редактор исходного кода». Далее редактируете код по примеру выше.

Однако, возможно, вам что-то не нравится в оформлении. Слишком элементарно выглядит? Недостаточно эстетично? Тогда переходим к следующей части — оформлению инфобоксов в CSS.

Оформление в CSS[]

Если участник знает CSS-оформление, то он может изменить внешний вид инфобоксов в MediaWiki:Wikia.css (для скина Wikia), MediaWiki:Monobook.css (для скина Monobook) или MediaWiki:Common.css (для всех скинов). Для начала нужно знать, какой класс за что отвечает. Это можно посмотреть в исходном коде страницы с инфобоксом, но если вы делаете это впервые, то вам может помочь небольшой список ниже.

Список классов[]

Можно сказать, что каждый тег и его атрибут влияет на CSS инфобокса. Их названия легко запомнить, ибо они в основном созвучны с тегами. Можете нажать правой кнопкой мыши на любой элемент инфобокса выше, выбрать «Просмотр кода элемента» и просматривать свойства каждого класса.

Инфобокс

Инфобокс начинается с тега <aside>. В нём имеется четыре-пять классов, которые будут описаны далее.

.portable-infobox — стандартный класс инфобокса. По умолчанию он имеет следующие свойства: 

.portable-infobox {
    background-color: $infobox-background;
    clear: right;
    float: right;
    margin: 0 0 15px 15px;
    width: 270px;
}

$infobox-background — цвет, получающийся по следующей формуле: 90 процентное смешивание цвета страницы и ссылок (если вики тёмного цвета, то 85 процентное). Таким образом, цвет инфобокса для каждой вики разный.

.pi-background влияет на цвет инфобокса, но его альтернативой является свойство background-color в основном классе. Что из этого использовать — на ваше усмотрение.

Если на вики подключена тема для инфобоксов «Europa», то добавляется класс .pi-europa, заменяющий значения некоторых свойств инфобокса на иные. Как меняется инфобокс при добавлении этой темы, вы можете прочесть ниже.

По умолчанию инфобокс имеет тему, названную wikia, поэтому в нём содержится класс .pi-theme-wikia. О том, как использовать темы, вы также можете прочесть в соответствующем разделе.

Мы знаем, что в коде инфобокса можно указать атрибут layout="stacked". Если не указывать его, то добавится класс .pi-layout-default. При наличии этого атрибута будет класс .pi-layout-stacked. Он изменяет только отображение данных: 

.pi-layout-stacked .pi-data {
    display: block;
}
.pi-layout-stacked .pi-data-value {
    padding-left: $infobox-item-margin * 2;
}

В данном случае значение $infobox-item-margin равно 5 пикселям.

Общие классы

Все дальнейшие элементы — название, изображение, заголовки, строки с данными — имеют класс .pi-item. Он является общим. Также многие элементы имеют класс .pi-item-spacing, который по умолчанию имеет лишь одно свойство: 

.portable-infobox .pi-item-spacing {
    padding: 5px 10px;
}

Это означает, что по умолчанию элементы с этим классом имеют отступ сверху и снизу на 5 пикселей, а справа и слева — на 10 пикселей.

Элементы с данными имеют класс .pi-border-color, определяющий цвет рамки между строками. Класс имеет только одно свойство — border-color. Его значение, как и цвет инфобокса, индивидуально для каждой вики. По умолчанию известно, что этот цвет светлее цвета инфобокса примерно на 10-15%.

За шрифт в значениях инфобокса отвечает общий класс .pi-font, по умолчанию не имеющий никаких свойств.

Название

Состоит лишь из трёх классов: .pi-item, .pi-item-spacing и .pi-title. Последний класс индивидуален для главного заголовка в инфобоксе. Из-за наличия тега <h2> название возьмёт себе все свойства этого тега, за исключением нижней рамки и отступов, из-за индивидуальных свойств названия: 

.portable-infobox .pi-header, .portable-infobox .pi-title {
    border: 0;
    margin: 0;
}
.portable-infobox .pi-title {
    font-size: 18px;
    line-height: 28px;
}
Примечание: если на вашей вики уже существует CSS-код, оформляющий теги, учтите, что это оформление может затронуть инфобоксы. Способ решения этой проблемы зависит от самой ситуации.
Изображение

Начинается тегом <figure>, с классами .pi-item, .pi-image. Последний класс имеет только свойство центрирования содержимого: text-align: center;.

Примечание: далее в коде идёт ссылка на изображение. Если вы добавили всплывающий текст в инфобокс, то в ссылке будет атрибут title с вашим текстом.

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

Описание представлено тегом <figcaption> с классами .pi-item-spacing, .pi-caption. Последний тег имеет следующие свойства: 

.pi-caption {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    color: $color-alternate-text;
    font-size: 12px;
    font-style: italic;
    text-align: left;
    word-wrap: break-word;
}

$color-alternate-text — цвет описания, который различен для каждой вики. Его получают смешиванием цвета страницы с чёрным цветом на 50%; если вики тёмная — c белым цветом.

Галерея

Если вы добавили галерею в инфобокс, то структура очень сильно поменяется:

  • Классы заменятся на другие (и даже добавятся ещё несколько);
  • Описание не будет отображаться;
  • Всплывающий текст при наведении на изображение заменяется названием вкладки, в которой оно находится.

Вся часть с галереей находится в теге <div> с классом .pi-image-collection. У него нет никаких свойств. Этот элемент состоит из нескольких частей: вкладки и каждое изображение по отдельности. За список вкладок отвечает класс .pi-image-collection-tabs в теге <ul>. У этого класса следующие свойства: 

ul.pi-image-collection-tabs {
    list-style: none;
    margin: 0 -1px -1px 0;
    overflow: hidden;
    padding: 0;
    text-align: center;
}

Вкладка в теге <li> имеет классы .pi-tab-link и .pi-item-spacing. Если она на данный момент открыта, то добавляется класс .current. У этой части следующие свойства: 

ul.pi-image-collection-tabs li {
    border: 1px solid $infobox-section-header-background;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    margin: -1px -1px 0 0;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}
ul.pi-image-collection-tabs li.current {
    background: $infobox-section-header-background;
    font-weight: bold;
}

У одного изображения в галерее есть класс .pi-image-collection-tab-content. Если изображение открыто, так же добавляется класс .current. Свойства следующие: 

.pi-image-collection-tab-content {
    background-color: $infobox-background;
    display: none;
}
.pi-image-collection-tab-content.current {
    display: inherit;
}

Если вкладка открыта, то значение inherit перекрывает none, и изображение показывается. Закрытые вкладки же не отображаются.

Заголовок и навигация

Здесь вы узнаете про классы .pi-secondary-font и .pi-secondary-background. Они являются общими у заголовков групп и навигации, хотя за них отвечают разные классы.

Как и название, заголовок имеет тег <h2> с классами .pi-item, .pi-header, .pi-secondary-font, .pi-item-spacing и .pi-secondary-background. В случае наличия закрытых групп, добавляется тег .pi-collapse. Если группа закрыта, то pi-collapse-closed; если открыта — pi-collapse-open. При горизонтальном оформлении группы добавится тег .pi-horizontal-group. Если есть атрибут row-items, то вместо этого класса будет .pi-smart-group. Пояснение, зачем нужны некоторые классы:

.pi-header отвечает за заголовки групп. Некоторые его свойства вы могли заметить в разделе о названии. Все его стандартные свойства: 

.portable-infobox .pi-header, .portable-infobox .pi-title {
    border: 0;
    margin: 0;
}

На самом деле, заголовок и навигация инфобокса схожи только в двух классах. Один из них — .pi-secondary-font — влияет на стиль текста в этих двух элементах. Другой — .pi-secondary-background, влияющий на цвет фона. Свойства их таковы: 

.pi-secondary-background {
    background-color: $infobox-section-header-background;
}
.pi-secondary-font {
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    margin-top: 0;
}

За навигацию отдельно отвечает класс .pi-navigation, не имеющий никаких свойств. Однако в самой навигации есть классы .pi-navigation, .pi-item-spacing, .pi-secondary-background и .pi-secondary-font.

Группа

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

.pi-collapse добавляет стрелочку в заголовок. Происходит это благодаря следующему коду: 

.pi-collapse .pi-header:first-child {
    padding-right: 25px;
    position: relative;
}
.pi-collapse .pi-header:first-child:after {
    display: block;
    margin-top: -3px;
    position: absolute;
    right: 10px;
    top: 50%;
}
.pi-collapse .pi-header:first-child::after {
    border-color: #D5D4D4;
    border-style: solid;
    border-width: 2px 2px 0 0;
    content: '';
    display: inline-block;
    height: 5px;
    right: 0;
    position: relative;
    top: -1px;
    vertical-align: middle;
    width: 5px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.pi-collapse-closed добавляет лишь одно свойство: border-bottom: none, убирающее нижнюю рамку. Если закрыта горизонтальная группа, то добавляется код, скрывающий элементы внутри группы: 

.pi-collapse-closed .pi-horizontal-group thead,
.pi-collapse-closed .pi-horizontal-group tbody {
    display: none;
}

.pi-horizontal-group вставляется при наличии layout="horizontal" в группе и отсутствии row-items. В такой группе вся строка поровну делится на количество тегов <data> внутри неё. Элемент внутри такой группы имеет класс .pi-horizontal-group-item. В горизонтальной группе действует такое оформление: 

.pi-horizontal-group {
    border-spacing: 0;
    table-layout: fixed;
    text-align: center;
    width: 100%;
}
.pi-horizontal-group .pi-header {
    text-align: left;
}
.pi-horizontal-group .pi-horizontal-group-item {
    vertical-align: top;
}
.pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
    border-left-style: solid;
    border-left-width: 1px;
}
.pi-horizontal-group .pi-data-label {
    padding-bottom: 0;
}

Группы, имеющие атрибут row-items, называются «умными» — так их именуют даже в CSS-коде. Классы в этих группах точно такие же, просто слово horizontal заменено на smart. Значимые отличия в том, что такая группа использует не таблицы, как это делает горизонтальная группа, а тег <section>, как любая обычная группа. Поэтому делится строка с данными непосредственно в HTML, как вы можете заметить.

Также в этой группе добавляются два тега: .pi-smart-group-head, имеющий в себе названия параметров (то, что записывается в <label>), и .pi-smart-group-body со значениями этих параметров. Если вы не используете во всей строке тег <label>, то первый класс исчезнет. Для интереса можете посмотреть в исходном коде элемента.

Таким образом, умная группа имеет следующие свойства: 

.pi-smart-group {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.pi-smart-group:last-child {
    border-bottom: 0;
}
.pi-smart-group .pi-smart-data-label {
    padding-bottom: 0;
}
.pi-smart-group .pi-smart-data-label, .pi-smart-group .pi-smart-data-value {
    box-sizing: border-box;
    flex-basis: auto;
    padding: $infobox-item-margin $infobox-item-margin * 2;
}
.pi-smart-group-body {
    display: flex;
}
.pi-smart-group-head {
    display: flex;
}

У обычной группы следующая структура: начинается она с тега <section> с классами .pi-item, .pi-group и .pi-border-color. Класс .pi-group имеет следующие свойства: 

.pi-data, .pi-group {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.pi-group > .pi-item:last-child {
    border-bottom: 0;
}

Затем идёт тег <div> с классами .pi-item, .pi-data, .pi-item-spacing и .pi-border-color. Среди нового здесь только pi-data, использующийся только в строке с обычных оформлением.

В этот <div> входят два элемента: <h3> с классами .pi-data-label и .pi-secondary-font и <div> с классами .pi-data-value и .pi-font.

Подробнее о классах: .pi-data — это класс для целой строки, .pi-data-label — класс заголовка параметра, а .pi-data-value — класс значения параметра. Стандартные свойства следующие: 

.pi-data {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
}
.pi-data, .pi-group {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.pi-data-label {
    -ms-flex-preferred-size: calc($infobox-width / 3);
    -webkit-flex-basis: calc($infobox-width / 3);
    -moz-flex-basis: calc($infobox-width / 3);
    flex-basis: calc($infobox-width / 3);
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    overflow: hidden;
    word-wrap: break-word;
}
.portable-infobox .pi-data-label {
    margin-bottom: inherit;
    margin-top: 0;
}
.pi-data-value {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-size: 12px;
    line-height: 18px;
    padding-left: 0;
    word-wrap: break-word;
}
.pi-data-value:not(:first-child) {
    -ms-flex-preferred-size: calc($infobox-width * 2 / 3);
    -webkit-flex-basis: calc($infobox-width * 2 / 3);
    -moz-flex-basis: calc($infobox-width * 2 / 3);
    flex-basis: calc($infobox-width * 2 / 3);
    padding-left: 10px;
}

calc($infobox-width / 3) — одна треть строки; calc($infobox-width * 2 / 3) — две трети. В стандартном случае, заголовок параметра будет занимать 90 пикселей, а его значение — 180 пикселей.

На этом список классов с их свойствами заканчивается. Можно оформлять инфобокс своими классами, используя темы оформления, которые будут описаны ниже.

Изменение темы оформления[]

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

Например, прямо сейчас мы займёмся оформлением инфобокса из раздела «Использование». Тему назовём example. Нужно, чтобы была красивая рамка, другая ширина, фон-градиент, другой шрифт и т.д. Для начала мы оформляем основной класс инфобокса. Однако, имея дело с темой, за основу мы берём не .portable-infobox, а .pi-theme-example.

Пример темы можно посмотреть здесь, но инфобокс справа использует эту же тему. Написав тему, не забудьте указать её в коде инфобокса атрибутом theme, например: theme="example".

Вот небольшие объяснения некоторых моментов:

  • Почему мы записали .pi-secondary-background, но навигация прозрачная? — Это происходит из-за наличия .pi-navigation с прозрачным фоном.
  • Зачем нужны .pi-theme-example .pi-smart-data-value:not(:first-child), .pi-theme-example .pi-smart-data-label:not(:first-child)? — Для того, чтобы цвет рамки в «умных» группах тоже изменился.
  • Зачем первый тег в .pi-data .pi-data-label? — Вы знаем, что в других группах тоже может использоваться класс .pi-data-label. Целью было изменить ширину этого класса в обычной группе, за которую отвечает класс .pi-data. То же самое будет, если вам захочется изменить оформление .pi-data-value в обычной группе.
  • Зачем font-style: normal; в классе описания? — По умолчанию стилем описания является курсив.
  • Зачем записывать одинаковое свойство/значение несколько раз? — Вероятно, вы говорите про градиент и flex-basis, записанные пять раз. Это сделано с целью адаптации CSS для всех браузеров.

Тему мы написали. Но, допустим, нужно, чтобы при определённом значении какого-то параметра тема оформления менялась. Откройте закрытую группу в инфобоксе и увидите значение параметра «Тест» (название «Сюрприз»). В инфобоксе оно «Хехе». Нужно создать тему оформления для случая, если вместо этого значения стоит «Хихи». Она будет иметь другую цветовую гамму.

Вот код для инфобокса чуточку ниже: 

.pi-theme-example.pi-theme-Хихи {
    border: 2px dotted #4C677A;
    border-radius: 0;
    background-image: -webkit-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -moz-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -ms-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -o-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: linear-gradient(to top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
}
.pi-theme-example.pi-theme-Хихи .pi-title {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    background-color: #0A2336;
    border-top: 2px dotted #141B40;
}
.pi-theme-example.pi-theme-Хихи .pi-secondary-background {
    background-color: #0A2336;
}
.pi-theme-example.pi-theme-Хихи .pi-border-color,
.pi-theme-example.pi-theme-Хихи .pi-smart-data-value:not(:first-child),
.pi-theme-example.pi-theme-Хихи .pi-smart-data-label:not(:first-child) {
    border-color: #4C677A;
}
.pi-theme-example.pi-theme-Хихи .pi-navigation {
    background: transparent;
}


Важный момент о написании классов: если в под-теме вы хотите придать некоторым свойствам другие значения, пишите классы темы слитно, как выше: .pi-theme-example.pi-theme-Хихи. Например, если бы в теме «example» не было рамки, а в под-теме она добавлялась, то можно записать этот код следующим образом: 

.pi-theme-example .pi-theme-Хихи {
    border: 1px solid white;
}

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

Примечание: можно использовать под-тему без основной темы, но тогда нужно будет вместо .pi-theme-example.pi-theme-Хихи записывать .pi-theme-Хихи.

Чтобы под-тема работала, не забудьте добавить атрибут theme-source с влияющим параметром (в данном случае — theme-source="Тест") и указать верное значение.

Тема для инфобоксов «Europa»[]

По умолчанию в функциях вики (страница WikiFeatures, доступная только администраторам) включена тема инфобоксов «Europa». Она сильно меняет некоторые части оформления, так как добавляет класс .pi-europa.

Работа с этой темой[]

К сожалению, если администратор подключает тему «Europa» на своей вики, ему помимо изменения CSS придётся заменить некоторые классы, иначе тема не будет работать.

Вот изначальный код: 

.pi-theme-example.pi-theme-Хихи {
    border: 2px dotted #4C677A;
    border-radius: 0;
    background-image: -webkit-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -moz-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -ms-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -o-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: linear-gradient(to top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
}
.portable-infobox .pi-data-label {
    margin-bottom: inherit;
    margin-top: 0;
}
.pi-data-value
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-size: 12px;
    line-height: 18px;
    padding-left: 0;
    word-wrap: break-word;
}
.pi-theme-games {
    width: 300px;
}

Который при подключении темы «Europa» должен заменяться на этот: 

.portable-infobox.pi-europa.pi-theme-example.pi-theme-Хихи {
    border: 2px dotted #4C677A;
    border-radius: 0;
    background-image: -webkit-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -moz-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -ms-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: -o-linear-gradient(top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
    background-image: linear-gradient(to top, rgba(21, 43, 59, 0.75) 0%, rgba(76, 103, 122, 0.75) 100%);
}
.portable-infobox.pi-europa .pi-data-label {
    margin-bottom: inherit;
    margin-top: 0;
}
.portable-infobox.pi-europa .pi-data-value
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-size: 12px;
    line-height: 18px;
    padding-left: 0;
    word-wrap: break-word;
}
.portable-infobox.pi-europa .pi-theme-games {
    width: 300px;
}

В начале всегда должен стоять класс .portable-infobox.pi-europa. Хотя именно из-за этого многие рекомендуют использовать обычную тему инфобоксов.

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

Fan Feed

More Эскадра Фэндома