Discourse用のテーマを自分でデザインするのに関心がありますか？まさにそのトピックにたどり着いたようです 
このガイドでは、Discourseのテーマ作成におけるSCSS/CSSの側面に焦点を当てます。JS/EmberJs/Handlebarsについても知識がある場合は、さらに深く掘り下げるために、このガイドを参照することもできます。
ここでは、Discourseでのデザインとテーマ作成における私の個人的な方法を説明します。ほとんどのものと同様に、独自のデザインを実装する方法は非常に多くあります。私はテーマ作成時にインスペクターツールを頻繁に使用しており、この投稿の中でその使い方をいくつか示します。
テーマ作成の準備
続行する前に、Discourseテーマの使用に関する入門ガイドおよびテーマの構造…を読み通してください。この時点で深い知識は必要ありませんが、これらの記事を読むことで、始める前に少し馴染みのある状態になります。
Discourseでのテーマ作成を最も効率的に行うために、以下の設定を行うことをお勧めします。これにより、Discourseサイトの管理パネルで「保存」してリロードする手間なく、変更を加えた瞬間にその結果を確認できるようになります。
管理コンソール（Discourseフォーラムへの管理者レベルのアクセス権がある場合）を使ってこのガイドを進めることも完全に可能です。
- Discourse Theme CLIをインストールし、そのトピックを読んで、何ができるか理解してください。
- https://discourse.theme-creator.io/ からAPIキーを取得してください。
- Metaアカウントでサインインします
- My Themesをクリックします
- API Keyをクリックします
- ポップアップモーダルでGenerate API Keyをクリックし、生成されたキーをコピーします（後で使用します）
Discourse Theme CLIの実行
Discourse Theme CLIがインストールされ、APIキーの準備ができた状態で、お好みのテキストエディタまたはターミナルウィンドウを開き、テーマフォルダをセットアップしたい場所まで作業ディレクトリを変更します。
そこに着いたら、次のコマンド discourse_theme new your_theme_name を実行し、プロンプトに次のように入力してください：
-
What would you like to call your theme? テーマ名を選択します
-
Would you like to start watching this theme? Yes
-
What is the root URL of your Discourse Site?
https://discourse.theme-creator.io/ -
Would you like this site name stored in…? Yes
-
What is your API Key? theme creatorから取得したAPIキーを入力します
-
Would you like this API key stored…? Yes
-
プロンプトが表示されたら Create and Sync with a new theme を選択します
-
子テーマコンポーネントについてプロンプトが表示されたら Do Nothing を選択します
すべて正しく動作した場合は、https://discourse.theme-creator.io/ の My Themes にアクセスして、左側のテーマリストに新しいテーマが表示されるはずです。
これらの変更をリアルタイムで表示するには、テーマ名をクリックし、情報エリアの下部にある Preview をクリックします。
Theme CLIは、新しく作成されたディレクトリ内のすべての変更を監視するようになり、変更のたびに保存し、theme-creator上のテーマを更新します。
最初のステップ
Discourse Theme CLIは、先ほど実行したコマンドで指定したフォルダ名内にテーマの骨組みを作成しました。生成されたファイルの多くは使用しないため、以下のファイルを除いてすべて削除します：
common/common.scss
desktop/desktop.scss
mobile/mobile.scss
about.json
ディレクトリ内では、gitのバージョン管理を削除するために rm -rf .git も実行してください。このガイドでは必要ありません。
テーマディレクトリは、次のようになるはずです：
これらのファイルに追加するスタイルは、それぞれの使用ケースでレンダリングされることに注意してください。common.scss のスタイルはデスクトップとモバイルの両方に適用され、desktop.scss のスタイルはデスクトップ閲覧時のみ、mobile.scss のスタイルはモバイルビューのみに適用されます。
Hello World (色付き)
Discourseはスタイリングに SCSS を使用しているため、スタイルを最大限に活用するには、SASS に慣れることをお勧めしますが、そうでなくてもこのガイドに従って進めることはできます。
さて、待ちに待った… テーマ作成です！
現在、about.json には color_schemes が定義されていません。以下のコードをそのセクションに貼り付けてから保存してください。
{
"name": "my theme",
"about_url": null,
"license_url": null,
"assets": {},
"color_schemes": {
"Default": {
"primary": "222222",
"secondary": "ffffff",
"tertiary": "0088cc",
"quaternary": "e45735",
"header_background": "ffffff",
"header_primary": "333333",
"highlight": "ffff4d",
"danger": "e45735",
"success": "009900",
"love": "fa6c8d"
}
}
}
ブラウザが開いていても、変更が反映されているようには見えません。これは、スキームが存在しない場合に使用されるデフォルトのカラースキームだからです。
テーマの概要
このガイドで実際に実装するものを持たせるために、このカラーパレットに基づいたシンプルなテーマの作成方法を説明します。
背景色 + プライマリテキスト色の変更
非常にシンプルなことから始めましょう。現在のカラースキームの "Secondary" 値を変更します。"secondary": "EEF4F7" に変更します（これにより背景色が変更されます）。また、"primary" 値を "203243" に変更します。
たったこれだけで、フォーラムの外観と雰囲気を変えることができました。カラースキームの色を編集するだけで、多くのカスタマイズを行うことができます。
カラースキームの使用
以下のすべてのキーは、about.json ファイル内の対応するカラースキーム名の下で定義されています。これらの説明は、各変数名の主な目的を理解するのに役立つ良い参考になります：
| 色 | 説明 |
|---|---|
| primary | ほとんどのテキスト、アイコン、境界線 |
| secondary | メインの背景色、および一部のボタンのテキスト色 |
| tertiary | リンク、一部のボタン、通知、アクセントカラー |
| quaternary | ナビゲーションリンク |
| header_background | サイトのヘッダーの背景色 |
| header_primary | サイトのヘッダー内のテキストとアイコン |
| highlight | ページ上のハイライトされた要素（投稿やトピックなど）の背景色 |
| danger | 投稿やトピックの削除などのアクションのためのハイライト色 |
| success | アクションが成功したことを示すために使用 |
| love | いいねボタンの色 |
これらの変数は、次のようにSCSSファイル内で使用できます。
body {
background-color: var(--primary);
}
各色の他のバージョンも使用できるように作成されています。var(--primary-medium) や var(--primary-very-low) のようなものは、同じ色の異なるトーンを取得するために使用できます。
“Default” カラースキームの他の色も、これに合わせて変更します：
"Default": {
"primary": "203243",
"secondary": "EEF4F7",
"tertiary": "416376",
"quaternary": "5E99B9",
"header_background": "FaFaFa",
"header_primary": "EEF4F7",
"highlight": "86BDDB",
"danger": "8F393E",
"success": "70DB82",
"love": "FC94CB"
}
theme creatorでテーマをプレビューしながら、左側のメニューでColorsをクリックすると、SCSSファイルで使用可能なすべての変数を確認できます。
Styleguideは、カスタムテーマを作成する際に非常に役立つセクションです。各Atomは、Discourseの特定の要素があなたのスタイルを適用したときにどのように見えるかを示します。
深く掘り下げる
前のセクションを踏まえて、SCSSのみでDiscourseで何ができるかについて、少し深く掘り下げる時が来たと思います。（ヒント：たくさん！）
ヘッダーのスタイリング
カラースキームへの前の変更により、ヘッダーが物足りないものになっていることに気づくはずです。アイコンがほとんど見えない！
Discourseのヘッダーには、サイトロゴと右側のナビゲーションアイコンを保持するためのコンテナ（背景色付き）が含まれています。これらはすべてカスタマイズできます。
ヘッダーをカスタマイズするためのターゲットクラスは .d-header です。
common/common.scss ファイルに、次を追加します：
.d-header {
box-shadow: none;
border-bottom: 1px solid var(--primary-low-mid);
height: 5em;
}
これにより、ヘッダーのデフォルトのbox-shadowを削除し、高さを少し増やし、分離感を与えるためのborder-bottomを設定します。
アイコンについて – .d-header のSCSS括弧内に、このネストされたコードを追加します。
.d-header {
// ...previous code
.d-icon {
color: var(--primary-low-mid);
}
}
これで見栄えが良くなりましたが、目を凝らすと、ヘッダーの高さが増えたことで、ヘッダーとDiscourseフォーラムの他の要素との間のスペースが狭くなっていることに気づくはずです！
メインエリアとヘッダー間のスペースは、#main-outlet ターゲットによって制御されます。common/common.scss ファイルの末尾に次を追加して、このスペースを少し増やします。
#main-outlet {
padding-top: 6.5em;
}
ナビゲーションコンテナ
ナビゲーションコンテナには、次のパーツが含まれます。
最左側はカテゴリ/タグフィルタードロップダウンで、続いてナビゲーションリンク、最後に新しいトピックボタンがあります。
カテゴリ / タグドロップダウン
このエリアに変更を加えてみましょう。そのために、common.scss ファイルに次を追加します。
.navigation-container {
.select-kit.combo-box {
.select-kit-header {
border-radius: 0.9em;
background-color: var(--header_background);
}
}
}
ここでは、.select-kit-header をターゲットにして、それぞれに同じborder-radiusと明るい背景色を与えます。
これらをクリックすると、ドロップダウンメニューが開きます。
現在、角が鋭いので、これらの角を丸め、背景色をヘッダーと同じにするためのスタイルを追加します。
.navigation-container {
.select-kit.combo-box {
// ...previous code
&.category-drop,
&.tag-drop {
.select-kit-body {
border-radius: 0.9em;
background-color: var(--header_background);
.select-kit-collection {
background-color: var(--header_background);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
}
}
}
}
これにより、次のような見た目になります…
よく見ると、検索エリアの右上に小さな境界線が見えているのがわかります。
ブラウザのインスペクターを使ってこれを見つけ、修正しましょう。これは、スタイルを正しく適用するためにターゲットにする必要があるクラス/IDを学ぶために、常に非常に役立つツールです。
ドロップダウンメニューを表示した状態で、検索エリアを右クリックして、ブラウザで要素を「Inspect」します。
このinputが select-kit-filter というクラスの div の内側にあるのがわかります。
このセレクタに適用されているルールを見ると、現在、上と下のborder、およびpaddingが適用されているのがわかります。変更したいのはborder-topのスタイルだけです。
先ほどの .select-kit-body scss内にネストして、次のコードを追加します。
.select-kit.combo-box.category-drop,
.select-kit.combo-box.tag-drop {
.select-kit-body {
// ...previous code
.select-kit-filter {
border-top: 0px;
}
}
}
これで、ナビゲーションコンテナをスタイリングするためのコードは次のようになるはずです。
.navigation-container {
// Category + Tag Drop Down
.select-kit.combo-box {
.select-kit-header {
border-radius: 0.9em;
background-color: var(--header_background);
}
&.category-drop,
&.tag-drop {
.select-kit-body {
border-radius: 0.9em;
background-color: var(--header_background);
.select-kit-collection {
background-color: var(--header_background);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.select-kit-filter {
border-top: 0px;
}
}
}
}
}
ナビゲーションリンク
これらのナビゲーションリンクを、これに似た見た目にするためのスタイルを追加しましょう：
もう一度インスペクターを使って、ここで何をターゲットにすべきかを見つけましょう。
ナビゲーション要素が "nav nav-pills ..." というクラスのULの内側にあるのがわかります。
common.scss ファイルに戻り、前のセクションの下、ただしまだ navigation-container 内にネストした状態で、次を追加します：
.nav-pills {
& > li a {
&.active {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--tertiary);
}
}
}
この変更は、nav-pills の子要素でactiveクラスを持つリンクのみをターゲットにします。これにより、アクティブなリンクは次のようになるはずです：
これで大丈夫ですが、下境界線はテキストの長さに合わせてのみ伸びることを希望します。これを行うために、&.active { 行の上に、ナビゲーション <li> タグ内のすべてのAリンクに影響を与える次のコードを追加します。
// ...other code
.nav-pills {
& > li a {
padding: 0;
margin-right: 20px;
color: var(--tertiary-high);
border-bottom: 4px solid transparent;
&.active {
// ...more code
}
}
}
次に、「hover」効果を「active」効果と同じにする必要があります。
前の &.active の下に次を追加します
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
したがって、ナビゲーションのすべてのコードは次のようになるはずです：
// Nav Pills
.nav-pills {
& > li a {
padding: 0;
margin-right: 20px;
color: var(--tertiary-high);
border-bottom: 4px solid transparent;
&.active {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--tertiary);
}
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
}
}
ボタン
Discourseのボタンには、さまざまな形状とサイズがあります。Style GuideのButtonsセクションで、そのバリエーションを確認できます。
このテーマのほとんどのボタンを、カスタムスタイリング付きの丸みを帯びたものにしたいです。これにより、+ New Topic ボタンだけでなく、サイト全体の他のボタンも変更されます。
common.scss ファイルの末尾に、次を追加します：
.btn {
background-color: var(--header_background);
color: var(--primary);
border-radius: 1.2em;
border: 1px solid var(--primary-low-mid);
.d-icon {
color: var(--primary);
}
&:hover {
background-color: var(--quaternary-low);
color: var(--primary);
.d-icon {
color: var(--primary);
}
}
&.btn-default,
&.btn-primary {
padding: 10px 12px;
}
}
これにより、ボタンは次のようになります：
ボタンのスタイリングができたので、ボタンのスタイリングと、すべてのデザインをテストすることがなぜ重要かについて、あることを指摘したいと思います。
サイトプレビューでトピックに移動し、トピック返信の reply ボタン、またはトピックストリームの下部にある返信ボタンを押してみてください。ボタンのスタイリングが、意図していなかったいくつかのことに影響を与えているのがわかります。
これらのテキスト編集ボタンに、以前のスーティングの影響を受けさせたくありません。これには少し複雑なSASS/CSSが必要ですが、:not() を使ってこれらのボタンに影響を与えないようにコードを記述できます。 
現在の .btn ターゲットの前に、この行のコードを追加します。これにより、.d-editor-button-bar の子要素ではないボタンにのみスタイルが適用されることが指示されます。
:not(.d-editor-button-bar) > .btn
はい、うまくいきましたが… 待ってください！今、奇妙な反逆者が自分のことを勝手にやっているのが見えます。
ブラウザでこれを確認すると、このボタンは .select-kit-header というクラスを持っているのがわかります。なぜなら、この歯車をクリックすると、さらに多くのオプションが表示されるからです。
このボタンをターゲットにしたくないことがわかったので、コードにさらに :not() 機能を追加します。
:not(.d-editor-button-bar) >
.btn:not(.single-select-header)
これにより、.d-editor-button-bar の子要素ではなく、.single-select-header クラスを持たないすべてのボタンを選択します。これは少し混乱するかもしれませんが、Discourse内部には多くの動く部分があるため、要素に正しく影響を与えるには、非常に具体的なスタイリングが必要な場合があります。
また、現在のスタイリングがモーダルクローズボタンを奇妙に影響させていることに気づきました。モーダルが開くものをクリックするとこれを見ることができますが、より簡単には、Style Guideのモーダルセクションに移動することもできます。
これを修正するために、コードにもう一つのターゲットを追加します。
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close)
続いて…
コードの影響を受けていないもう一つのボタンが見えます。それは、トピック投稿ストリームの最下部にある Tracking ボタンです。
現在の .btn コードに、カンマの後に次の行を追加します。
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close),
.topic-notifications-button > .select-kit > .btn
これにより、このセクションに表示されるボタンを正しくターゲットにでき、現時点ではフォーラムの上部エリアのスタイリングは完了です。
今後の方向性
このガイドは、Discourse用の独自のテーマをカスタマイズする方法の表面をなでることを意図したものでした。アプリのどの部分をターゲットにして独自のカスタマイズを行うことができるかについて、より多くの洞察を得られたことを願っています。
覚えておいてください SCSSのみを使用してカスタマイズできることは非常に多いです。開発をさらに深く進めたい場合は、この投稿の上部にリンクされている記事を読むことをお勧めします。
質問があればお気軽にどうぞ。喜んでお手伝いしたり、正しい方向へ導いたりします。
この文書はバージョン管理されています - 変更を提案するには github で。