Викия

ru-Викия

коммент.9

Модульные инфобоксы. Часть 1: Строение

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


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

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

Навигация
#1 Строение#2 Оформление и стилиСправочная статья (ТегиCSS)

Введение

Мир развивается и Викия тоже не стоит на месте. Буквально на днях нас захлестнула волна, переворачивающая с ног на голову наше представление о создании инфобоксов. Имя этой волне — модульные инфобоксы. Простота и поддержка мобильных устройств в одном целом. Что это и с чем его едят? Разберём это дело в двух частях. Запасаемся терпением, а также чаем или же другими приятными для вас напитками, и начинаем первый «урок».

А стоит ли?

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

А как?

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

Как же написать самый простой шаблон с картинкой и парочкой строк? Всё просто — пройдёмте сразу к примеру:

<infobox layout="stacked">
    <title source="Название">
        <default>{{PAGENAME}}</default>
    </title>
    <image source="Изображение">
        <caption source="Подпись изображения" />
    </image>
    <group>
        <header>Основное описание</header>
        <data source="Тип1">
	        <label>Тип</label>
	        <format>Вафельный {{{Тип1}}} [[Категория:Вафли типа {{{Тип1}}}]]</format>
        </data>
        <data source="Стиль">
	        <label>Стиль</label>
        </data>
    </group>
</infobox>

Заполнение:

Модульный инфобокс Вафли.png

Результат

{{Инфобокс
|Название = Вафля
|Изображение = Waffle.jpg
|Подпись изображения = Венские вафли
|Тип1 = композит
|Стиль = рифлёный
}}

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

  • infobox — главный тег, в котором и сидят все остальные теги. Имеет несколько параметров, которые указываются внутри. В моём случае это layout с переменной stacked. Почему этот параметр? Потому что инфобокс выглядит необычно.
«В смыыысле — необычно? Что он такого делает?», спросите вы.
— Читайте справку. Там есть хороший пример. Можно и вовсе не указывать этот параметр и тогда инфобокс будет выглядеть как обычно.
  • group — группирует элементы в инфобоксе. Не имеет параметров.
«Ну и зачем оно вообще нам надо?»
— А всё просто. Многие из вас имеют заголовки в инфобоксах. А если и нет, то захотят) Но не в этом соль: многие, при написании инфобоксов сталкивались с проблемой, когда заголовок продолжал отображаться в инфобоксе, а табличка с данными под ним отсутствовали. Было дело? Вот именно в этом случае к нам и приходит на помощь тег group, который, при не заполнении всех переменных в этой секции, просто скроет её. Легко и просто, правда?
  • header — тот самый заголовок, о котором и шла речь. Заполняется просто — можно увидеть на примере.
  • data — "ячейки" инфобокса с нужными вам подзаголовками и переменными. Сами по себе имеют лишь один, но очень важный для заполнения параметр: source. Именно source и определяет название переменной, которую вы после и будете заполнять. Простое сравнение кода инфобокса и пример его заполнения помогут вам моментально понять, что это и как оно используется.
«А внутри у него что?»
Богатый внутренний мир Другие теги:
  • label — этакий тип заголовка, но для ячейки с переменной. Пишем то, что считаем нужным.
  • format — раздолье для старых-добрых шаблоностроителей. Поддерживает викитекст и просто конфетка. Позволяет настроить заполнение ячейки так, как вы хотите — будь то картинка перед переменной или же целая схема из очередной свалки кодов. В моём примере можно прекрасно понять, как проставляется переменная "Тип1" в этом теге (если не понятно, то она в тройных фигурных скобках). Более того, как вы могли заметить, модульный инфобокс позволяет проставлять категории. Что нужно для этого сделать? В нужный тег format занести нужную категорию. Всё просто как дважды два (равняется 5ти, если кто не помнит)!
  • image — инфобокс без картинки, как хлеб без масла. Как и data, этот скрипт также имеет source. Заполняется он просто — вы лишь указываете название файла и его расширение. В нашем случае это Waffle.jpg. Стандартная ширина картинки — 270px. Самое то!
  • caption — в подарок к изображению вы можете оставить подпись под ним! Невероятно, правда? Подпись выглядит как отдельная широкая ячейка и расположена прямо под фотографией.
«Ну ты и объяснятель! Начал с первого тега infobox, а потом беспорядочно стал скакать по всему инфобоксу от тега к тегу. Где title?»
  • title — заголовок всех заголовков, этакий король в их царстве. Может располагаться в любом месте в теге infobox (но не внутри других тегов! не перепутайте!) и только один раз. По обычаю, "короля" размещают в самой верхушке инфобокса (как в моём примере), но при должной фантазии его можно поставить куда угодно. Встаёт в ряд c data и image по наличию параметра source. Заполняется аналогично.
«А вот у меня можно указывать стандартное значение переменной, которое, в случае не заполнения этой самой переменной, займёт пустое место! Ха-ха, шах и мат!»
— А вот у меня тоже. Видите мой козырь в теге title? Да-да, это он!
  • default — стандартное значение переменной. Когда вы ленитесь заполнять шаблон инфобокса, этот тег приходит вам на помощь и подсовывает своё значение (Какое? Зависит только от вас!). Располагается в data, title, image, alt, caption и header. Смысл, думаю, объяснять не стоит, ибо итак всё ясно. Но если вам так интересно, то в моём случае в качестве стандартного значения переменной "Название" я просто использую название статьи ({{PAGENAME}}).
«Так так так... Вроде всё разобрали. Что дальше?»
— Перейдём к заключению первого, так сказать, урока по модульным инфобоксам.

Заключение

Чему мы сегодня научились? Тратить время! Строить инфобоксы нового типа! Разобрали всё по полочкам (ну, может и не всё, но самое важное я выделили). Что мы будем разбирать на следующем занятии? Самое интересное — оформление модульного инфобокса. Но будем ли мы это обсуждать — зависит от вас и от ваших отзывов в комментариях. Увидимся!

Викия-сеть

Случайная вики