随着主题变得越来越强大，关于它们如何工作的需要记住的内容也越来越多。我们在 #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 .hbs 和 .raw.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
可用的 CSS 变量Javascript 阅读更多
// {theme}/javascripts/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// 您的代码
});
设置 阅读更多
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 上 建议更改。
