Инфобоксы используются на подавляющем большинстве википроектов. С их помощью можно кратко рассказать читателю о предмете статьи, выделить ключевую информацию, создать единое оформление вики.
ФЭНДОМ предлагает вам другой способ разметки инфобоксов. При её использовании, ваши инфобоксы будут корректно отображаться на любом устройстве, будь то широкоэкранный монитор или небольшой экран смартфона.
Вы можете добавить инфобокс в статью так же, как и любой другой шаблон, через инструменты редактора или черезисходный код. ВВизуальном редактореинфобоксы добавляются через выпадающее меню «Вставить», где нужно выбрать пункт «Инфобокс».
В исходном коде вам нужно вставить соответствующий код, который обычно располагается в документации к шаблону, и заполнить необходимые поля после знака «равно» (=) соответствующей информацией.
电子邮箱：InfoboxBuilder。Этот интерактивный инструмент позволит вам собрать инфобокс из наиболее распространённых элементов — таких как изображения, разделы, строки. Просто добавляйте и перетаскивайте элементы в том порядке, который нравится вам. Кликнув на каждый элемент, вы увидите подробную информацию о нём и те параметры, которые можете настроить вы.
Чтобы перейти в редактор исходного кода, кликните на[ ]в правом нижнем углу.
Редактирование кода[]
Инфобокс представляет собой набор простых тегов внутри общего тега<infobox></infobox>. Например, любая строка внутри инфобокса задаётся следующим образом:
Комбинируя эти теги, можно создать инфобокс с любыми значениями. В качестве примера создадим простой инфобокс, который можно увидеть на картинке справа. Код для него выглядит следующим образом:
Разместите этот код на страницеШаблон:Персонаж, и инфобокс готов! Чтобы использовать его, вызовите соответствующее диалоговое окно вВизуальном редакторе, а в режиме Исходного кода шаблон будет выглядеть так же, как при использовании классического инфобокса:
Инфобоксы могут использовать два стиля отображения данных:
По умолчанию данные в строках располагаются в двух колонках: заголовок слева, значение справа.
ЕсЛиркоДинфобоксаДотабаавитраеатимарбуДуутоТоакттсткеуаосетеесбеменаГанкаиснебтуиамтнтмрерт。Этот стиль подходит, если у вас длинный текст в строке.
Инфобокс по умолчанию
ИнфобокссостиЛем“堆叠”
Пользовательские стили[]
Обычные стили инфобоксов можно заменить двумя способами.
ВО-nерВх，ВамоетемеаоДккааиттренмуДатинфобоксав«Europa»ВWikiFeatures。Это расширение автоматически применит цветовую гамму, настроенную черезКонструктор тем.
Цвета названий и фона заголовков могут быть изменены с помощью функции акцентирования цветов. Как и в случае主题来源, цвет — это значение параметра шаблона, которое указывается через重音-彩色源для фона и重音-彩色-文本源для текста.
Например, если в шаблоне инфобокса указаноaccent-color-source=“bkg”и в инфобоксе статьи прописаноbkg=#FFF。ВсеетаДоланабтеукааинтраттуаонрформаТеHEX（тоесткк#FFFили#FFFFFFFFF），ииоиаросТоаебуутиркбот。
Акцентные цвета заменят собой все другие цвета: цвета по умолчанию и даже цвета, указанные через атрибут主题.
Сюда также включён параметр для цвета по умолчанию, и поэтому использованиеaccent-color-default=“#FFF”проставит цвет для всех названий и фона заголовков, аaccent-color-text-default=“#000000”六角螺母。
Все элементы инфобокса имеют атрибут来源、数据属性data-source=“ATK”. Это позволяет прописать его в CSS или JS как.pi-item[数据源=ATK], чтобы задать ему определённый стиль. В комбинации с类型это даёт возможность отказаться от выбора стиля типа第n种类型и открывает дополнительные возможности для стилизации инфобоксов.
Эти параметры позволяют указывать любые элементы инфобокса, вне зависимости от того, принимают ли они входящий параметр или нет, включая атрибуты для<标题>,<组>,<数据>,<标题>,<图像>и<导航>. Как и в случае数据源, можно использовать<data name=“bar”>, чтобы указать конкретный элемент инфобокса.pi-item[数据项名称=条].
Добавление видео[]
В инфобокс можно добавить видеоролик. Для этого используйте тот же тег, что и для вставки изображения. Видео в инфобоксе будет представлено как картинка со значком воспроизведения.
Дополнительные теги[]
Группировка[]
Инфобоксы могут выглядеть по-разному и не всегда можно обойтись простым набором строк. “集团”。Пример такого инфобокса и кода можно увидеть ниже:
Использование стиляshow=“未完成”позволяет отображать обе колонки, даже если вторая или первая колонка пустые. Однако если обе строки останутся незаполненными, то этот блок инфобокса не будет отображаться.
Дополнения к переменным[]
В некоторых случаях к переменным внутри инфобокса нужно добавить некую общую информацию. Это может быть значение или цена переменной (кг, метр, секунда, рубли и пр.), иконка, шаблон, ссылка.
Необязательно, чтобы группы отображались вертикально. Поля групп можно выставить по горизонтали, и названия с содержимым строк будут показываться в виде столбцов. Для этого просто нужно добавить атрибутlayout=“水平”“组”。Пример:
Если горизонтальный макет заставляет секции инфобокса отображаться горизонтально, умный макет позволяет строкам заполнять инфобокс по ширине автоматически. Когда количество полей достигает предела, то следующее поле переносится на новую строку.
Чтобы использовать умные группы, добавьтеrow-items=“2”(или любую другую цифру, чтобы установить предел количества полей). Все поля в умных группах используют горизонтальный макет, поэтому указывать его необязательно. Тем не менее, вы можете смешивать горизонтальный и вертикальный макеты в умных группах (см. скриншот)): для этого вам нужно добавить атрибутlayout=“默认”к каждому тегу<数据>.
Чтобы каждое поле с данными занимало больше одной строки, используйте атрибутspan=“2”в теге<数据>.
Группы можно сделать сворачивающимися, если добавить или塌陷=“打开”, или塌陷=“关闭”к тегу группы. На заголовок в этом случае можно будет кликнуть, чтобы развернуть или свернуть группу, а сама группа после загрузки страницы отобразится развернутой или свернутой соответственно.
Примечание: заголовок должен следовать сразу же после открывающего тега группы.
Вкладки для содержимого инфобокса[]
Внутри элементов инфобокса можно использовать вкладки, чтобы, при необходимости, добавить больше информации внутрь одного инфобокса. 屏。
Внутри тега<面板>можно размещать стандартные теги инфобоксов, группируя их с помощью тега<章节>. Название секции определяется тегом<标签>. Например, для инфобокса на изображении справа, участок кода с вкладками будет выглядеть, примерно, следующим образом:
