テーマ開発者クイックリファレンスガイド

[Discourse]

テーマがより強力になるにつれて、その仕組みについて覚えておくべきことも増えます。#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": "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) => {
  // ここにコードを記述
});

JS プラグイン 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: 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 でお知らせください。