Приклад інфобоксу
Інфобокси використовуються в переважній більшості вікі-проєктів. За їх допомогою можна коротко розповісти читачу про предмет статті, виділити ключову інформацію, створити єдине оформлення вікі.
Фандом пропонує вам новий спосіб розмітки інфобоксів. При її створені, ваші інфобокси будуть правильно відображатися на будь-якому пристрої, нехай це широкоекранний монітор або невеликий екран смартфону. Детально про інструмент, який допоможе змінити класичні інфобокси вашої вікі на нові модульні, читайте в цій статті.
Як додати інфобокс у статтю[]
Меню «Вставити»
Ви можете додати інфоборкс у статтю так само, як і будь-який інший шаблон, через інструменти редактору або через вихідний код. У Візуальному редакторі модульні інфобокси додаються через інтерактивне меню «Вставити», де потрібно вибрати пункт «Інфобокси».
У вихідному коді вам потрібно вставити відповідний код, який звичайно розташовується у документації до шаблону, і заповнити необхідні поля після знаку «дорівнює» (=) відповідною інформацією.
Наприклад:
{{Інфобокс сутності
|зобр=Wandering Trader.png
|інвзображення=Яйце виклику мандрівного торговця
|здоров'я={{здоров'я|20}}
|розмір=Дорослий:<br>
Висота: 1.95 блоків<br>
Ширина: 0.6 блоків<br>
Дитина:<br>
Висота: 0.975 блоків<br>
Ширина: 0.3 блоків
|спавн=Див [[#Спавн|Спавн]]
|ід='''JE''' : 604<Br> '''BE''' : 118
|ідоб'єкта=wandering_trader
}}
Вставка модульних інфобоксів нічим не відрізняється від вставки будь-яких інших шаблонів. Різниця лише у коді самого шаблону.
Створення інфобоксу[]
Конструктор інфобоксів[]
Якщо при створенні сторінки шаблону ви вибрали тип «Інфобокс», то ви будете перенаправлені на сторінку конструктору інфобоксу Спеціальна: InfoboxBuilder/НазваШаблону. Цей інтерактивний інструмент дозволить вам зібрати інфобокс з найбільш поширених елементів — такі як зображення, розділи, рядки. Просто додайте і переміщуйте елементи в тому порядку, який вам подобається. Натиснувши на кожний елемент, ви побачите детальну інформацію про нього і ті параметри, які ви можете налаштувати.
Щоб перейти в редактор вихідного коду, натисніть на [ ] в правому нижньому куту.
Редагування кода[]
Інфобокс представляє собою набор простих тегів всередині загального тега <infobox></infobox>. Наприклад, будь-який рядок всередині інфобоксу задається наступним чином:
<data source="Значення рядка"><label>Назва рядка</label></data>
Для створення заголовку використовується тег:
<title source="назва" />
Для створення зображення використовується тег:
<image source="зображення" />
Комбінуючи ці теги, можна створити інфобокс з будь-якими значеннями. У якості прикладу створимо простий інфобокс, який можна побачити на картинці праворуч. Код для нього виглядає наступним чином:
<infobox>
<title source="назва"><default>{{PAGENAME}}</default></title>
<image source="зобр" />
<data source="тип"><label>Тип</label></data>
<data source="вибух"><label>Вибухостійкість</label></data>
<data source="склад"><label>Складається</label></data>
<data source="поява"><label>Перша поява</label>
</data>
</infobox>
Розмістить цей код на сторінці Шаблон: Блок, і інфобокс готовий! Щоб використовувати його, викликайте відповідне діалогове вікно у візуальному редакторі, а в режимі вихідного коду шаблон буде виглядати так само, як при використанні класичного інфобоксу:
{{ІнфобоксБлок
|зобр = Sea Lantern JE1 BE1.gif
|тип = Твердий блок
|вибух = 1.5
|склад = Так (64)
|поява = 1.8 (14w25a)
}}
Вигляд шаблонів[]
Стилі[]
Інфобокси можуть використовувати два стиля відображення даних:
- За замовчуванням дані в рядках розташовуються в двух колонках: заголовок ліворуч, значення праворуч.
- Якщо у код інфобоксу додати <infobox layout="stacked">, то значення будуть відображатися у наступному рядку після заголовку і з невеликим відступом. Цей стиль підходе, якщо у вас довгий текст у рядку.
Користувальницькі стилі[]
Звичайні стилі інфобоксів можна замінити двумя шляхами.
По-перше, ви можете підключити тему для інфобоксів «Europa» в WikiFeatures. Це розширення автоматично застосує кольорову гамму, налаштований через Конструктор тем.
По-друге, створити індивідуальні стилі інфобоксу можна через CSS. Використовуйте атрибути type, theme або theme-source в тезі infobox, щоб налаштувати інфобокси за допомогою класів CSS.
- Атрибут type використовується для визначення логічного типу інфобоксу.
- Атрибут 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.
Стилізація елементів[]
Індивідуальні елементи інфобоксу мають свої атрибути, які можна використати в селекторах CSS, тим самим задаючи індивідуальний стиль будь-якій частині інфобоксу.
- Усі елементи інфобоксу мають атрибут source, який працює в HTML з параметром data-attribute, таким як data-source="ATK". Це дозволяє приписати його в CSS або JS як .pi-item[data-source=ATK], щоб задати йому певний стиль. В комбінації з type це дає можливість відмовитися від вибору стилю типу nth-of-type і відкриває додаткові можливості для стилізації інфобоксів.
- Ці параметри дозволяють вказати будь-які елементи інфобоксу, незалежно від того, чи застосовують вони входящий параметр чи ні, включи атрибути для <title>, <group>, <data>, <header>, <image> і <navigation>. Як і у випадку data-source, можна використати <data name="bar">, щоб вказати конкретний елемент інфобоксу .pi-item[data-item-name=bar].
Додання відео[]
У інфобокс можна додати відеофайл. Для цього використовуйте той же тег, що і для вставлення зображення. Відео в інфобоксі буде представлено як картинка із позначкою відтворення.
Додаткові теги[]
Групування[]
Інфобокси можуть виглядати по-різному і не завжди можна обійтися простим набором рядків. Якщо ви хочете згрупувати декілька рядків під загальним заголовком, використовуйте тег «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" дозволяє відображати обидві колонки, навіть якщо друга або перша колонка порожня. Однак якщо обидві рядки залишаться незаповнені, то цей блок інфобоксу не буде відображатися.
Доповнення до змін[]
У деяких випадках до змінних всередині інфобоксу потрібно додати якусь загальну інформацію. Це може бути значення або ціна змінної (кг, метр, секунда, рублі та ін.), іконка, шаблон, посилання.
Приклад:
<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>
Горизонтальний макет для груп[]
Необов’язково, щоб групи відображалися вертикально. Поля груп можна виставити за горизонталлю, і назви зі змістом рядок будуть показувати у вигляді стовпців. Для цього просто потрібно додати атрибут 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>
Групи, що згортаються[]
Групи можна зробити згортованими, якщо додати або collapse="open", або collapse="closed" до тегу групи. На заголовок в цьому випадку можна буде натиснути, щоб розгорнути або згорнути групу, а сама група після завантаження сторінки відобразиться розгорнутою або згорнутою відповідно.
<group collapse="closed">
<header>Поява</header>
<data source="films" />
<data source="comics" />
</group>
Примітка: заголовок повинен слідувати відразу ж після тегу групи, що відкривається.
Вкладки для змісту інфобоксу[]
Всередині елементів інфобоксу можна використати вкладки, щоб, за необхідністю, додати більше інформації всередину одного інфобоксу. Це можна зробити за допомогою тега Panel.
Всередині тега <panel> можна розміщати стандартні теги інфобоксів, групуючи їх за допомогою тега <section>. Назва секції визначається тегом <label>. Наприклад, для інфобоксу на зображення праворуч, ділянок коду з вкладками буде виглядати, приблизно, наступним чином:
<panel name="statistics">
<section name="edition5">
<label>5e</label>
Зміст всередині вкладки
</section>
<section name="edition4">
<label>4e</label>
Зміст всередині вкладки
</section>
</panel>
Усі теги[]
Опис усіх тегів для інфобоксів можна знайти у статті: Довідка:Інфобокси/теги.
Заповнення інфобоксів[]
Таббери і галереї[]
Під кожною закладкою знаходиться одне зображення
Ви можете додати відразу декілька зображень у інфобокс за допомогою тегів <gallery> або <tabber> безпосередньо на сторінці статті.
{{Інфобокс
|зображення=<gallery>
Зображення 1.png|Номер 1
Зображення 2.png|Номер 2
Зображення 3.png|Номер 3
</gallery>
}}
{{Інфобокс
|зображення=<tabber>
Номер 1 = [[Файл:Зображення 1.png]] |-|
Номер 2 = [[Файл:Зображення 2.png]] |-|
Номер 3 = [[Файл:Зображення 3.png]]
</tabber>
}}
Примітка: краще використовувати тег <gallery>, оскільки він більш універсальний.
Parser Functions[]
Розширення Parser Functions може бути використаний у будь-якому інфобоксі. Однак результат буде прихований, якщо змінна в data виявиться порожньою.
| Код шаблону | Результат |
|---|---|
<data source="level">
<label>Ранг</label>
<format>Игрок {{#switch:{{{level}}}
|1=професіонал
|2=герой
|новачок
}}</format>
<default>Гравець</default>
</data>
|
У даному випадку змінна 'level' є порожнім, однак ця інформація не передається в switch і стандартне значення для нього — 'новачок' — непроставляється, так як це завдання виконує тег default.
Приклади інфобоксів[]
Ось приклади робочих і гарно оформлених інфобоксів:
- Приклад інфобоксу Вікі про вікі
- Приклад інфобоксу на Вікі Fallout
- Приклад інфобоксу Вікі Geometry dash