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

[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. https://github.com/discourse/discourse/commit/268d4d4c828a0d9e3ca6b0b5b623db85eb32b9f3 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 b…

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

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

{
  "name": "My Theme",
  "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": {
    "My Color Scheme": {
      "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.