Theme CreatorとTheme CLIを使い始める

このトピックでは、Theme CLITheme Creator サイトを使用して、テーマを開発し、変更をライブの Discourse サイトでプレビューする方法を説明します。

  1. まだ行っていない場合は、こちらから Meta でアカウントにサインアップしてください。

  2. Theme Creator にログインします。

  3. こちらの手順に従って Theme CLI をインストールします。

  4. Theme Creator で新しいテーマを作成するには、次の手順を実行します。

    • https://discourse.theme-creator.io/my/themes にアクセスします。
    • インストールをクリックし、「新規作成」オプションを選択します。
    • テーマに一意の名前を付けます(カラー スキームは今のところ無視して構いません)。
  5. 詳細設定をクリックし、次に ローカルで編集をクリックし、API キーを取得をクリックします。

    生成された API キーをコピーします。

  1. コマンドラインに戻り、discourse_theme download example-folder と入力します。ここで、example-folder はテーマがローカルに保存される場所です。プロンプトに従ってください。

    • ルート URLとして https://discourse.theme-creator.io を入力します。

    • プロンプトが表示されたら、前の手順で取得したAPI キーを入力します。

    • プロンプトに従い、手順 4 で作成したテーマを選択します。

    • テーマの監視を開始するか尋ねられたら、はいと入力します。

  2. これで、ローカルのテーマフォルダーが変更を監視するようになり、変更は自動的に Theme Creator にアップロードされます。Theme Creator のテーマ設定で プレビューをクリックすると、テーマのプレビューを開くことができます。

  3. 変更の監視を停止するには、コマンドラインウィンドウで ctrl + c を押します。変更の監視を再度開始するには、discourse_theme watch example-theme と入力します。

:tada: これで、編集して変更をライブで確認できるローカルのテーマ ディレクトリができました!

テーマの構造や実行できることについての詳細については、Developing Discourse Themes & Theme Components を確認してください。


このドキュメントはバージョン管理されています - 変更の提案はgithubで行ってください。

← START DOCS ASSET MAP
[
{
“local_path”: “/assets/theme-creator-1.png”,
“local_sha1”: “dbdcf5d5d2d2fc49338a763910331f0c88c7e553”,
“remote_short_url”: “upload://g3bKOFrBSQMsTRs1grErKhPO3Nd.png”
},
{
“local_path”: “/assets/theme-creator-2.png”,
“local_sha1”: “14bfd001fa87742777715f8b394e95a0e6ea4dcc”,
“remote_short_url”: “upload://mikbDMP3hiqUWyFTrgqYIeKTXTn.png”
},
{
“local_path”: “/assets/theme-creator-3.png”,
“local_sha1”: “22f12be193aefde97922c5bf60a6b3dccc8a635b”,
“remote_short_url”: “upload://okM7pOJux3wqzsmESvGI2QikjOr.png”
}
]
END DOCS ASSET MAP →

「いいね!」 42

こんにちは。これらの指示に従おうとしていますが、行き詰まっています。APIキーを追加した後、次のように表示されます。

/usr/local/lib/ruby/gems/3.2.0/gems/discourse_theme-0.7.3/lib/discourse_theme/cli.rb:100:in `run': undefined method `exists?' for Dir:Class (NoMethodError)

        FileUtils.mkdir_p dir unless Dir.exists?(dir)
                                        ^^^^^^^
Did you mean?  exist?
        from /usr/local/lib/ruby/gems/3.2.0/gems/discourse_theme-0.7.3/bin/discourse_theme:6:in `<top (required)>'
        from /usr/local/lib/ruby/gems/3.2.0/bin/discourse_theme:25:in `load'
        from /usr/local/lib/ruby/gems/3.2.0/bin/discourse_theme:25:in `<main>'

何か原因がお分かりになりますか?
よろしくお願いします。

「いいね!」 1

こんにちは!
このツールは、言語の変更により、まだRuby 3.2をサポートしていません。修正作業中ですが、それまではRuby 3.1.xをご利用いただけます。

「いいね!」 6

なるほど、そういうことでしたか。
ありがとうございます :slight_smile:

「いいね!」 1

これは修正されました - discourse_theme は gem バージョン 0.7.4 以降の Ruby 3.2.x で動作するはずです :slight_smile:

「いいね!」 3

すごい、早かったですね :open_mouth:
ありがとうございます。ラインマネージャーの助けを借りて、なんとか機能させることができました。彼は次のように提案しました。

rbenv install 3.1.3
rbenv shell 3.1.3
gem install discourse_theme

これは、ターミナルタブを閉じて再度開くまで実際には機能しませんでした。

discourse_theme watch はライブリロードされなくなりましたか?以前は保存するとテーマが更新されていましたが、今は手動でタブを更新する必要があります。コンソールには理由を示すものは何も表示されません。

「いいね!」 1

少し前に変更がありました

Live Reload in Production にも興味があるかもしれません

「いいね!」 4