Discourse は最近 api.decorateWidget を非推奨にしました。これは、カスタムヘッダーアイコンを挿入し、現在のユーザー名を URL 経由で投稿するために使用していました。
新しい headerIcons API を使用して、ユーザーの現在のユーザー名を HTTP 経由で投稿するにはどうすればよいでしょうか？ ドキュメントや実装例が見つかりませんでした。Customer Header Link プラグインでも方法が見つかりませんでした。
ご協力いただけると幸いです。以下は、ユーザー名を投稿するために decorateWidget API を使用した現在のコードです。
<script type="text/discourse-plugin" version="0.12">
const { iconNode } = require("discourse-common/lib/icon-library");
let icon = iconNode('calculator');
var currentUser = api.getCurrentUser();
var username = currentUser.username;
api.decorateWidget('header-icons:before', helper => {
const showExtraInfo = helper.attrs.minimized;
if(!showExtraInfo) {
return helper.h('li#calculator', [
helper.h('form#header-calculator.icon', {
action:'https://example.com/',
method:'post'
}, [
helper.h('button', {name:'u', value: username},[
iconNode('calculator'),
])
])
]);
}
});
</script>
こんにちは。
お手伝いしますが、その前に何をやろうとしているのか説明してもらえますか？
例えば、フォームが表示されるメニューを表示しようとしていますか？
それとも、ユーザー名をラベルにしたボタンで、どこかのURLにリダイレクトするだけですか？
ヘッダーアイコンをクリックすると、指定されたURLにユーザー名を投稿します。
実際にはフォームは表示されません。ヘッダーアイコンのみが表示されます。投稿アクションはバックグラウンドで実行されます。混乱させて申し訳ありません。投稿のタイトルから「フォーム」を削除します。
ユーザー名を含む外部URLへのリダイレクトです。
新しいAPIを使用した基本的な例を次に示します。
import { apiInitializer } from "discourse/lib/api";
import DButton from "discourse/components/d-button";
export default apiInitializer("1.8.0", (api) => {
const currentUser = api.getCurrentUser();
if (!currentUser) {
return;
}
const url =
"https://example.com/?u=" + encodeURIComponent(currentUser.username);
const iconComponent = `
<li class="calculator">
<DButton
@href={{url}}
@icon="calculator"
class="icon btn-flat"
title="Calculator"
target="_blank"
/>
</li>`;
api.headerIcons.add("calculator", iconComponent, { before: "search" });
});
calculator は一意の名前です。iconComponent は、ここで見られるインラインのGlimmer <template> を参照しますが、components ディレクトリで作成したGlimmerクラスコンポーネントを参照することもできます。before または after の後にヘッダーアイコンの一意の名前を指定することで、アイコンの配置場所を選択できます。
ご自由に変更してください！
注意：
さらにヘルプが必要な場合はお知らせください！
「いいね！」 3
こんにちは @Arkshine 様
詳細な説明をありがとうございます。\u003chead\u003e にコードを挿入してみましたが、アイコンが表示されません。何が間違っていたのでしょうか？
<script type="text/discourse-plugin">
import { apiInitializer } from "discourse/lib/api";
import DButton from "discourse/components/d-button";
export default apiInitializer("1.8.0", (api) => {
const currentUser = api.getCurrentUser();
if (!currentUser) {
return;
}
const url =
"https://example.com/?u=" + encodeURIComponent(currentUser.username);
console.log("url: " + url)
const iconComponent = <template>
<li class="calculator">
<DButton
@href={{url}}
@icon="calculator"
class="icon btn-flat"
title="Calculator"
target="_blank"
/>
</li>
</template>;
api.headerIcons.add("calculator", iconComponent, { before: "search" });
});
</script>
「いいね！」 1
@littleviolette こんにちは、ここでは管理UIで実行できません。
Theme CLI を使用すると、コンピューター上で簡単にテーマコンポーネントを作成できます。
その後、お好みのテキストエディタ（vscodeなど）でファイルを編集し、イニシャライザにコードを追加します。/javascripts/discourse/api-initializers/my-header-icon.gjs にファイルを作成し、コードを貼り付けます。about.json でデフォルト値を変更することもできます。
本番フォーラムにコンポーネントをインストールする次のステップは次のとおりです。
- コンポーネントをGitHubに配置し、管理UIでリポジトリリンクを使用してインストールできます。
- または、コンピューター上のディレクトリをzip化し、管理UIでデバイスからインストールします。
試してみて、問題があればお知らせください！
「いいね！」 3
