FANDOM


Інфобокси використовуються в різних статтях, допомагаючи коротко представити інформацію про персонажа, комп'ютерну гру, серії серіалу й т.ін.

Приклади Редагувати

Приклади інфобоксів Ви можете подивитися на наступних сторінках

Питання створення Інфобоксів встає рано чи пізно у будь-якій Вікі.

Форми Редагувати

Зараз на Фендому доступні два способи створення інфобоксів
  • класичний — код такого інфобокса «запрацює» у будь-якому вікі-проекті, не лише на Фендому
  • модульний — нововведення на Фендому з 2015 року; спрощений конструктор інфобоксів, працює тільки на платформі Фендому.

Далі пропонується покрокова інструкція створення Інфобоксів для новачків.

Про простір імен Редагувати

На Фендому існує кілька просторів імен, які призначені для розділення статей на Вікі за типами. Інфобокси, як і інші шаблони, створюються в просторі імен Шаблон, тому, першим кроком буде створення сторінки з назвою типу: Шаблон:Інфобокс, Шаблон:Персонаж, Шаблон:Серія, Шаблон:Книга і т.п.

Класичний інфобокс Редагувати

Що таке інфобокс? Редагувати

Назва
Зображення
Інформація
Колір Колір
Тип Тип

Інфобокс, за своєю суттю,— це таблиця.

Тому другим кроком буде створення таблиці, орієнтованої по правій стороні, з кількістю рядків і стовпців, шириною та квітами, які Вам необхідні. Таблицю дуже просто створити з допомогою Візуального текстового редактора. "'Увага."' Рядки не залишаємо порожніми, а заповнюємо "'назвами"' цих рядків. Приклад подібної таблиці, розташований праворуч. Ще раз зверніть увагу, що в нижній частині таблиці стоять "подвійні" назви (Колір=>Колір і Тип=>Тип). Це дуже важливо. Також не потрібно вставляти в таблицю зображення, досить відзначити місце розташування картинки словом "Зображення".

Перетворюємо таблицю в інфобокс Редагувати

{{{Заголовок}}}
{{{Зображення}}}
Інформація
Колір {{{Колір}}}
Тип {{{Тип}}}

Для того, щоб перетворити таблицю в инфобокс потрібні змінні величини. Їх можна створити за допомогою потрійних фігурних дужок: {{{змінна величина}}}. У нашій таблиці-инфобоксе змінними повинні стати наступні слова: Назву, Зображення, Колір (той, що праворуч) і Тип (той, що праворуч). Для цього, поміщаємо їх у потрійні фігурні дужки. Повинно вийде, як на прикладі праворуч. Зберігаємо сторінку. Инфобокс готовий!

Використання інфобокса Редагувати

Тепер, щоб скористатися інфобоксом, треба у панелі редагування клацнути по кнопці "Шаблон", знайти створений Вами шаблон за назвою і заповнити потрібні рядки.

Увага.

У графі "Зображення" потрібно дати повну посилання на зображення, наприклад [[Файл:Картинка.jpg]].

Якщо Ви редагуєте у Вихідному коді, то потрібно створити цей код на сторінці вручну. В нашому випадку, він буде виглядати наступним чином:

Тюльпан
Example
Інформація
Колір Рожевий
Тип Бутон
{{Інфобокс
|Назва=Тюльпан
|Изображение=[[Файл:Example.jpg]]
|Колір=Рожевий
|Тип=Бутон
}}

Зверніть увагу, що в першій сходинці стоїть назва шаблону (в нашому випадку, Инфобокс, а у Вашому це може бути Персонаж, Гра тощо), а далі йдуть назви змінних, яким після знака "=" відповідають значення цих змінних. В результаті, при приміщенні даного коду на будь-яку сторінку, ми отримаємо те, що Ви бачите праворуч.

Зникаючі рядки Редагувати

Іноді, потрібно, щоб певна рядок зникла з інфобокса, коли, наприклад, у персонажа немає прізвиська або він не володіє зброєю. В такому випадку, замість слів "Ні" або "Невідомо" в правій частині таблиці можна змусити цю рядок зникнути. Для цього використовується умовний оператор "#if". Однак для його додавання вже недостатньо Візуального текстового редактора, і необходио перейти в режим Вихідного коду.

Для нижніх рядків таблиці Редагувати

Перед Вами Вихідний код нашого інфобокса-прикладу.

