Настройте брендирование вашего сайта

:bookmark: Это нетехнический учебник, который проведет вас через процесс настройки брендинга и внешнего вида вашего сайта Discourse.

:person_raising_hand: Требуемый уровень доступа: Администратор

Хотите настроить брендинг своего сайта, но не знаете, с чего начать? Читайте дальше, чтобы узнать больше!

Мастер настройки

Discourse обладает широкими возможностями настройки! Хорошее место для начала настройки сайта — войти в учетную запись администратора на сайте и запустить мастер настройки сайта. :mage:

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

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

Вы можете просмотреть доступные варианты прямо на этой странице. Нажмите кнопку «Далее», когда найдете подходящие настройки. Не волнуйтесь, вы всегда сможете изменить эти настройки позже, если решите, что они вас не устраивают.

Темы сайта

После того как базовая конфигурация настроена, пришло время еще больше персонализировать ваш сайт! :sparkles:

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

Категория #theme на Meta содержит множество заранее созданных тем, которые вы можете использовать на своем сайте для настройки его внешнего вида. Это лучшее место для поиска темы для вашего сайта. Выберите тему, которую вы хотите использовать для своего сайта, из этой категории.

После того как вы определились с темой для своего сайта, вы можете добавить её на сайт со страницы Администрирование -> Настройка -> Темы (расположена по адресу /admin/config/customize/themes). На этой же странице вы можете вносить изменения в тему вашего сайта или даже создать совершенно новую тему.

Руководство для начинающих по использованию тем Discourse — это интенсивный курс по основам тем Discourse, который дает обзор того, как устанавливать темы на ваш сайт Discourse. Прочитайте это руководство, чтобы узнать, как установить выбранную вами тему.

:tipping_hand_woman: Дополнительную информацию о том, как использовать, создавать и делиться своими собственными темами, вы также найдете в:

Цветовые палитры

Вы можете дополнительно настроить свой сайт, изменив его цветовую палитру на странице Администрирование -> Конфигурация -> Цвета (расположена по адресу /admin/config/colors). :art:

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

Выберите существующую цветовую схему в качестве основы для вашей новой схемы, а затем настройте цвета вашей новой схемы, нажав на цвет рядом с каждым разделом цветов:

Не забудьте дать имя вашей новой цветовой схеме и сохранить изменения после завершения!

:tipping_hand_woman: Нужна помощь в выборе цветов? Инструмент для подбора цветов, такой как Paletton - The Color Scheme Designer, может быть очень полезен для этого!

Дополнительную информацию о том, как использовать цветовые палитры в Discourse, см. по ссылке:

Компоненты тем

Аналогично темам, в Discourse также есть «Компоненты тем», которые можно использовать для изменения поверхностных элементов дизайна вашего форума или добавления дополнительных функций фронтенда. Компоненты тем меньше и более целенаправленны, чем полные темы, и обычно (хотя и не всегда) могут комбинироваться с другими компонентами тем для создания уникального дизайна форума, адаптированного под ваше сообщество. :gear:

Категория #theme-component на Meta содержит все официальные и неофициальные компоненты тем Discourse. Изучите перечисленные там компоненты тем, и если вы хотите установить какой-либо из них на свой сайт, просто следуйте инструкциям здесь: Интерфейс тем Discourse и как установить компоненты тем

Некоторые из самых популярных компонентов тем Discourse включают:

:tipping_hand_woman: В Discourse также есть встроенный переключатель темной/светлой темы, управляемый настройкой сайта interface_color_selector, которую можно настроить так, чтобы переключатель отображался в подвале боковой панели или в заголовке.

:tipping_hand_woman: Тег theme-guides на Meta также содержит множество руководств с идеями по дальнейшей настройке вашего сайта с помощью компонентов тем.

Брендинг сайта

В Discourse есть выделенная страница настройки логотипа по адресу Администрирование -> Внешний вид -> Логотип (расположена по адресу /admin/config/logo), где вы можете управлять всеми логотипами и иконками вашего сайта.

  • Основной логотип — отображается в верхней навигации сайта, а также в верхней части уведомлений по электронной почте сайта. Рекомендуемый размер: 600 × 80 пикселей.
  • Основной логотип (темная тема) — альтернативная версия основного логотипа для темной темы. Рекомендуемый размер: 600 × 80 пикселей.
  • Квадратная иконка — квадратная версия изображения логотипа, отображаемая в верхней части сайта, а также являющаяся логотипом мобильного приложения. Рекомендуемый размер: 512 × 512 пикселей.
  • Favicon — логотип будет отображаться как иконка во вкладке браузера и в избранном/закладках браузера.
  • Маленький логотип — изображение маленького логотипа в верхнем левом углу вашего сайта, видимое при прокрутке вниз. Если оставить пустым, будет показан символ дома. Рекомендуемый размер: 120 × 120 пикселей.
  • Маленький логотип (темная тема) — альтернативная версия маленького логотипа для темной темы. Рекомендуемый размер: 120 × 120 пикселей.

