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

: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 リポジトリで行ってください。

スクリーンショット

ボタン

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

機能

  • [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 を開きます - その機能の一部はテーマコンポーネントから来ておらず、単に可能なユースケースのデモとして使用しているだけです。そのグループへの PM を許可するグループ設定が必要です。)

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

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

設定

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

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

注意事項

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

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

「いいね!」 6

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

「いいね!」 6

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

「いいね!」 3

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

「いいね!」 3