{| align="right" border="1" cellpadding="1" 
cellspacing="1" style="width: 150px"
| colspan="2" style="text-align: center; 
background-color: #6495ed; color: #ffffff"|{{{Заголовок}}}
|-
| colspan="2" style="text-align:center" |{{{Зображення}}}
|-
| colspan="2" style="background-color: #000000; color: #ffffff"|
Інформація
|-
| style="border-bottom-color: #7fff00"|Колір
| style="border-bottom-color: #7fff00"|{{{Колір}}}
|-
| style="border-bottom-color: #7fff00"|Тип
| style="border-bottom-color: #7fff00"|{{{Тип}}}
|}

Змусимо зникнути рядок з параметром "Колір". Внесіть зміни у Вихідний код, аналогічний тому, що Ви бачите нижче.

Зауважте, що на попередньому перегляді інфобокса, рядок з параметром "Колір" теж зникає, як на картинці праворуч.


{{{Заголовок}}}
{{{Зображення}}}
Інформація
Тип {{{Тип}}}
{| align="right" border="1" cellpadding="1" 
cellspacing="1" style="width: 150px"
| colspan="2" style="text-align: center; 
background-color: #6495ed; 
color: #ffffff"|{{{Заголовок}}}
|-
| colspan="2" style="text-align:center" 
|{{{Зображення}}}
|-
| colspan="2" style="background-color: #000000; 
color: #ffffff"|Інформація
|-
{{#if:{{{Колір|}}} 
| {{!}} style="border-bottom-color: #7fff00" {{!}} 
Колір
{{!}} 
style="border-bottom-color: #7fff00" {{!}} {{{Колір|}}}}}
|-
| style="border-bottom-color: #7fff00"|Тип
| style="border-bottom-color: #7fff00"|{{{Тип}}}
|}

Зверніть увагу на наступне: слово "Колір" тепер повторюється тричі (два рази з подвійними фігурними дужками і один раз без них) і на те, що після останнього слова "Колір" йдуть п'ять фігурних дужок, три з яких належать до самої змінної, а ще дві — до оператору #if, закриваючи тим самим цей внутрішній шаблон.

Таким чином, можна змусити зникнути будь-яку сходинку з нижньої частини інфобокса або всі рядки.

На укрвікіРедагувати

Модульний інфобокс Редагувати

Створення інфобокса Редагувати

Конструктор інфобоксівРедагувати

Якщо при створенні сторінки шаблону ви вибрали тип «Інфобокс», то ви будете автоматично перенесено на сторінку конструктора інфобоксів Спеціальна:InfoboxBuilder/Назва_Шаблона.

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

Щоб перейти в редактор вихідного коду, клікніть на [ ] в правому нижньому куті.

Редагування кодуРедагувати

Инфобокс являє собою набір простих мітки всередині загального тега "'<іnfobox></іnfobox>"'. Наприклад, будь-яка рядок всередині инфобокса задається наступним чином:

<data source="Значення рядка"><label>Назва рядка</label></data>

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

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

Для створення зображення використовується тег:

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

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

<іnfobox>
<title source="ім'я"><default>{{PAGENAME}}</default></title>
<image source="зображення" />
 <data source="сезон"><label>Сезон(и)</label></data>
<data source="перша поява"><label>Перша поява</label></data>
</іnfobox>

Додайте цей код на сторінці "'Шаблон:Персонаж"', і инфобокс готовий! Щоб використовувати його, викличте діалогове вікно в Візуальному редакторі, а в режимі Вихідного коду шаблон буде виглядати також, як при використанні класичного инфобокса:

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

Вид шаблонів Редагувати

Стилі Редагувати

МодульнийІнфобокс01

Приклад модульного інфобокса

Інфобокси можуть використовувати два стилі відображення даних
  • За замовчуванням дані в рядках розташовуються в двох колонках: заголовок зліва, значення праворуч.
  • Якщо код инфобокса додати <іnfobox layout="stacked">, то значення будуть відображатись в наступному рядку після заголовка і з невеликим відступом. Цей стиль підходить, якщо у вас довгий текст в рядку.

Користувальницькі стилі Редагувати

Створити індивідуальні стиль инфобокса можна через CSS. Детальніше про це читайте в статті Довідка:Інфобокси/CSS.

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

Додавання відео Редагувати

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

Додаткові теги Редагувати

Угруповання Редагувати

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

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

Якщо вам потрібно зібрати інформацію всередині колонок, використовуйте стиль "'layout="horizontal""' всередині тега "group". Приклад:

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

Використання стилю "'show="incomplete""' дозволяє показувати обидві колонки, навіть якщо друга або перша колонка порожні. Однак якщо обидві рядки залишаться незаповненими, то цей блок инфобокса не буде відображатися.

Доповнення до змінним Редагувати

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

Приклад:

<іnfobox 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>
</іnfobox>

Групи, що згортаютьсяРедагувати

