Инфобокс что это такое

Infobox

В Википедии слово « infobox » означает шаблон‐карточку.

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

Содержание

Где используется инфобокс

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

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

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

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

О пространстве имён

На ФЭНДОМЕ существует несколько пространств имён, которые предназначены для разделения статей на вики по типам. Классические инфобоксы, как и прочие шаблоны, создаются в пространстве имён Шаблон, поэтому, первым шагом, будет создание страницы с названием типа: Шаблон:Инфобокс, Шаблон:Персонаж, Шаблон:Серия, Шаблон:Игра и т.п.

Что такое классический инфобокс?

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

Внимание. Строки не оставляем пустыми, а заполняем названиями этих строк. Пример подобной таблицы, расположен справа. Ещё раз обратите внимание, что в нижней части таблицы стоят «двойные» названия (Цвет=>Цвет и Тип=>Тип). Это очень важно. Также не нужно вставлять в таблицу изображение, достаточно отметить местоположение картинки словом «Изображение».

Превращаем таблицу в классический инфобокс

Для того, чтобы превратить таблицу в классический инфобокс, нужны переменные величины. Их можно создать с помощью тройных фигурных скобок: <<<переменная величина>>>. В нашей таблице-инфобоксе переменными должны стать следующие слова: Название, Изображение, Цвет (тот, что справа) и Тип (тот, что справа). Для этого, помещаем их в тройные фигурные скобки. Должно получится, как на примере справа. Сохраняем страницу. Классический инфобокс готов!

Использование классического инфобокса

Чтобы воспользоваться классическим инфобоксом, нужно в панели редактирования щёлкнуть по кнопке «Шаблон», найти созданный вами шаблон по названию и заполнить требуемые строки. Внимание. В графе «Изображение» нужно дать полную ссылку на изображение, например [[Файл:Картинка.jpg]].

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

Тюльпан
Информация
Цвет	Розовый
Тип	Бутон

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

Исчезающие строчки

Перед вами Исходный код нашего инфобокса-примера.

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

Обратите внимание на следующее: слово «Цвет» теперь повторяется трижды (два раза с тройными фигурными скобками и один раз без них).

Таким образом можно заставить исчезнуть любую строчку из нижней части классического инфобокса или все строчки.

Источник

Инфобоксы

Содержание

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

Инфобокс — это.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вся часть с галереей находится в теге

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

Как и название, заголовок имеет тег

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

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

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

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

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

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

Источник