テーマ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