Это краткий курс по основам тем Discourse. Целевая аудитория — все, кто не знаком с темами Discourse. Если вы уже использовали темы или компоненты тем Discourse, этот гайд, вероятно, вам не нужен.
Что такое темы и компоненты тем?
Тема или компонент темы — это набор файлов, упакованных вместе, предназначенных либо для визуальной модификации Discourse, либо для добавления новых функций.
Начнем с тем.
Темы
Как правило, темы не предназначены для совместного использования, поскольку по сути они представляют собой разные автономные дизайны. Представьте себе темы как скины или как лаунчеры на Android. Вы можете установить несколько лаунчеров, но использовать два из них одновременно нельзя. По умолчанию ваша установка Discourse поставляется с двумя темами: Foundation и Horizon.
Foundation — это чистый, классический вид Discourse, в то время как Horizon предлагает более современный дизайн с несколькими цветовыми палитрами на выбор (например, Horizon, Royal, Clover, Lily, Violet и Marigold — каждая со светлым и темным вариантом).
По умолчанию
и темная версия
Допустим, этого вам недостаточно, и вы хотите БОЛЬШЕ. Что ж, вы можете довольно легко установить дополнительные темы. Вот несколько примеров бесплатных тем, доступных здесь, на Meta.
Персональный «минималистичный» дизайн списка тем от Sam’a
Как вы видите, ваш сайт может выглядеть совершенно иначе в зависимости от выбранной темы; однако на этом возможности не заканчиваются. Помимо тем, Discourse также поддерживает компоненты тем.
Компоненты тем
Мы используем термин «компонент темы» для описания пакетов, которые больше ориентированы на настройку одного аспекта Discourse. Благодаря своей узкой специализации компоненты тем почти всегда совместимы друг с другом. Это означает, что вы можете запустить несколько компонентов тем одновременно под любой темой. Вы можете рассматривать компоненты тем как приложения на вашем телефоне.
Как всегда, примеры — лучший способ что-то описать, поэтому вот несколько примеров компонентов тем, доступных здесь, на Meta.
Этот компонент темы берет ваши существующие детали категории, включая название, описание и цвет, и генерирует баннер в верхней части соответствующих страниц категории.
Этот компонент темы добавляет дополнительный верхний заголовок для брендинга с вашим логотипом, ссылками навигации и социальными иконками как для мобильных, так и для настольных версий. Логотип бренда может быть изображением или текстом.
Как вы видите, компоненты тем имеют гораздо более узкую специализацию. Таким образом, в большинстве случаев они совместимы друг с другом. Теперь у вас есть общее представление о том, что такое темы и компоненты тем Discourse. Давайте копнем немного глубже.
Интерфейс тем Discourse
Давайте посмотрим на интерфейс тем. Перейдите на your.site.com/admin/customize/themes, и вы должны увидеть что-то вроде этого:
Это интерфейс тем по умолчанию в Discourse. Здесь вы можете сделать многое:
- Установить тему по умолчанию
- Выбрать темы, доступные для ваших пользователей
- Создавать новые темы и компоненты тем
- Импортировать новые темы и компоненты тем
- Добавлять компоненты тем в тему
- Изменять цветовые схемы
- Изменять настройки темы
- Предварительный просмотр темы
Давайте пройдемся по ним по порядку.
Установка темы по умолчанию
Маленькая галочка рядом с названием темы по умолчанию указывает на то, что это активная тема на вашем сайте.
Теперь давайте изменим активную тему на темную. Нажмите на тему Dark, и вы увидите следующее:
Активная тема на вашем сайте будет установлена как Dark. Это означает, что каждый, кто посетит ваш сайт, увидит это:
И галочка переместится рядом с названием темы Dark, указывая на то, что она является активной.
Выбор тем, доступных для ваших пользователей
Быть able установить тему для своего сайта — это хорошо, но что еще лучше? Позволить вашим пользователям решать. Discourse позволяет вам предлагать разные темы вашим пользователям, позволяя им устанавливать тему в соответствии с их предпочтениями. Их выбор ограничен их собственной учетной записью и не повлияет на выбор активной темы или выбор других пользователей.
Например, вы можете установить активную тему по умолчанию (светлую), но предложить темную тему в качестве опции. Давайте попробуем сделать это сейчас. В интерфейсе тем.
Все активные темы, которые у вас есть, будь то тема по умолчанию, установленная на вашем сайте, или любые темы, которые вы отметили как выбираемые пользователями, будут отображаться здесь:
Однако только тема по умолчанию будет иметь зеленую галочку.
Теперь давайте попробуем сделать тему Red выбираемой для пользователей, например.
Все, что вам нужно сделать, это нажать на нее, а затем поставить галочку в поле «Тема может быть выбрана пользователями».
Вот и все! Вы заметите, что она автоматически перемещается из списка неактивных тем в список активных тем.
И ваши пользователи смогут выбрать любую тему, которая им нравится, перейдя по адресу
your.site.com/my/preferences/interface
Создание новых тем и компонентов тем
Чтобы создать новую тему или компонент темы, нажмите одну из двух кнопок «Установить».
Затем появится диалоговое окно. Выберите опцию «Создать новое» в левом меню. Вам нужно будет предоставить имя для того, что вы хотите создать, и решить, является ли это темой или компонентом темы.
Мы вкратце охватили основы того, что такое темы и компоненты тем. Если вы помните, компонент темы обычно сфокусирован на модификации одной области Discourse. В то время как тема обычно охватывает множество вещей. Вы также должны отметить, что тема может иметь любое количество компонентов тем под собой, в то время как компонент темы не может. Не беспокойтесь об этом сейчас, более подробное объяснение этих отношений последует позже.
Теперь скажем, вы решили с именем и решили сделать это темой. Что ж, как только вы нажмете кнопку «Создать», тема будет создана, и вы сможете
- Изменить название темы / компонента темы
- Установить или изменить цветовую схему для темы
- Добавить html / css / js в тему / компонент темы
- Добавить файлы или загрузки в тему
- Добавить дочерние компоненты в свою тему
Конкретные настройки выходят за рамки этого руководства, поэтому на этом я остановлюсь.
Интерфейс для добавления html / css / js выглядит так (после того, как вы нажмете на пункт 3 выше)
Импорт новых тем и компонентов тем
У нас уже есть руководство по импорту тем, но я включаю сюда информацию о том, как это сделать, поскольку это руководство должно охватывать все основы.
Чтобы импортировать тему или компонент темы, нажмите одну из двух кнопок «Установить».
Раздел «Популярные» позволит вам просмотреть/установить список наших самых популярных тем и компонентов.
Вы также можете импортировать файлы тем со своего устройства или по ссылке на репозиторий тем. Ссылка на репозиторий для каждой темы предоставляется автором в теме темы. После импорта темы к ней применяются все обсуждавшиеся ранее возможности. Вы можете установить ее по умолчанию, сделать выбираемой пользователями и так далее.
Если вы импортируете компонент темы, вы также можете добавить его в любую из своих тем. Это подробно рассматривается в следующем разделе.
Добавление компонентов тем в тему
Допустим, вам нравится компонент темы баннеров категорий Discourse, и вы хотите его использовать. Вы должны действовать следующим образом:
- импортировать тему из репозитория, как мы обсуждали выше;
- добавить ее как компонент темы в ваши активные / выбираемые пользователями темы.
Вы можете сделать это так:
После импорта компонента перейдите к теме, в которую вы хотите его добавить, и найдите раздел «Включенные компоненты».
Этот список покажет все установленные компоненты тем. Оттуда вы можете добавлять компоненты тем в тему. Добавление компонента Versatile Banner будет выглядеть так:
Аналогичная опция «Включить компонент в эти темы» существует на странице отдельного компонента. Это позволяет добавлять компонент в несколько тем одновременно.
Вот и все. Баннеры категорий Discourse теперь являются активным компонентом темы по умолчанию. Если вы также хотите добавить его в тему Dark, вам нужно повторить процесс добавления компонента темы для темы Dark.
Если вы установили тему Dark как выбираемую пользователем и добавили компонент темы баннеров категорий Discourse в нее, пользователи, которые выбирают тему Dark в качестве активной, также получат компонент темы баннеров категорий Discourse, поскольку он является «дочерней темой» для темы Dark.
Вы можете иметь неограниченное количество компонентов тем под одной темой, и, как мы обсуждали ранее, они обычно совместимы друг с другом. Поэтому вы можете сделать что-то вроде этого:
И все эти компоненты будут активны в теме по умолчанию одновременно.
Изменение цветовых схем
Цветовая схема — это палитра цветов, которую вы выбираете для генерации цвета элементов в теме. Я не буду вдаваться в подробности, а покажу вам, как использовать цветовые схемы.
Перейдите на your.site.com/admin/customize/colors, и вы увидите
Отсюда вы можете редактировать цветовые схемы или создавать новые. Чтобы отредактировать цветовую схему, нажмите на нее и измените цвета по своему вкусу.
Чтобы создать новую цветовую схему, нажмите здесь.
Когда вы закончите изменение цветов, теперь пора установить цветовую схему как активную в вашей активной или выбираемой пользователями теме. Для этого перейдите на страницу темы и найдите здесь.
Настройки темы
Темы Discourse могут иметь настройки. Эти настройки предназначены для того, чтобы быть простым способом настройки темы или компонента темы в соответствии с вашими потребностями. Например, в теме Discourse Button Styles есть несколько настроек, позволяющих легко настроить внешний вид кнопок, просто изменив несколько значений по своему вкусу.
Не все темы / компоненты тем имеют настройки, но для тех, у которых они есть, они всегда будут отображаться здесь. Настройки обычно включают инструкции, предоставленные автором, которые помогут вам определить, какие изменения необходимо внести.
Предварительный просмотр темы
Иногда вам нужно увидеть, как тема выглядит на вашем сайте, прежде чем применять ее. Discourse предлагает простой способ предварительного просмотра тем без их активации.
Находясь на странице темы, нажмите здесь.
и откроется новая вкладка с живым предварительным просмотром того, как тема будет выглядеть на вашем сайте. Вы можете переходить на разные страницы и смотреть, как все выглядит.
лучшая часть предварительного просмотра темы в том, что вы можете тестировать изменения в реальном времени, не вызывая никаких проблем на вашем сайте, если что-то пойдет не так.
Дополнительная информация
Безопасный режим
В Discourse есть встроенный способ обойти текущую активную тему на случай, если что-то пойдет не так. Например, ошибка JavaScript в коде компонента может привести к тому, что ваш сайт перестанет работать правильно. Чтобы обойти текущую активную тему, просто посетите
your.site.com/safe-mode
Затем вы увидите
оттуда вы можете отключить текущую активную тему, перейти на страницу темы и либо исправить проблему, либо полностью отключить тему.
Получение новых тем
Самый простой способ найти новые темы и компоненты тем — проверить категорию Customization > Theme здесь, на Meta.
Дополнительное чтение
Designer's Guide to getting started with themes in Discourse
Developing Discourse Themes & Theme Components
Using Safe Mode to troubleshoot issues with themes and plugins
Structure of themes and theme components
Create and share a font theme component
Create and share a color scheme
Use Discourse Core Variables in your Theme
Add settings to your Discourse theme
Theme Creator, create and show themes without installing Discourse!
Если у вас есть вопросы, не стесняйтесь спрашивать.