По мере того как темы становятся всё более мощными, увеличивается и объём информации, которую нужно помнить об их работе. У нас есть множество подробных руководств в разделе #howto / #themes, но если вам нужно лишь освежить память, это руководство может помочь.
Общие ресурсы
Руководство для начинающих
Руководство для дизайнеров
Руководство для разработчиков
Конструктор тем
CLI для тем
Каталог тем
Каталог компонентов
Модификаторы тем
Настройки сайта, поддающиеся тематизации
Структура файлов и папок читать далее
about.json
settings.yml
common/, desktop/, mobile/
{common|desktop|mobile}.scss
head_tag.html
header.html
after_header.html
body_tag.html
footer.html
embedded.scss (только для common)
locales/
en.yml
...
assets/
(файлы с произвольными именами, на которые есть ссылки в about.json)
stylesheets/
(файлы с произвольными именами, которые могут импортироваться друг из друга, а также из common/desktop/mobile.scss)
javascripts/
(файлы с произвольными именами. Поддерживаются .js, .gjs и .hbs)
about.json информация о структуре, доступные метаданные
{
"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"
}
}
}
SCSS
JavaScript читать далее
// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Ваш код здесь
});
JavaScript из нескольких файлов
Настройки читать далее
settings.yml:
fruit:
default: apples|oranges
type: list
description: # Старый метод. Лучше определять это в файлах локализации (см. ниже)
en: English Description
fr: Description Française
Доступ из JavaScript:
console.log(settings.fruit);
Доступ из gjs-шаблонов:
<template>{{settings.fruit}}</template>
Доступ из scss:
html {
font-size: #{$global-font-size}px;
background: $site-background;
}
Настройки сайта, поддающиеся тематизации читать далее
about.json:
"theme_site_settings": {
"enable_welcome_banner": false
}
Доступ из JavaScript:
@service siteSettings;
this.siteSettings.enable_welcome_banner;
Доступ из gjs-шаблонов:
<template>{{this.siteSettings.enable_welcome_banner}}</template>
Переводы читать далее
locales/en.yml
en:
my_translation_key: "I love themes"
theme_metadata: # Эти поля используются в панели администратора. Они не доступны в ваших js/hbs-файлах
description: Эта тема позволяет вам делать удивительные вещи на вашем Discourse
settings:
fruit: Описание настройки whitelisted_fruits
Доступ из JavaScript:
import { i18n } from "discourse-i18n";
i18n(themePrefix("my_translation_key"));
Доступ из gjs-шаблонов:
import { i18n } from "discourse-i18n";
<template>
{{i18n (themePrefix "my_translation_key")}}
<DButton @label={{theme-prefix "my_translation_key"}} />
</template>
Этот документ находится под версионным контролем — предлагайте изменения на GitHub.