В разделе Мобильные устройства:

  • Мобильный логотип — логотип, используемый в мобильной версии вашего сайта. Если оставить пустым, будет использоваться изображение из настройки logo. Используйте широкое прямоугольное изображение высотой 120 пикселей и соотношением сторон более 3:1.
  • Мобильный логотип (темная тема) — альтернативная версия мобильного логотипа для темной темы. Используйте широкое прямоугольное изображение высотой 120 пикселей и соотношением сторон более 3:1.
  • Иконка манифеста — изображение, используемое в качестве логотипа/заставки на Android. Если оставить пустым, будет использоваться large_icon. Рекомендуемый размер: 512 × 512 пикселей.
  • Скриншоты манифеста — скриншоты, демонстрирующие возможности и функциональность вашего экземпляра на странице запроса установки (показывается при использовании «Добавить на главный экран» на Android). Все изображения должны быть локальными загрузками и иметь одинаковые размеры.
  • Иконка Apple Touch — иконка, используемая для устройств Apple Touch. Если оставить пустым, будет использоваться large_icon. Рекомендуемый размер: 180 × 180 пикселей. Прозрачный фон не рекомендуется.

В разделе Электронная почта:

  • Логотип дайджеста — альтернативное изображение логотипа, используемое в верхней части сводки электронной почты вашего сайта. Если оставить пустым, будет использоваться изображение из настройки logo. Используйте широкое прямоугольное изображение. Не используйте изображения в формате SVG.

В разделе Социальные сети:

  • Изображение OpenGraph — изображение по умолчанию OpenGraph, используемое многими приложениями и платформами для предпросмотра веб-ссылок, когда у страницы нет другого подходящего изображения. Если оставить пустым, будет использоваться large_icon.
  • Большое изображение сводки X — большое изображение карточки X. Если оставить пустым, будут сгенерированы обычные метаданные карточки с использованием OpenGraph_image, при условии, что оно также не является .svg. Рекомендуемый размер: не менее 280 × 150 пикселей. Не используйте изображения в формате SVG.

:tipping_hand_woman: Для достижения наилучших результатов мы рекомендуем следовать указанным выше рекомендациям по размеру для каждого типа логотипа и иконки.

Дополнительные настройки

Теперь, когда вы добавили пользовательскую тему, цветовую палитру, несколько логотипов бренда и, возможно, несколько компонентов тем на свой сайт, вы завершили все базовые настройки сайта! :tada:

Если вы все еще ищете дополнительные способы настройки вашего сайта Discourse, мы рекомендуем ознакомиться с любыми из следующих тем, которые могут вас заинтересовать:

8 лайков

Итак, что именно делает Manifest screenshots? Где эти скриншоты используются? Это происходит, когда кто-то устанавливает ваше сообщество как локальное приложение через браузер? Или это изображения, которые отображаются, если вы делаете своё сообщество доступным для обнаружения через Discourse Discover?

Я вижу эти скриншоты, когда использую опцию «Добавить на главный экран» в Chrome на своём устройстве Android

2 лайка

Интересно! Я думал, что они так делают, но не увидел их при установке на свой рабочий стол (Chrome, Windows). Возможно, я просто не дал им достаточно времени для загрузки или распространения.

Рад, что я был прав насчёт того, что они делают!

1 лайк

Похоже, этот раздел был упущен по ошибке,

1 лайк

Прочитав это дважды, я думаю, что понял. Рекомендации по размеру приведены выше. Например:

Кажется, что в целом эта инструкция уже устарела. Теперь нельзя добавить логотип или настроить внешний вид в мастере. Страница администрирования тем выглядит совершенно иначе, а цветовые схемы переименованы в цветовые палитры.
Компонент темы для переключения тёмного/светлого режима перенесён в ядро. А раздел брендинга получил новую страницу конфигурации по адресу /admin/config/logo.
Меня просто удивляет, почему размер, указанный на странице конфигурации, отличается от описания в настройках сайта.


600×80 отличается от мин. 360×120.

2 лайка

Эта тема теперь немного устарела, так как эти вопросы недавно были переработаны.

Вот мои мысли по поводу нескольких незначительных (но ценных) предложений по улучшению:

4 лайка