テーマ付けの「マップ」はありますか?(プラグインの出口などを簡単に見つける方法)

素晴らしいプラグインとテーマコンポーネントガイドは一通り読みましたが、必要なテンプレート、コンポーネント、ウィジェット、プラグインアウトレットをどこで素早く見つけたらよいか、まだ少し困っています。

まずは3つの簡単な編集から始めようと思っています。もし方向性を示していただければ、大変助かります :blush:

これらを変更するには、どのテンプレート、コンポーネント、またはプラグインアウトレットを編集すればよいでしょうか?

  1. 投稿(トピック)表示ページの HTML の 内にある タグ(トピックを表示している時)。この変更は人間だけでなく、ボットにも反映されるようにする必要があります。
  2. カテゴリーボックスのマークアップ(表示される場所はどこでも)。これら:管理パネル > 設定 > カテゴリースタイル。
  3. About ページ(管理ブロックとモデレーターブロックの内容を変更する場所)

他のフォーラムソフトウェアでテーマを適用する場合、通常、そのページを構成するすべての要素への参照を含む親ファイルがあり、編集が必要なテンプレートを素早く見つけることができました。例えば、forumdisplay(Discourse の「カテゴリー表示」)というファイル/テンプレートがあり、メインの HTML を含み、他のすべてのテンプレートへの参照を保持していました。また、showthread ページ(Discourse の「トピック表示」ページ)用、メンバープロフィールページ用など、それぞれ別のファイルがありました。これらは、必要な場所のリストやマップのように機能します。したがって、例えば投稿の基盤となるマークアップを編集したい場合、showthread(つまりトピック表示)ファイルまたはテンプレートに移動し、それを確認すれば、postbit テンプレートを編集または確認する必要があることがわかります。

Discourse にもそのような仕組みはありますか?もしない場合、チームの皆様は類似の機能の追加をご検討いただけませんでしょうか?それは非常に大きな助けになると思います :slight_smile:

それを見ました(すみません、言及すべきでした!)。可視化されたプラグインのアウトレットには非常に役立ちますが、テンプレートやコンポーネント、ウィジェットなどはどうですか?ロバートさん、それらを素早く簡単に見つける方法はありますか?最初の投稿で言及されているものについて、どこにあるか見当がつきますか?

私のアドバイスは、常にシンプルに始めることです。まずシンプルな要件に取り組み、その実装方法を検討しましょう。その後、次のステップに進みます。

テーマ作成については、その大部分は CSS の修正で対応できると思います。一般的なリソースを活用してください。それでは対応できない場合は、jQuery を用いてテンプレートを修正するか、やむを得ない場合はテンプレートをオーバーライドする必要があります。独自のコンポーネントやウィジェットを構築し、新しいユースケースに合わせて接続しましょう。

ソースコードは常に味方です。GitHub の discourse/discourse ディレクトリ構造を確認すれば、アプリの各部分がどのように配置されているかがわかります。テンプレートは理解しやすい側面だと思います。Ember のディレクトリ構造に慣れていない場合は、今が学ぶ良い機会です。

はい、その通りです。Discourse が登場して以来、ほぼずっとテーマ作成を行っており、常に別ウィンドウでソースコードを参照しています。

一般的に、テンプレートについては以下をご覧ください:
https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/templates

ウィジェットについては以下をご覧ください:
https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/widgets

テンプレートがどこにあるかがすぐにわからないこともあります。例えば、別のテンプレートにネストされるコンポーネントである場合などです。そんなときは、特定のマークアップでソースを検索するのが私のやり方です。

例えば、About ページに何かを追加したい場合、About ページの body には about-page という固有のクラスがあることがわかります。そのため、aboutbody-page(これもページにある別のクラスです)で検索を開始します。

いくつかのご質問にお答えします:

これはプラグインが必要だと思いますが、それは私の専門外です…もしかしたら他の誰かがより役立つ回答ができるかもしれません。

ページレイアウトによって異なるテンプレートがありますが、「〜付きボックス」レイアウトのいずれかについてお話ししていると仮定します。

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/about.hbs

ご返信ありがとうございます :slight_smile:

私もまさにそうしようと思っていたんです(タイトルタグの編集ほどシンプルなものはないと思います)。他のフォーラムソフトなら、‘showthread’ ページのファイルやテンプレートを開いて編集するだけで、 literally 1 分もかからずに済みます。Discourse のテーマ作成もこんなに簡単だといいのですが(ただし、私が現時点で Discourse のテーマ作成に慣れていないことが、今のように迷っている理由かもしれません)。

最初の投稿にあるすべての項目について、私がそうする必要があると考えています。これらは既存のコンテンツを変更する必要があるためです(plugin-outlets が主に想定している特定の場所に追加または先頭に挿入するのではなく)。

おそらくそれが問題なのかもしれません。Ember を知らないことが、これが少し異質に感じられる原因になっているのでしょう。(deprecated) Plugin outlet locations theme component のようなものが、テンプレートやカスタマイズ可能な他のすべての要素についてもあれば、とても役立つのですが。

