Это краткий курс по основам тем Discourse. Целевая аудитория — все, кто не знаком с темами Discourse. Если вы уже использовали темы или компоненты тем Discourse, вам, вероятно, не нужно читать это руководство.
Что такое темы и компоненты тем?
Тема или компонент темы — это набор файлов, упакованных вместе, предназначенных для визуального изменения Discourse или добавления новых функций.
Начнем с тем.
Темы
Как правило, темы не должны быть совместимы друг с другом, поскольку по сути представляют собой разные самостоятельные дизайны. Рассматривайте темы как скины или лаунчеры в Android. Вы можете установить несколько лаунчеров, но не можете использовать два из них одновременно. Ваша стандартная установка Discourse поставляется с двумя темами: Foundation и Horizon.
Foundation — это чистый, классический вид Discourse, в то время как Horizon предлагает более современный дизайн с несколькими цветовыми палитрами на выбор (такими как Horizon, Royal, Clover, Lily, Violet и Marigold — каждая со светлой и темной вариациями).
Foundation
и Horizon
Допустим, этого вам недостаточно, и вы хотите БОЛЬШЕ. Что ж, вы можете довольно легко установить дополнительные темы. Вот несколько примеров бесплатных тем, доступных здесь на Meta.
Личный «минималистичный» дизайн списка тем от Сэма
Как вы можете видеть, внешний вид вашего сайта может кардинально меняться в зависимости от выбранной темы; однако это еще не все. Помимо тем, Discourse также поддерживает компоненты тем.
Компоненты тем
Мы используем термин «компонент темы» для описания пакетов, которые больше ориентированы на настройку одного аспекта Discourse. Благодаря узкой направленности компоненты тем почти всегда совместимы друг с другом. Это означает, что вы можете использовать несколько компонентов тем одновременно в рамках любой темы. Вы можете представлять компоненты тем как приложения на вашем телефоне.
Как всегда, примеры — лучший способ что-то описать, поэтому вот несколько примеров компонентов тем, доступных здесь на Meta
Этот компонент темы берет ваши существующие детали категории, включая название, описание и цвет, и генерирует баннер в верхней части соответствующих страниц категорий.
Компонент темы с брендовым заголовком
Этот компонент темы добавляет дополнительный верхний заголовок для брендинга с вашим логотипом, навигационными ссылками и значками социальных сетей для мобильных и настольных видов. Логотип бренда может быть изображением или текстом.
Как вы можете видеть, компоненты тем имеют гораздо более узкую направленность. Таким образом, в большинстве случаев они совместимы друг с другом. Теперь у вас есть общее представление о том, что такое темы и компоненты тем Discourse. Давайте копнем немного глубже.
Интерфейс тем Discourse
Давайте посмотрим на интерфейс для тем. Перейдите по адресу your.site.com/admin/customize/themes, и вы должны увидеть что-то вроде этого:
Это стандартный интерфейс тем в Discourse. Здесь вы можете сделать следующее:
- Установить тему по умолчанию
- Выбрать, какие темы будут доступны вашим пользователям
- Создавать новые темы и компоненты тем
- Импортировать новые темы и компоненты тем
- Добавлять компоненты тем к теме
- Изменять цветовые палитры
- Менять настройки темы
- Просматривать тему
Давайте разберем их по порядку.
Установка темы по умолчанию
Вы можете увидеть значок, указывающий, что тема установлена по умолчанию:
Теперь давайте изменим активную тему на Horizon. Вы можете сделать это через меню кнопки … или, щелкнув название темы и выбрав флажок на странице настроек:
Активная тема на вашем сайте будет установлена на Horizon. Это означает, что все, кто посещает ваш сайт, увидят следующее:
Выбор тем, доступных вашим пользователям
Хорошо иметь возможность установить тему для вашего сайта, но знаете, что еще лучше? Позволить вашим пользователям решать. Discourse позволяет вам предлагать разные темы вашим пользователям, позволяя им устанавливать тему в соответствии со своими предпочтениями. Их выбор ограничен их собственной учетной записью и не влияет на ваш выбор активной темы или выбор других пользователей.
Например, вы можете установить активную тему на тему по умолчанию (Horizon), но предложить тему Foundation в качестве варианта. Давайте попробуем сделать это сейчас в интерфейсе тем.
Все, что вам нужно сделать, это щелкнуть кнопку меню …, а затем выбрать «Разрешить пользователям выбирать»
Вот и все! Теперь у нее появится значок «выбираемый пользователем»
и ваши пользователи смогут выбрать любую тему, которая им нравится, перейдя по адресу
your.site.com/my/preferences/interface
Создание новых тем и компонентов тем
Чтобы создать новую тему или компонент темы, щелкните кнопку «Установить»
Затем появится диалоговое окно. Выберите вариант «Создать новый» в меню. Вам нужно будет указать название того, что вы хотите создать, и решить, является ли это темой или компонентом темы.
Мы в некоторой степени охватили основы того, что такое темы и компоненты тем. Если вы помните, компонент темы обычно сосредоточен на изменении одной области Discourse. В то время как тема обычно охватывает несколько вещей. Также следует отметить, что у темы может быть любое количество компонентов тем, в то время как у компонента темы — нет. Не беспокойтесь об этом сейчас, более подробное объяснение этих отношений будет приведено позже.
Теперь допустим, вы решили название и решили сделать это темой. Что ж, как только вы нажмете кнопку «Создать», тема будет создана, и тогда вы сможете
- Изменить название темы / компонента темы
- Установить или изменить цветовую палитру для темы
- Добавить дочерние компоненты к вашей теме
- Добавить html / css / js к теме / компоненту темы
- Добавить файлы или загрузки к теме
Конкретные настройки находятся за пределами этого руководства, поэтому я остановлюсь на этом пункте.
Интерфейс для добавления html / css / js выглядит следующим образом (после щелчка по #4 выше)
Импорт новых тем и компонентов тем
У нас уже есть руководство по импорту тем, но я включил, как это сделать, сюда, поскольку это руководство должно охватывать все основы.
Чтобы импортировать тему или компонент темы, нажмите кнопку «Установить»
Раздел «Популярные» позволит вам просматривать/устанавливать из списка наших самых популярных тем и компонентов.
Вы также можете импортировать файлы тем с вашего устройства или через ссылку на репозиторий тем. Ссылка на репозиторий для каждой темы предоставляется автором в теме о теме. После импорта темы к ней будут применяться все вещи, о которых мы говорили ранее. Вы можете установить ее по умолчанию, сделать выбираемой пользователем и так далее.
Если вы импортируете компонент темы, вы также можете добавить его к любой из ваших тем. Это подробно рассматривается в следующем разделе
Добавление компонентов тем к теме
Допустим, вам нравится компонент темы баннеров категорий Discourse, и вы хотите его использовать. Вы будете действовать следующим образом
- импортировать тему из репозитория, как мы обсуждали выше
- добавить его как компонент темы к вашим активным / выбираемым пользователем темам
Вы можете сделать это так:
После импорта компонента перейдите к теме, к которой вы хотите его добавить, и найдите раздел «Включенные компоненты»
Этот список покажет все установленные компоненты тем. Оттуда вы можете добавлять компоненты тем к теме. Добавление компонента Homepage Feature будет выглядеть так
Аналогичный вариант «Включить компонент в эти темы» существует на странице отдельного компонента. Это позволяет вам добавить компонент к нескольким темам одновременно
Вот и все. Homepage Feature теперь является активным компонентом темы по умолчанию. Если вы также хотите добавить его к другой теме, вы повторите процесс добавления компонента темы.
Если вы установили тему Foundation как выбираемую пользователем и добавили к ней компонент темы Homepage Feature, пользователи, выбирающие тему Foundation в качестве своей активной темы, также получат компонент темы Homepage Feature, поскольку он является «дочерней темой» темы Foundation.
У темы может быть неограниченное количество компонентов тем, и, как мы обсуждали ранее, они обычно совместимы друг с другом. Так что вы можете сделать что-то вроде этого:
И все эти компоненты будут активны в теме одновременно.
Изменение цветовых палитр
Цветовая палитра — это набор цветов, которые вы выбираете для генерации цветов элементов в теме. Я не буду вдаваться в много деталей здесь, но покажу вам, как использовать цветовые палитры.
Перейдите по адресу your.site.com/admin/config/colors, и вы увидите
Отсюда вы можете редактировать цветовые палитры или создавать новые. Чтобы редактировать цветовую палитру, щелкните по ней и измените цвета по своему вкусу
Чтобы создать новую цветовую палитру, щелкните здесь
Когда вы закончите изменение цветов, пришло время установить цветовую палитру как активную в вашей активной или выбираемой пользователем теме. Для этого перейдите на страницу темы и посмотрите здесь
Настройки темы
n
Темы Discourse могут иметь настройки. Эти настройки предназначены для того, чтобы вы могли легко настраивать тему или компонент темы в соответствии с вашими потребностями. Например, компонент темы Homepage Feature имеет несколько настроек для управления тем, какие темы выделяются:
Не у всех тем / компонентов тем есть настройки, но для тех, у которых они есть, они всегда будут отображаться здесь. Настройки обычно будут включать инструкции, предоставленные автором, которые помогут вам определить, какие изменения необходимо внести.
Предпросмотр темы
Иногда вам нужно увидеть, как тема выглядит на вашем сайте, прежде чем применять ее. Discourse предлагает простой способ предварительного просмотра тем, не устанавливая их как активные.
Находясь на странице темы, щелкните здесь
и откроется новая вкладка с живым предварительным просмотром того, как тема будет выглядеть на вашем сайте. Вы можете переходить на разные страницы и смотреть, как все выглядит. Лучшая часть предварительного просмотра темы заключается в том, что вы можете тестировать изменения в реальном времени, не вызывая никаких проблем на вашем сайте, если что-то пойдет не так.
Дополнительная информация
Безопасный режим
В Discourse есть встроенный способ обхода текущей активной темы, если что-то пойдет не так. Например, ошибка JavaScript в коде компонента может привести к неправильной работе вашего сайта. Чтобы обойти текущую активную тему, просто посетите
your.site.com/safe-mode
Затем вы увидите
оттуда вы можете отключить текущую активную тему, перейти на страницу темы и либо исправить проблему, либо отключить тему навсегда.
Получение новых тем
Самый простой способ найти новые темы и компоненты тем — проверить категории Customization > Theme и Customization > Theme component здесь на 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!
Если у вас есть какие-либо вопросы, не стесняйтесь задавать их.