談話テーマとテーマコンポーネントの開発

ドキュメント 開発者ガイド
, ,
1

Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components.

This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to:

Themes vs. Theme Components

Discourse Themes can be used to customize the frontend user experience using CSS and JavaScript. Each theme has its own git repository, and community admins can generally install and manage them via the Discourse admin panel, even on shared hosting platforms.

Theme Components are themes which are intended for use alongside other Theme Components, as part of an overall Theme. From a development point of view, Theme Components and Themes are almost identical. In these guides, the phrase “Theme” and “Theme Component” are used interchangeably.

Prerequisites

Firstly, make sure you understand how to use existing themes and theme components in Discourse. Using ready-made themes is the quickest and safest way to customize your community. If you need more, then it’s time to consider writing your own theme.

As part of Discourse’s overall architecture, Discourse Themes are built using standard HTML, CSS, JavaScript technologies, and make use of Ember concepts for more advanced UIs. These reference guides assume a base-level understanding of these technologies, and link out to external references where possible.

Discourse is a fast-moving project, and as such any custom theme will require maintenance over time. Make sure you consider this as part of your planning & development processes.

Getting Started

Frontend Customization

More!

Check out the rest of the Developer Guides !

This document is version controlled - suggest changes on github.

「いいね！」 142
136

The PluginApi - modifyClass()セクションには、古い、または無効なリンクや参照がたくさんあります…

このファイルは大きく変更されており、checkReplyLength はもはや存在しません…

そして、同じセクションの後半：

このリンクは「404 - ページが見つかりません」エラーになります…

その後、このドキュメントの使用を諦めました…

「いいね！」 4
137

投稿が新しいトピックに分割されました：ユーザーカードテンプレートまたはウィジェット？

138

この部分のドキュメントは少し古いようです。（また、api.modifyClass は pluginId が欠落していると不平を言います）。about-page がロードされたときにスクリプトを実行するにはどうすればよいですか？これは機能しません（エラーはありません）。他のコンポーネントでは、結果が混在していました。よろしくお願いします。

<script type="text/discourse-plugin" version="0.11.1">

api.modifyClass("component:about-page", {
  pluginId: 'discourse-about-theme',

  didInsertElement() {
    this._super(...arguments);
    console.log("Welcome to the about page!");
  }

});

</script>
「いいね！」 1
139

こんにちは :wave: about-page が .gjs になり、それにより直接変更できなくなりました。変更を行うには、そのページで利用可能なコネクタのいずれかを使用する必要があります。

これらは、Plugin outlet locations theme component で簡単に確認するか、ファイル \u003cPluginOutlet\u003e で確認できます。

「いいね！」 4
142

どうもありがとうございます。理にかなっています。コネクタを使用しましたが、問題なく動作しています。

「いいね！」 2
143

このガイドはまだ正確ですか？ガイド全体を読んでテーマコンポーネントを作成しようとしましたが、サンプルテーマコンポーネントを見ると、指示に従っているものが一つもありませんでした。例えば、discourse-brand-headerテーマコンポーネントを見ると、header.htmlでapi.createwidgetなどを使用していたものが、initializerやComponentなどを使用した全く異なるコードにリファクタリングされているようです。非常に複雑なコードです。ガイドではウィジェットを使用したAPIメソッドについて説明していますが、どのコンポーネントも実際にはそれを使用していません。コンポーネントを使用するための更新されたガイドなどはありますか？

編集：ウィジェットAPIは廃止される予定ですが、代わりに何を使用するかのガイドはありますか？ここのガイド全体が非推奨のコードに基づいているように見えますか？

「いいね！」 3
144

それは本当です。ガイドは更新されるべきです。しかし、ファイル構造など、まだ非常に関連性のある部分もあります。

「いいね！」 2
145

はい、SCSS は関連性があるようですが、それ以外は、サンプルテーマのコンポーネントがすべてコンポーネントを使用しており、ここで教えられているものとはまったく異なるコードベースにリファクタリングされているようです。プラグイン API セクションでリンクされているすべてのコンポーネントを確認しましたが、すべてがここでガイドで教えられているものとはまったく異なる方法でリファクタリングされています。ウィジェットはまったく使用されなくなりました。すべてコンポーネントです。ウィジェットが廃止されるため、新しいコンポーネントを実際に適切に使用する方法に関するガイドはありますか？

「いいね！」 2
146

例えば、ちょうど今、この投稿を見つけました：Upcoming Header Changes - Preparing Themes and Plugins - レガシーウィジェットからGlimmerコンポーネントにすべてリファクタリングしたということですか？しかし、このチュートリアルはすべてレガシーウィジェットです。Glimmerコンポーネントとは具体的に何ですか？また、ガイドはありますか？レガシーウィジェットで開発を始める前に、早くもこれに気づけて幸運だったと感じています。このガイドに、ウィジェットはレガシーであり、もう使用すべきではないという注意書きを追加してみてはどうでしょうか？

「いいね！」 2
147

わかりました。Glimmer は新しい Ember コンポーネントであることがわかりました。しかし、Discourse の目次コードを見てみると、驚きました。以前は 10 行程度のコードだったものが、現在は複数のファイルにまたがる数百行の複雑なクラス、デコレーターなどになっています。Ember は React のような状況になり、物事を再び非常に複雑にすることにしたと推測します。テーマコンポーネントは、シンプルなウィジェット API を持つものではなくなり、広範なコーディングが必要になったようです。

「いいね！」 2
148

@ddsgad はい、おっしゃる通りです。このガイドのほとんどは非常に時代遅れになっています。最近、一般的なドキュメントの改善に取り組んでおり、今後数週間でこのガイドを更新/置き換える予定です。

ご指摘の通り、DiscoTOCのような実際の例は良い参考になります。そして、より最新の具体的なガイドをいくつかご紹介します。

Emberとそのコンポーネントに関する一般的な情報については、Emberガイドを参照することをお勧めします。

「いいね！」 6
149

リンクをありがとうございます。大変参考になりました。現在、Discourseトピック（最初の投稿）でカスタムを行い、より良いデザインを作成することに専念しており、これまではプレーンなVanilla JavaScript（querySelectorAllなど）とSCSSでほとんどのことができていましたので、今回は引き続きそれらを使用するつもりです。

「いいね！」 3
150

OP の長くて古いチュートリアルは、より一般的な紹介/案内情報に置き換えられました。これには、よりモダンなテーマ開発パターンに従った、まったく新しい7段階チュートリアルへのリンクが含まれています。

「いいね！」 4
151

全て読みました、楽しかったです！よく説明されていて、とても良い導入でした！

「いいね！」 3
152

これらのガイドが大好きです！ついに api.decorateCookedElement を解読できました。また役立つドキュメントをありがとうございます！

「いいね！」 4