Как создать оформление для вики

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

Начните с конструктора тем[]

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

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

Понимание двух тем[]

С 2021 года появилась возможность создавать две темы для вики — светлую и тёмную. Многие не понимают, насколько важно создать правильно настроенные темы.

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

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

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

Настройка[]

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

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

PCraft background — Фон Potion Craft вики

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

Темы и CSS[]

Далее можно переходить к использованию CSS. И тут встаёт вопрос — как настроить элемент под обе темы? Для этого в теге <body> находится класс theme-fandomdesktop-light|dark соответственно. Чтобы применить правило только к нужной вам теме, добавьте его в начало набора селекторов:

.theme-fandomdesktop-light p {
  color: black; /*чёрный цвет текста в светлой теме*/
}

.theme-fandomdesktop-dark p {
  color: white;  /*белый цвет текста в тёмной теме*/
}

Переменные[]

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

p {
  color: var(--theme-page-text-color);
}

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

Шаблоны[]

Лично в моём опыте создании вики между настройкой тем и написанием статей лежит создание шаблонов и их дизайна. Намного приятнее писать готовые статьи с конечным дизайном и сразу видеть всю полноту картины. Поэтому можно заняться дизайном инфобоксов и необходимых шаблонов. Я буду описывать свои привычные методы работы на игровых вики. Для вики других порталов отличие будет лишь в отсутствии готовых вариантов оформления.

Инфобокс Инскрипшн — Инфобоксы на Inscryption вики

Для начала стоит присмотреться к дизайну игры. К её интерфейсу, например меню, к элементам внутри самой игры. Дизайн инфобоксов, приближенный к игровому интерфейсу, создаст особую атмосферу и комфортную обстановку для читателя. Если ваша игры написана на движке Unity, вы можете воспользоваться программой для извлечения игровых текстур и спрайтов. Это поможет вам не только в оформлении, но и в создании статей. Если этот вариант вам не подходит, вы всегда можете найти ресурсы из игры в её комьюнити. Например обратившись к людям, работающим с модификацями к игре. Также будет хорошим вариантов взять игровой шрифт для использования его в заголовках инфобокса.

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

Показать стили

.portable-infobox {
    border: 5px solid #0000;
    border-image-source: url('https://static.wikia.nocookie.net/inscryption/images/a/a3/Инфобокс_рамка.png/revision/latest?cb=20220205192204&format=original&path-prefix=ru');
    border-image-slice: 6;
    border-image-repeat: round;
    position: relative;
    background-color: #ffe3bb;
    background-image: url(https://cdn.discordapp.com/attachments/647158963804307458/1008378554184122480/card_terrain_emptghjky_1.png);
    background-size: 330px;
    background-position: center;
    background-blend-mode: multiply;
}

#content .portable-infobox .pi-title {
    background: none;
    font-family: 'HEAVYWEIGHT', serif;
    font-size: 30px;
    line-height: 28px;
    font-weight: 500;
}

#content .portable-infobox .pi-header {
    background-color: #0000;
    font-family: 'HEAVYWEIGHT', serif;
    font-size: 20px;
    line-height: 18px;
    font-weight: 100;
    background-image: url('https://static.wikia.nocookie.net/inscryption/images/6/69/Инфобокс_заголовок.png/revision/latest?cb=20220205192236&format=original&path-prefix=ru');
    background-size:900px;
    background-repeat: no-repeat;
    background-position: center;
}

.portable-infobox:after {
    content: url('https://static.wikia.nocookie.net/inscryption/images/3/3f/Инфобокс_лапа.png/revision/latest?cb=20220205192119&format=original&path-prefix=ru');
    position: absolute;
    bottom: -12px;
    left: 20px;
}

.portable-infobox section.pi-item:last-child .pi-item.pi-data:last-child {
    padding-bottom: 30px;
}

.portable-infobox .pi-item.pi-data {
    border-top: 10px solid #0000;
    border-image-source: url('https://static.wikia.nocookie.net/inscryption/images/3/38/Инфобокс_рамка_низ.png/revision/latest?cb=20220205192311&format=original&path-prefix=ru');
    border-image-slice: 20;
}

.pi-image {
    margin-top: 10px;
}

.portable-infobox .wds-tabs__tab-label {
    text-transform: uppercase;
}

.theme-fandomdesktop-dark .portable-infobox {
    background-color: #8b6e9c;
}

.type-card .pi-image img {
    width: 90%;
    height: auto;
}
/*Привет. Я съел булочку.*/

DD templates example — Шаблон, оформленный спомощью таблицы

Другие шаблоны оформляются ситуативно. Могу рассказать лишь об одной хитрости — использовании таблиц. Кастомная таблица без каких-либо классов сайта (wikitable/article-table) может быть переоформлена почти во что угодно. При этом в мобильном скине она будет отображаться строго как таблица, что позволит адаптировать вики к мобильному скину.

Заглавная[]

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

Обычно заглавная состоит из нескольких блоков левой и правой колонки. В левом блоке пишется приветственная часть, навигация и дополнительные желаемые элементы. В правую колонку можно добавить соцсети, новости вики или сообщества, список блогов и многое другое. Для создания непосредственно дизайна можно также использовать элементы игры или просто красивые блоки. Самой распространённой ошибкой является вёрстка заглавной на таблицах. Хоть это никак не влияет на внешний вид и не доказано пагубное влияние на производительность, это является плохой практикой. Таблицы необходимо использовать для записи данных, а не для создания дизайна. В оформлении лучше использовать такие теги HTML как <div> и <span>. Кроме этикета, они более гибкие чем таблицы, что расширяет потенциал заглавной.

Добавьте отступы и фон общего блока, в котором будут находиться все остальные блоки. Рекомендую использовать переменную --theme-page-background-color--secondary для фона. При желании можно задать блоку рамку. Далее необходимо продумать дизайн заголовков. Можно взять красивый шрифт и увеличить его размер, чтобы заголовки выделялись на общем фоне. Основным элементом заглавной должна являться навигация. Она должна быть аккуратно оформлена и быть удобной в использовании. Можно использовать стандартную связку изображение + ссылка, заключённые в оформленный блок. Так как создание заглавной очень обширная тема, здесь мы не будем рассматривать её подробно.

JS[]

Помочь с оформлением вики также могут скрипты JS. Вот краткий список полезных скриптов:

DiscordChat — добавляет аккуратный виджет Discord в правую колонку.
Tooltips — позволяет создавать гибкие подсказки по наведению на элемент.
DiscussionsRailModule — выности в правую колонку активные темы из обсуждений.
Selector — создаёт кнопки-переключатели.

Заключение[]

В заключении хотелось бы дать несколько советов как новичкам, так и опытным участникам.

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