ユーザープロフィールカードにカスタムボタンを追加する方法

開発
1

ユーザープロフィール概要とカードビューにカスタムボタンを追加するにはどうすればよいですか？
（例：リダイレクトなど）何かを行うCTAを追加したいのですが、データ保存は不要です…

image
image1812×800 88.3 KB

プロフィールカードでも同様です：

image
image946×252 49.6 KB

以下の私の最初のコードはほぼ達成していますが、ヘッダーセクションにあり、ユーザープロフィール概要とカードでそれを行う方法が見つかりませんでした。

<script type="text/discourse-plugin" version="0.4">
    api.decorateWidget('header-buttons:after', helper => {
        if (Discourse.User.current()) {
            const cta = function() {
                // ここで何かを行う...
            };
            return helper.h('button#create-new', {
                className: "btn fa fa-plus",
                onclick: cta
            }, 'CTA' );
        }
    });
</script>
「いいね！」 1
2

こんにちは、ようこそ:wave:
この場所では、プラグインのアウトレットを使用する必要があります。具体的にはuser-profile-controlsです。

例はこちらで確認できます。

「いいね！」 3
3

@Arkshineありがとうございます。プラグインは初めてなので、ヘッダーボタンと同じようなものだと思っていました。

いずれにしても、user-profile-controls はプラグインですか？どのようにすれば実現できるか教えていただけますか？

4

Using Plugin Outlet Connectors from a Theme or Plugin を参照することをお勧めします。質問への回答があります。

基本的に、プラグインのアウトレットは、特定の場所にコードを挿入する方法です。

theme CLI を使用してテーマコンポーネントを作成し、私のテーマコンポーネントで行ったように別のファイル を使用することをお勧めします（テスト/変更できるように、私のリポジトリをクローンすることを躊躇しないでください）。

ただし、<script> タグから引き続きテストできます。

この場合、次のように記述します。

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-controls/my_connector_name'>
  ここにテンプレートコンテンツ
</script>

最初の行に注意してください。コネクタ名として user-profile-controls を使用し、my_connector_name は好きなものにすることができます。

「いいね！」 4
5

素晴らしい！これで理解できました。スクリプトタグでテストできるので、コンポーネントを作成する前にまずテストできますね。どうもありがとうございます :beers:

「いいね！」 3
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.