複雑なテーマのJavaScriptは、整理整頓のために複数のファイルに分割できます。
この機能を使用するには、テーマディレクトリ内の/javascriptsフォルダにファイルを追加するだけです。これらのファイルはDiscourse UIから編集できないため、Theme CLIを使用するか、gitからテーマをソース化する必要があります。
JavaScriptファイルは、core/plugins内のファイルとまったく同じように扱われるため、同じファイル/フォルダ構造に従う必要があります。テーマファイルはcore/pluginsの後にロードされるため、ファイル名が一致する場合、テーマのバージョンが優先されます。
例として、テーマに単一のファイルを追加することで、https://meta.discourse.org/t/adding-to-plugin-outlets-using-a-theme/32727を達成できます。
/javascripts/my-theme/connectors/discovery-list-container-top/add-header-message.gjs
import Component from "@glimmer/component"; import { service } from
"@ember/service"; export default class HeaderMessage extends Component {
@service currentUser;
<template>
Welcome
{{this.currentUser.username}}
</template>
}
JS APIを使用するには、イニシャライザを作成します。
/javascripts/discourse/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// Your code here
});
Webワーカーなどのまったく異なる.jsアセットが必要な場合は、こちらのトピックを確認してください。
このドキュメントはバージョン管理されています - 変更の提案はgithubで行ってください。
「いいね!」 27
core/plugins のファイル階層について何も知らない場合、新しいテーマコンポーネントを作成するためにここに来たとしたら、どこを見ればわかるでしょうか?ディレクトリやその中のファイルの命名規則は何ですか?
流通しているさまざまなテーマ/コンポーネントを見ていると、さまざまなネストスキームやサブディレクトリが飛び交っています。パターンを把握したり、ドキュメントを見つけたりすることができませんでした。(例: /initializers と /api-initializers と /pre-initializers の違いは何ですか?
)
「いいね!」 1
ここにあるファイルはAPIを使用します。私もしばらくの間、なぜapi-initializersファイルをinitializersに置けないのか疑問に思っていました。
pfaffman
(Jay Pfaffman)
34
ええ。理解するのは難しいですね。3時間かけて何かを作り上げたのに、名前を間違えたり、間違った場所に置いたり、あるいは、それを(plugin.rbで、jsファイルに含める際に、どのパスを使うべきか?拡張子が必要か?)など、多くの方法があるうちの1つに含め忘れたりしたことを思い出すのは、考えたくありません。
一番良いのは、DiscourseテーマCLIコンソールアプリをインストールしてテーマの作成を支援する を使用して、テーマのスケルトンを作成してもらうことです。そして、それは自動的に本番サーバー(普通の古い本番サーバー)にアップロードし、(通常は)ブラウザを自動的にリロードしてくれるので、デバッグが非常に簡単になります。
違いがあるのかどうか(あると思いませんが、あまりよく分かりません)は分かりません。テーマのスケルトンにあるものを使用します。
all-the-themes というリポジトリがあります。それを取得して、例を検索することができます。そして、常に最近変更されたものを使用してください。
「いいね!」 3
EmberJS(およびRails)の多くは、慣習に依存しています。これはほとんどの場合素晴らしいことですが、たとえわずかな間違い、例えば命名規則を間違えただけでも、信じられないほどイライラすることがあります。
「いいね!」 3
FWIW、api-initializers/ についてはこちらで説明を見つけました。
(そして、それがEmberのドキュメントに接続され、意味が通るようになります。)
それでも、ディレクトリ構造の可能性について、基本的な列挙/説明を1つのドキュメントで確認できると良いでしょう。(例えば、connectors/ があることは知っていますが、他にもありますか?)
また、FWIW:Theme CLI アプリはスケルトンを以下からプルします。
そこには api-initializers/ についてしか言及されていません。
(実際、Theme CLI アプリを使用していますが、すでにテーマコンポーネントの初期段階を作成した後で使い始めたため、スケルトンのステップはスキップしました。)
「いいね!」 2