テーマが強力になるにつれて、その動作について覚えておくべきことが増えてきます。ここには#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": "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"
}
}
}
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: This theme lets you do amazing things on your Discourse
settings:
fruit: A description of the whitelisted_fruits setting
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で。
