Структура тем и компонентов тем

[Discourse]

Discourse поддерживает нативные темы, которые можно загрузить из архива .tar.gz или из удалённого git-репозитория, включая приватные репозитории.

Пример темы доступен по адресу: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub

Git-репозиторий проверяется на наличие обновлений (раз в день) или с помощью кнопки Проверить обновления. При обнаружении изменений кнопка Проверить обновления изменится на Обновить до последней версии.

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

about.json (обязательно)

common/common.scss
common/header.html
common/after_header.html
common/footer.html
common/head_tag.html
common/body_tag.html
common/embedded.scss

desktop/desktop.scss
desktop/header.html
desktop/after_header.html
desktop/footer.html
desktop/head_tag.html
desktop/body_tag.html

mobile/mobile.scss
mobile/header.html
mobile/after_header.html
mobile/footer.html
mobile/head_tag.html
mobile/body_tag.html

locales/en.yml
locales/{locale}.yml

stylesheets/{anything}/{anything}/{anything}.scss

javascripts/{anything}.js
javascripts/{anything}.gjs
javascripts/{anything}.hbs

assets/{asset_filename}

settings.yml

Любой из этих файлов является необязательным, поэтому создавайте только те, которые вам нужны.

Для тех, кто хочет разделить SCSS-файлы темы на несколько частей, это теперь возможно.

Split up theme SCSS into multiple files

Themes and theme components are becoming steadily more powerful, and developers are getting more and more ambitious. To make things easier for developers, themes can now split their SCSS into multiple files. When creating a new theme with the theme CLI, or sharing a theme on github, simply create a new folder called scss. Fill it with your .scss files, following any folder structure, and all the files will be available for you to import in the common / desktop / mobile SCSS sections of your t…

Для тех, кто хочет разделить тему на несколько JS-файлов, просто добавьте нужные JS-файлы в директорию javascripts.

Структура файла about.json приведена ниже. Подробнее о нём можно узнать по адресу: https://meta.discourse.org/t/adding-metadata-to-a-theme/119205:

{
  "name": "Моя тема",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "variable-name": "assets/my-asset.jpg"
  },
  "color_schemes": {
    "Моя цветовая схема": {
      "primary": "222222"
    }
  },
  "screenshots": ["screenshots/light.jpeg", "screenshots/dark.jpeg"]
}

Инструкции по добавлению настроек в вашу тему доступны здесь: Add settings to your Discourse theme.

Чтобы указать Discourse, что вы добавляете компонент темы, а не полную тему, просто добавьте строку "component": true в файл about.json.

Структура файлов соответствует кастомным CSS/HTML темы.

Дополнительная информация

Ознакомьтесь с другими статьями по тегу #themes::tag.

Также см.:

• Developing Discourse Themes & Theme Components
• Install the Discourse Theme CLI console app to help you build themes
• Include assets (e.g. images, fonts) in themes and components

---

Последний раз проверено @SaraDev 2022-08-15T21:00:00Z

---

Этот документ находится под версионным контролем — предлагайте изменения на GitHub.