Групи можна зробити входами, якщо додати або "collapse="open" або "collapse="closed" до тегу групи. Заголовок в цьому випадку можна буде клікнути, щоб розгорнути або згорнути групи, а сама група після завантаження сторінки відобразиться розгорнутому або згорнутому відповідно.

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

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


Заповнення інфобоксів Редагувати

Таббери і галереїРедагувати

Файл:Для справки - табберы на ПК.png

Ви можете додати відразу кілька зображень в инфобокс за допомогою тегів <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>, оскільки він більш універсальний.

Робимо модульний інфобокс. Практично. З картинками Редагувати

Скажімо, виникла необхідність зробити модульний інфобокс.

1. Спочатку спробуємо уявити його майбутню структуру.

Наприклад, мені потрібно створити інфобокс Шаблон:Хірой [1] (для гри чи вікі по літературній сазі, чи для опису серіалу
мало для чого?)
Ім'я (чи заголовок)
Картинка (зображення)
Підпис під картинкою
Інши імена, чи прізвиська, чи псевдо

БІОГРАФІЧНІ  ДАНІ

Дата і місце народження
Громадянство
Галактика
Планета
Країна
Підрозділ
Сім'я
Відносини

ОСОБИСТІ ДАНІ

Титул
Військове (наукове) звання
Освіта
Спеціальність
Нагороди
Улюблена зброя
Улюблена техніка
Особливості зовнішнього вигляду
Особливості поведінки

ІНШЕ

Статус
З'являється в серіях
З'являється в іграх
Примітки
МодульнийІнфобокс05

Початок роботи з конструктором

2. Усвідомивши структуру майбутнього інфобокса, відкриваємо конструктор Спеціальна:InfoboxBuilder і набираємо кістяк, переіменовуємо по черзі кожен рівень (рядок)

МодульнийІнфобокс06

Заповнення рядків у тілі конструктора.

3.
Увага
Порада. Щоб не збитися, рядки краще в конструкторі заповнювати зверху - донизу, а перейменовувати (в редакторі вихідного коду) в порядку знизу - вгору.

Звертати увагу на те, щоб назва рядка була з великої літери і переноси виконувалися коректно.

МодульнийІнфобокс07

Перейменування рядків у редакторі вікі-коду

4. Якщо потрібно зкорегувати перенос, це робиться в тезі <label>, при цьому в тезі data source слово пишеться без переносу.

Всі символи, як вони написані у data source, повинні в точністю співпадати і в написанні у рядку, який копіюється знизу шаблона для вставляння в текст статті (із врахуванням регістрів).


Копіюємо і заповнюємо (приклад)
{{Хірой
|Ім'я = Василь Стецько
|Зображення = [[Файл:КозакВасиль01.png|thumb|380px]]
|Підпис1 = Перший хлопець на Січі
|Інші імена, чи прізвиська, чи псевдо= Васько Характерник<br/>Вовк Чубай
|Дата і місце народження= 1613, Умань, Черкасської губернії
|Громадянство = Вільний козак Запорізької Січі
|Галактика = Чумацький шлях
|Планета = Земля
|Країна = Російська імперія<br />СРСР<br /> Україна
|Підрозділ = 3 курінь <br /> коша Омелька <br /> сотні Грицька Нечеси
|Сім'я = '''Батько''' Іван Стецько<br /> '''Мати''' Марія
|Відносини = Катруся — наречена
|Титул = Курінний козак
|Військове (наукове) звання = Немає<br/> Побратими вважають характерником
|Освіта = 
|Спеціальність = 
|Нагороди = 
|Улюблена зброя = Шабля
|Улюблена техніка = В останні роки ЗАЗ-969М з правим кермом
|Особливості зовнішнього вигляду = Червоні шаровари і люлька за поясом чи в роті
|Особливості поведінки = Стрімкий, проте рішення приймає виважено
|Статус = Живий
|З'являється в серіях = 3-6
|З'являється в іграх = Козаки-3
|Примітки = Може обертатися на вовка, рись чи вепра
}}
Отримуємо


Приклади інфобоксівРедагувати

Ось приклади робочих і красиво оформлених инфобоксов:

Виноски Редагувати

  1. Назву обрано, щоб не виникало потреби у подібній дійсно в статтях; для прикладу. Так само для прикладу іменовано рядки і групи шаблона.


de:Hilfe:Infoboxenes:Ayuda:Infoboxes

fi:Ohje:Tietolaatikot fr:Aide:Infoboxes it:Aiuto:Іnfobox ja:ヘルプ:インフォボックス pl:Pomoc:Infoboksy pt:Ajuda:Infoboxes vi:Trợ giúp:Hộp thông tin zh:Help:訊息框

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.