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

[Discourse]

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

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

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

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

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

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

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

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

Темы сайта

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

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

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

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

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

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

• Руководство дизайнера по темам Discourse
• Руководство разработчика по темам Discourse

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

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

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

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

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

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

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

Create and share a color scheme

Discourse now supports importing color schemes from remote repository. Here I will demonstrate how you would go about doing this. Navigate to colors and add a color scheme. Head to /admin/customize/colors on your site and create a color scheme. [image] Tips: I used a chrome plugin (color picker) to select colors from an existing image of a palette on the web. If you create a theme, assign the color scheme to the theme and preview it, changes will be reflected live. Create a new gi…

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

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

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

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

• Brand Header
• DiscoTOC - automatic table of contents
• Custom Header Links
• Versatile Banner

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

Тег 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. Если поле оставлено пустым, будет использован large_icon. Рекомендуемый размер: 180 × 180 пикселей. Прозрачный фон не рекомендуется.

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

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

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

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

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

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

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

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

• Настройка любого текста в Discourse
• Customizing the Discourse outer email template
• Creating and configuring custom user fields
• Configure custom emoji

[jordan-violet]

So what does Manifest screenshots actually do? Like, where are these screenshots used? Is it when someone installs your community as a local app through their browser? Are the images what show up if you make your community discoverable with Discourse Discover?

[Moin]

I see those screenshots when I use the “add to homescreen” option in Chrome on my Android device

[jordan-violet]

Interesting! I thought that’s what they did, but I didn’t see them when I installed on my desktop (Chrome, Windows). But I may not have given them enough time to load/propagate somewhere.

Glad to know I was right on what they do, though!

[calebhearth]

@Discourse

For best results here, we recommend following the size guidelines for each type of logo.

Looks like this section was left out by mistake,

[Moin]

After reading it twice, I think I understood. The size guidelines are included above. For example:

@Discourse

• logo - The logo image at the top left of your site. Use a wide rectangular image with a height of 120 and an aspect ratio greater than 3:1. If left blank, the site title text will be shown.

I think in general this guide is quite outdated. You can no longer add a logo or configure the look and feel in the wizard. The themes admin page looks totally different now, and color schemes were renamed to color palettes.
The dark/light mode toggle theme component was moved to core. And branding has a new config page at /admin/config/logo.
I just wonder why the size mentioned on the config page is different from the description when I look at the site setting.

600×80 is different from min. 360×120.

[nathank (Nathan Kershaw)]

This topic is now a bit out of date as this stuff has been recently overhauled.

Here are my thoughts on a few minor (but valuable) suggestions for improvements:

Some additional tweaks for Logos and Icons in the core settings

I’ve just set up a new site, and hit a few hiccoughs. First, I love the new admin settings (/admin/config/logo) - they are a vast improvement and visually very nice. Suggestion 1 That the new term “Square icon” be used instead of large_icon in the text explainers. The old name has been changed, but this hasn’t been followed through with in the text. Suggestion 2 That there is a separate Android icon under Mobile, as there is for iOS. At present, the Square Icon is used for the Android home …