「カスタム投稿ボタン」テーマコンポーネント

@staff のメンバーの一人に、このトピックを Customization > Theme component へ移動していただくことは可能でしょうか?そちらに新しいトピックを作成する権限がありません。

:page_facing_up: 概要 Discourse Custom Post Button は、Discourse の投稿内のリンクをスタイル付きのボタンに変換します。
:hammer_and_wrench: リポジトリ github.com/koloki-co/discourse-custom-post-button
:question: インストールガイド テーマまたはテーマコンポーネントのインストール
:books: Discourse テーマ初心者ですか? Discourse テーマの使用に関する入門ガイド

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

これは Koloki Ltd がメンテナンスしているコミュニティ向けのテーマコンポーネントです。公式の Discourse コンポーネントではありません。アルファ版のため、バグが存在する可能性があります。バグの報告や機能のリクエストは GitHub リポジトリ で行ってください。

スクリーンショット

ボタン

特定のユースケース: 「DMで質問する」ボタン

機能

  • [wrap] を使用して、トピックや投稿内のどこでも通常のリンクをボタンに変換します。
  • TCレベルで設定可能なデフォルトの背景色、角丸、パディング、フォントの太さ、テキスト色、ホバー時の不透明度を提供します。これらが設定されていない場合、サイトのデフォルトを使用します。
  • 個々の ボタンについて、デフォルトの背景色を上書きできるようにします。
  • ボタンに説明文を併記することをサポートします。
  • 基になるコンテンツを通常のリンクとして保持するため、ボタンは外部ページや /new-message などの Discourse 内部ルートを開くことができます。

重要: この TC がインストールされている場合、フォーラムのすべてのユーザーがこれらのボタンを作成できます。特定のユーザーにのみボタン作成を制限するには、フルプラグインが必要です。ただし、実際には、ユーザーがインストールされていることとボタンの作成方法を知っている必要があるため、実際にやり方を知っているユーザーは少ないと予想されます。また、Watched Words を使用して、[wrap=custom-button] を含む投稿を承認待ちにフィルタリングすることで、この機能を制限することも可能です。

インストール

管理画面 > 外観 > テーマとコンポーネントコンポーネント タブを開き、インストール を選択し、Git リポジトリの URL からインストール を選択します。以下を使用してください:

https://github.com/koloki-co/discourse-custom-post-button

インストール後、利用可能なようにしたい各アクティブなテーマにコンポーネントを追加してください。

使用方法

基本的なボタン

TC の設定からのデフォルトのボタン色が使用されます

[wrap=custom-button][カスタムボタンのテキスト](https://example.com)[/wrap]

ボタンごとのカラー設定

[wrap=custom-button color=#7CC146][カスタムボタンのテキスト](https://example.com)[/wrap]

説明文付きボタン

[wrap=custom-button][カスタムボタンのテキスト](https://example.com)[/wrap]
[wrap=text-after-button]追加の説明文[/wrap] (新しい行で)

グループへのプライベートメッセージを開く

(注: これは Discourse の組み込み機能を使用して、プレフィルドされたテキスト付きで Composer を開きます - この機能の一部は Theme Component ではなく、Discourse 自体のものであり、単に可能なユースケースのデモとして使用しています。そのグループへの PM を許可するグループ設定が必要です。)

[wrap=custom-button][質問する](/new-message?groupname=somegroup&title=Aask%20Us&body=Please%20type%20your%20question%20here.)[/wrap]

グループの「Full Name」ではなく、スラッグ化された name を使用し、パラメータの値は URL エンコードしてください。グループの**「このグループにメッセージを送信できるユーザーは誰ですか?」**設定が、宛先付きの Composer を開けるかを決定し、ログアウト中の訪問者はログインを求められます。

設定

設定 目的
button_default_color ボタンのデフォルトの背景色とボーダーカラー
button_border_radius ボタンの角丸の半径
button_padding ボタンラベルの周囲のスペース
button_font_weight ボタンラベルの太さ
button_text_color ボタンラベルの色
button_hover_opacity ホバー時のボタンの不透明度

このコンポーネントは利用可能なテーマアイコンのための svg_icons 設定も公開していますが、現在投稿内のボタンにアイコンを挿入する機能はありません。需要があればこの機能を追加します。

備考

  • このコンポーネントは表示のみを変更します。ボタンはリンクのままであり、宛先の権限は変更されません。
  • アクティブな Discourse テーマを読み込まないメールクライアントやその他のコンテキストでは、ボタンスタイルなしで基になるリンクが表示される場合があります。
  • このコンポーネントは MIT License の下でライセンスされています。

このコンポーネントは、トピック投稿にボタンを埋め込む方法 で議論された有用な [wrap] パターンから発展しました。

「いいね!」 3

@theme_authors グループに参加しましたか?

「いいね!」 5

参加リクエストを送信しました。ありがとうございます

「いいね!」 2

承認して、すぐにトピックを移動しました :slight_smile:

「いいね!」 1