こちらに、詳細すぎる手順を示します。期待通りに動作しない場合はお知らせください。
-
GitHub アカウントをお持ちでない場合は、作成してください。
-
Discourse でテーマをエクスポートします:
管理画面 → カスタマイズ → エクスポートしたいテーマを選択
これで、テーマが .zip ファイルとしてコンピューターに保存されます。
-
コンピューター上でファイルを解凍します。
-
GitHub に移動し、新しいリポジトリを作成します:
-
「既存のファイルをアップロード」をクリックします。
-
エクスポートしたテーマから、解凍されたフォルダーとファイルをドラッグ&ドロップします。ファイル名は以下のような形式になるはずです:
その後、「変更をコミット」をクリックします。
- 次に、about.json ファイルを編集できます。ファイル名をクリックしてください。
ファイルの中身は以下のようになります:
{
"name": "Default",
"component": false,
"license_url": null,
"about_url": null,
"authors": null,
"theme_version": null,
"minimum_discourse_version": null,
"maximum_discourse_version": null,
"assets": {
"badge": "assets/badge.png"
},
"color_schemes": {
"blue-light": {
"primary": "22262a",
"secondary": "fefefe",
"tertiary": "2572e4",
"quaternary": "518ee9",
"header_background": "1550a7",
"header_primary": "fcfcfc",
"highlight": "9edaf5",
"danger": "ff7114",
"success": "85cc54",
"love": "de0100"
}
},
"learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
- 編集アイコン(鉛筆マーク)をクリックします。
これで編集可能です。カラースキームの名前を変更することをお勧めします。そうしないと、テーマを再度サイトにインポートした際に、同じ名前のカラースキームが重複して存在することになります。以下では、"blue-light": { を "blue-lite": { に変更しています。
カラー変数のオーバーライドを、love の後にカラースキームの末尾に追加し、love の値の後にカンマを入れることを忘れないでください。
"name": "Default",
"component": false,
"license_url": null,
"about_url": null,
"authors": null,
"theme_version": null,
"minimum_discourse_version": null,
"maximum_discourse_version": null,
"assets": {
"badge": "assets/badge.png"
},
"color_schemes": {
"blue-lite": {
"primary": "22262a",
"secondary": "fefefe",
"tertiary": "2572e4",
"quaternary": "518ee9",
"header_background": "1550a7",
"header_primary": "fcfcfc",
"highlight": "9edaf5",
"danger": "ff7114",
"success": "85cc54",
"love": "de0100",
"primary-high": "333333",
"primary-medium": "666666",
"primary-low-mid": "999999",
"primary-low": "cccccc"
}
},
"learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
-
「変更をコミット」をクリックします。
-
リポジトリ名をクリックして、メインのリポジトリページに戻ります。
-
クローンまたはダウンロードリンクをコピーします。
-
Discourse でテーマをインポートします:
管理画面 → カスタマイズ → インストール → Git リポジトリから:リンクを貼り付けてインストール
-
これで、カスタム値 $primary-high、$primary-medium、$primary-low-mid、$primary-low を使用して、ローカルテーマと同様にこのテーマを編集できるようになりました。