カスタマイズできるHTMLとは何ですか？

開発
1

Discourse の初心者として、何を変更可能か、またその方法を理解しようとしています。利用可能なテーマやテーマコンポーネントがいくつかあることは知っていますが、理論的には admin -> customize -> Themes -> [選択したテーマをクリック] -> edit CSS/HTML に移動すれば、HTML、CSS、JavaScript を編集できることも理解しています。

「edit CSS/HTML」を試した際に表示されるダッシュボードの使い方を把握しようとしています。そこには <head> Header After Header <body> Footer Embedded CSS と表示されています。

実際に HTML を編集する方法について、例付きのガイドは存在しますか？Meta にはいくつかの提案があることは理解していますが、それらはフォーラム内のさまざまなトピックに散在しているように見えます。

私が混乱している具体例として、この 投稿 では、トピックリストの列の順序を変更できるかどうかが問われています。これは比較的単純な HTML の変更に見えますが、回答は「深いオーバーライドを行わない限り、基本的にはできない」というものです。

したがって、「edit CSS/HTML」を使って自分のフォーラムをカスタマイズするために何ができるのかを整理しようとしています。

2

はい、Discourse テーマの開発者向けガイドをご覧ください。

「いいね！」 2
3

ありがとうございます。以前この件を確認したことがありましたが、テーマ作成に焦点が当てられているように見えたため、単一のフォーラムの編集だけを行うには避けていました。

「CSS/HTMLの編集」ダッシュボードの使い方のガイダンスがあることは確認できました。しかし、新しいテーマを作成せずにHTML/CSS/JSを変更できるかどうかを確認させてください。

また、コンポーネントを追加・削除するだけでなく、移動させる方法（例えば、ユーザーグループがページの左端の列に表示されるように列の順序を変更するなど）がどこでどのように行えるのかも明確ではありません。

「いいね！」 1
4

その通りです！

ぜひそのガイドもご覧になることをお勧めします。「テーマ」という側面だけで遠慮する必要はありません。このガイドでは、あなたにとって有益なカスタマイズのさまざまな側面について詳しく解説されています。

「いいね！」 1
5

シモンが提供したリンクにはすべて詳しく説明されていますが、読むには少し長いです。

基本的には、Discourse の HTML を編集したい場合、いくつかの方法があります：

  1. テーマやコンポーネントにあるいくつかの定義済みの HTML タブを通じて：ヘッダー、ヘッダー後、</body>、フッター。
  2. 独自の HTML で埋められる「自由な」HTML スペース（アウトレット）をターゲットにする。これは、<head> タブに追加できる <script> タグを通じて行えます。
    トピック表示で利用可能なアウトレットの例を以下に示します：
    image
    image1141×1158 87.7 KB
  3. 既存の HTML テンプレートをオーバーライドする。テンプレートには多くの HTML コードが含まれていることがあり、変更を加えるためにはすべてをコピー＆ペーストする必要があります。これも <head> に追加した <script> タグで行うことができます。

テーマを作成すること、テーマコンポーネントを作成すること、あるいは「単に単一のフォーラムを編集する」ことは、実際には非常に似ています。これら 3 つはほぼ同じ方法で行われます。

はい、正確に何をしたいかによりますが、通常は新しいテーマコンポーネントを作成し、その中に HTML/CSS を記述するのが正しい方法です。

「いいね！」 3
6

この有益な情報をありがとうございます。オープンスペースにHTMLを追加することや、既存のHTMLをCSSで非表示にする方法（つまり、関連するdivクラスにdisplay: noneを設定すること。これはインスペクターを使って見つけられると思います）は理解できました。

しかし、HTMLを上書きしてコンポーネントを移動させるような処理はどうすればよいでしょうか？簡単な例を教えていただけますか？

7

simon が貼り付けたリンクを一部引用します：

大きな赤い四角でアウトレットを埋める簡単な例；ここではアウトレットはトピック表示の投稿リストの上部に位置しています：

<script type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name">
  <div style="height: 200px; width: 200px;background: red"></div>
</script>

image
image1049×801 56.5 KB

data-template-name 属性に注目してください。

ナビゲーションバーテンプレートのオーバーライドの簡単な例：

<script type="text/x-handlebars" data-template-name="components/navigation-bar">
    {{#each navItems as |navItem|}}
      {{navigation-item content=navItem filterMode=filterMode category=category}}
    {{/each}}
    <div style="background: red; padding: 10px; float: left;">ナビゲーションバーテンプレートにこのブロックを追加しました</div>
    {{custom-html name="extraNavItem" tagName="li"}}
    {{!- これは UL 内に DIV を含めないために行っています。元々は {{plugin-outlet name="extra-nav-item"}}
    {{#each connectors as |c|}}
      {{plugin-connector connector=c class=c.classNames tagName="li" args=(hash category=category filterMode=filterMode)}}
    {{/each}}
</script>

image
image1135×122 10.7 KB

これも data-template-name 属性に注目してください。

テンプレートのリストはこちらです：https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates

すべてのアウトレット位置をハイライトする便利なテーマコンポーネントはこちらです：(deprecated) Plugin outlet locations theme component

「いいね！」 4
8

わかりました。ようやく理解できました。とても助かります。

1. type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name はどこから来るのでしょうか？（つまり、そこに何を入力すればよいかをどうやって知ればよいのでしょうか？）

また、テンプレートをオーバーライドするためのコード例をいただき、それが可能であることが見えてきました。テンプレートコードを取り出して移動させたり、削除したり、追加したりできるからです。

2. テンプレートコードは、あなたが提供してくれた GitHub リンク から取得するのでしょうか？もしそうなら理にかなっていますが、正しいコードを見つけるのは難しそうです。例えば、ホームページのテンプレートはどれでしょうか？

3. 次に、その関連するコードを「CSS/HTML の編集」ダッシュボードに貼り付けます。しかし、どこに貼り付ければよいのでしょうか？最初のオプション（<head>）の下でしょうか？以前の回答からそう推測しますが、確認できれば幸いです。

これが他の人にも役立つことを願っています。

9

outlet の名前と場所を見つけるには、上記でリンクしたプラグインが最良の方法だと思います。

編集したいページの一部に対応するテンプレートを見つけるのは…少し厄介です。
簡単な方法は知りません。似たようなプラグインがあると素晴らしいですね。

時々、ページ HTML を見て、CSS クラスなど「これなら一意だろう」と感じるコードを探し、すべてのテンプレートファイル内で検索します。Discourse のリポジトリを自宅の PC にクローンしており、Sublime Text を使ってこれらのファイル全体を検索していますが、他にもっと良い方法があるはずです。

また、自分がカスタマイズしたいページ箇所を変更している既存のテーマコンポーネントのコードを確認することもあります。

はい、確かに大変です。でも私は専門家ではないので、もっと効率的な方法があるはずです！

はい。

WordPress や phpBB から来て、そのディレクトリやこのディレクトリにあるテンプレートファイルを直接編集することに慣れている方にとっては、Discourse は難解に思えるかもしれません… :sweat_smile:

10

ありがとうございます。ただ、WordPress と比較すると、少なくとも私の見解では、Discourse が PHP の代わりに Ruby と JavaScript を使用している点が大きな利点です。