テーマJavascriptを複数のファイルに分割する

複雑なテーマの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 の違いは何ですか? :crying_cat_face:)

「いいね!」 1

ここにあるファイルはAPIを使用します。私もしばらくの間、なぜapi-initializersファイルをinitializersに置けないのか疑問に思っていました。

ええ。理解するのは難しいですね。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