カスタムコンポーネント -- 任意のプラグインアウトレットにボタンまたはテキストを追加

[pfaffman (Jay Pfaffman)]

	概要	どこにでもボタンやテキストを追加する機能
	リポジトリ	https://github.com/literatecomputing/discourse-custom-components
	インストールガイド	テーマまたはテーマコンポーネントのインストール方法
	Discourseテーマは初めてですか？	Discourseテーマ使用の初心者ガイド

このテーマコンポーネントをインストール

プラグインアウトレットのどこにでもリンクボタンや任意のテキストを追加できます。（画像内の透かしは無視してください。ステージング/テストサイトでスクリーンショットを撮りました。）

プラグインアウトレットがどこにあるかを確認するには、https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215 を使用してください。プラグインアウトレットが何であるかわからない場合は、https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727 を確認できますが、このコンポーネントを使用すると、プログラミングを行ったり、プラグインアウトレットについて真剣に理解したりすることなく、いくつかの制限付きでテキストを任意のプラグインアウトレットに挿入できます。

このプラグインは、ユーザープロファイルやユーザーカードに「購読するにはここをクリックしてください。そうすればプライベートメッセージを送信できます」というボタンを表示したい人のために開発を始めました。彼らは、プライベートメッセージを送信できないユーザーに対してボタンが表示されることを望んでいました。私が思うほど賢くないことがあるため、グループを使用してボタンが表示されるかどうかを判断するようにコンポーネントを作成しました。このアプローチの1つの問題は、スタッフメンバーが購読者グループに含まれていなかったため、プライベートメッセージを送信できるにもかかわらず、「購読する必要があります」というボタンが表示されてしまうことでした。また、グループは非表示になっていたため、テーマコンポーネントでそれを使用することはそもそも不可能でした。私は、ボタンを表示するかどうかを判断するために currentUser.can_send_private_messages を使用するように、そのテーマコンポーネントを書き直しました。

これは誰のためですか？

リンク付きのボタン、または特定のグループに対して表示/非表示が切り替わる任意のテキストを挿入したい場合は、これを任意のプラグインアウトレットに挿入できます。メンバーではないユーザーを除くすべてのメッセージの間に「購読する必要があります」というリンクボタンを追加したいですか？これはそれを実現します。任意のHTMLをプラグインアウトレットに貼り付けて、どのように見えるか確認したいですか？これも可能です。

開発者にとってのメリット

このテーマには、次の方法に関するいくつかの簡単な例が含まれています。

• Objects type for theme setting の使用
• api.renderInOutlet の使用（こちらで説明されている）により、設定によって制御されるアウトレットにGlimmerコンポーネントを貼り付けることができます。connectors ディレクトリにファイルを作成するのではなく
• currentUser にアクセスするシンプルなGlimmerコンポーネントの記述
• コンポーネントを別の（インライン）テンプレートにラップすることで、データを渡せるようにする
• テーマ設定からMarkdownの制約なしに任意のHTMLを表示する。確かに、おそらく

@Discourse

Emberの html-safe ヘルパーをここで使用でき、テキストの代わりにHTMLがレンダリングされます。

しかし、.gjs ファイル内の <template> 内でこれを試みている場合、動作は少し異なります（例：{{htmlSafe component.text}}）

[NateDhaliwal]

スペースにより、テキストが太字にならない。

---

素晴らしいコンポーネントです！

[jrgong]

ボタンのURLにプレースホルダーを追加することは可能でしょうか。例えば、ユーザーがいるトピックIDをURLに含めるなどです。

[pfaffman (Jay Pfaffman)]

予算があれば、確認します。

ボタンにトピックIDがあった場合、どのような機能になりますか？

もし解決してプルリクエストを作成したい場合は、おそらく受け入れます。

@jrgong

ボタンのURLにプレースホルダーを追加することは可能でしょうか？例えば、ユーザーがいるトピックIDをURLに含めるなど。

答えはおそらく「いいえ」ですが、ここで説明されている回避策を使用できると思います。

@Discourse

他のEmberコンポーネントをブロックとして使用することもできます。正しい名前を使用するだけです。たとえば、コアにはsignup-ctaというEmberコンポーネントが含まれており、サイドバーでそのまま使用できます。パラメータのセットを期待するコンポーネントは使用できませんが、別のテーマで独自のEmberコンポーネントをビルドし、サイドバーのblocks設定で名前だけで参照することはできます。

[jrgong]

Hi @pfaffman

ビジネスアカウントのユーザーグループのメンバー全員の各トピックにこのようなボタンセットを追加したいと考えています。
そのボタンは、ユーザーが現在いるURLを含む新しいPMを作成するトリガーとなります。
これにより、ビジネス顧客は特定のトピックをピン留め、ハイライト、または「スポンサー」として私たちにリクエストを送信できます。

[pfaffman (Jay Pfaffman)]

ご存知の通り、新しいトピックコンポーザーを開くURLを作成できます。それをテーマコンポーネントによって追加されるリンクにすることができます。

@jrgong

そして、ユーザーが現在いるURLが含まれます。

テーマコンポーネントにコードを追加しないとそれは不可能だと思います（しかし、可能かもしれません）。誰かがそれについてアイデアを持っていて、ここで（または他のトピックで）そのソリューションを提供するかもしれません。もしそうでなければ、私に連絡するか、#marketplaceで必要なものと予算の説明を投稿してください。

[Cate_Soule]

デモのテキストブロックがデモボタンやその他と揃っていません。ブロックアウトレットで extra-nav-item を使用しています。

[pfaffman (Jay Pfaffman)]

追加したボタンに、他のボタンのクラスを追加する必要があると思います。

[Cate_Soule]

どういう意味ですか？デモボタンと同じクラスを使ってみました。

[pfaffman (Jay Pfaffman)]

はい。それはボタンではなくテキストなので、そこにある他のボタンのように見えるように、いくつかのCSSを追加する必要があります。

テーマコンポーネントはテキストを目的の場所に配置しましたが、希望どおりにスタイルを設定するように設計されていません。

テーマのCSSにこれを追加すると機能するはずです。

.custom-component.btn-custom {
  display: inline-flex;
  align-self: center;
}

[Cate_Soule]

こんにちは、動作しません。また、テキストブロックグループが「全員」に設定されていても、ゲストにはテキストブロックが表示されません。

[pfaffman (Jay Pfaffman)]

テキストブロックのクラスをテーマ設定で、私が示したCSSのクラスと一致させる必要があります。

@Cate_Soule

また、テキストブロックグループが「すべて」に設定されていても、ゲストにはテキストブロックが表示されません。

また、一致したグループに表示するのではなく、一致したグループを非表示にするように設定を変更する必要があります。

さらにサポートが必要で、ご予算がおありでしたら、私のメールアドレスはユーザーカードに記載されています。

[Cate_Soule]

ありがとうございます！CSSが機能するようになりました！

[pfaffman (Jay Pfaffman)]

素晴らしい！動作してよかったです！あのCSSの類は私にはまだ難しいです。