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

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

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

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

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

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

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

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

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

Темы сайта

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

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

Категория Customization > 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:

Категория Customization > 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 icon — Иконка, используемая для устройств Apple. Если оставлено пустым, будет использовано 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 лайка