でも、Kris さんはどうやって必要なものを見つけるんですか?

あ、ありがとうございます。とても良いアドバイスですね!

Kris さんは確信があるんですか?プラグイン(または plugin-outlets)は、その特定の outlet の場所に何かを追加するだけだと私は思っていました。タイトルタグの形式を変更するには、既存のテンプレート(またはコンポーネント、ウィジェット)を開いて、それをコピーして編集する必要があると思います。少なくとも、プラグインとテーマ作成に関する 2 つのガイドを読んだ後の私の理解ではそうです。

ありがとうございます!あれが私が探していたもののようです :smiley:

ありがとうございます、哈哈!名前の付け方と、あなたがそれらを指摘してくれたおかげで、どちらも比較的簡単に探せるようになりました。タイトルタグの変更でつまずいていたことも要因だったのかもしれません :relaxed:

今のところ、何か見落としているような気がします。@merefield さんが指摘したように、Ember に慣れていないことが原因かもしれません。Ember を簡単に解説している YouTube ビデオをご存知ありませんか?もしかしたら、あなたか @merefield が作成してくれるかもしれませんね :blush:

Ember は学ぶ価値が十分にあります。非常に強力、拡張性が高く、高速です。

これを読むことで、ソースコードがより理解しやすくなります:

テンプレート、計算プロパティ、ルーター、コンポーネントについて学んでください。

Discourse はバニラの Ember アプリとは完全に同じではありませんが、ガイドはどの場合でも非常に役立ちます。

もう一つ大きなヒント:あなたが達成したいことと似たことを実現している既存の(優れた)プラグインを特定してください。コードを確認し、そのアプローチを模倣してください。

ロバート、ありがとう!そのバージョンのガイドは古いと言っています。Discourse はそのバージョンを使っているのでしょうか、それとも最新の 3.15 のガイドを読むべきでしょうか?

現在は 3.10 をお読みください。Discourse は現在これを使用しています。JavaScript コンソールを開くと、インスタンスが実行している Ember と jQuery のバージョンが表示されます。

また、コード装飾にはいくつかの「スタイル」がある点にご注意ください。そのため、ソースコード内の表示がわずかに異なる場合があります。

残念ながら、それではありません :–(

これらも試しました:

テーマコンポーネントを作成し、以下を追加しました:

<script type="text/x-handlebars" data-template-name="components/categories-boxes">
 test
</script>

しかし、data-template-name を上記のいずれかに変更しても効果はありません(components/topic-list に変更すると機能します)。

このテンプレートはどこにあるのでしょうか?

編集したいのはこれです(「box」形式が表示される場合:AdminCP > 設定 > カテゴリスタイル):

ご協力いただければ幸いです。

つまり、テーマコンポーネントではこれが不可能なようです。これに対応するテンプレートやコンポーネントが存在しないようなので :sob:

この Ruby モジュールがインラインスタイルを注入しているようです:discourse/lib/category_badge.rb at 888e68a1637ca784a7bf51a6bbb524dcf7413b13 · discourse/discourse · GitHub

これは一時的な措置として意図されたものでしたか?そうではない場合、カスタムスタイルを指定できるようにしていただけないでしょうか @sam

既存の none オプションに関連付けて、管理設定パネルに 2 つのフィールドを設け、それぞれのスタイルを貼り付けられるようにするのはどうでしょうか(スタイルを貼り付けなければ、現在の none オプションと同じように動作します):

<span class="badge-category-bg" style="background-color: #25AAE2;"></span>

および

<span style="color: #FFFFFF;" data-drop-close="true" class="badge-category clear-badge restricted" title="A category exclusive to members with trust level 3 and higher."><svg class="fa d-icon d-icon-lock svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#lock"></use></svg><span class="category-name">Lounge</span></span>

このスニペットから:

通常のカテゴリ編集ページから背景色と文字色の変数にアクセスできれば十分です。

あるいは、Sam さん、これを編集する別の方法はありませんか?背景色を削除し、通常のカテゴリ編集ページで指定されている文字色と同じ色のボーダーを付与したいだけです。

ご支援いただければ大変助かります。

編集:どうやらその Ruby ファイルではなかったようです(開発環境で編集しましたが何も変化しませんでした)…。さらに調査したところ、どうやらこちらが原因のようです:discourse/app/assets/javascripts/discourse/helpers/category-link.js.es6 at b25d9e96c1414bf78b44221da4d385675843991e · discourse/discourse · GitHub これを変更するプラグインを作成することは可能でしょうか?

おそらく、これを行う方法は複数あります。

以下を試してみてください。

  • そのヘルパーを呼び出すテンプレートをオーバーライドする
  • 独自のヘルパーに置き換える

対象のテンプレート:discourse/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs at c6e255f4e00400b8a6f82a799b7fa082b17adb1c · discourse/discourse · GitHub

階層の低いテンプレートをオーバーライドすることは、比較的リスクが低いです。

別の方法として、topic-list-item コンポーネントのオーバーライド内で jQuery を使用して、必要な変更を実行するという手段もあります。