External Link Shield – 離脱確認と信頼ゲーティング

:information_source: 概要 このテーマコンポーネントは、調理済み投稿内の外部リンクに対して設定可能な保護機能を追加します。信頼レベルに基づくルール、オプションのログインおよび情報リダイレクト、信頼できるドメインの視覚的インジケーター、カスタマイズ可能な離脱確認モーダルを適用します。
:eyeglasses: プレビュー Theme Creator
:hammer_and_wrench: リポジトリ https://github.com/VaperinaDEV/external-link-shield
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourseテーマは初めてですか? Discourseテーマを使用するための初心者ガイド

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

こんにちは :waving_hand:

調理済み投稿内の外部リンクに対するきめ細かな制御を追加するテーマコンポーネントを共有したいと思います。これは以下を組み合わせています。

  • 信頼レベルに基づくアクセス制御
  • 匿名ユーザー保護
  • カスタムの離脱確認モーダル
  • 信頼できるドメインと不明なドメインの視覚的インジケーター

このコンポーネントは、外部リンクが法的、セキュリティ、または信頼性に関する影響を及ぼす可能性のあるコミュニティ向けに設計されています。


:sparkles: 特徴

:gear: 設定可能な信頼レベルルール

すべての信頼レベルに基づく動作は、テーマ設定を通じて完全に設定可能です。

個別に有効または無効にできます。

  • 匿名ユーザーのブロック
  • TL0 の情報提供リダイレクト
  • TL1 の手動表示要件
  • より高い信頼レベルに対する離脱確認モーダル

これにより、コンポーネントは、厳格なリンクシールドから最小限のユーザー摩擦まで、非常に異なるコミュニティポリシーに適応できます。

:locked_with_key: 信頼レベルを認識する外部リンク

外部リンクは、閲覧者の信頼レベルに基づいて異なる動作をします。

  • 匿名ユーザー
    • 外部リンクは、設定で定義されたログインリンクまたはカスタムURLに置き換えられます。
  • TL0
    • リンクは設定可能なリダイレクトに置き換えられます。たとえば、信頼レベルを説明するトピックや、設定で定義されたその他のURLなどです。
  • TL1
    • リンクには手動での表示が必要です(クリックして表示)。その後、リンクをクリックすると離脱確認モーダルが表示されます。
  • TL2以上
    • リンクは通常通り動作しますが、常に離脱確認モーダルが表示されます。

:door: 離脱確認モーダル

フォーラムを離れる前に、ユーザーはモーダルを目にします。このモーダルは以下を行います。

  • コミュニティを離れることを明確に伝えます
  • 完全な宛先URLを <code> タグで表示します
  • ユーザーの external_links_in_new_tab の設定を尊重します

これは特に以下の場合に役立ちます。

  • コンプライアンスが重視されるコミュニティ
  • フィッシング対策
  • 経験の浅いユーザーへの教育


:magnifying_glass_tilted_left: 設定によるドメインベースの動作

このコンポーネントは、2つのテーマ設定を導入します。

internal_domains:
  type: list
  default: ""
  description: "あなたのフォーラムとCDNドメイン(例:example.com|example-cdn.com)。これらにはアイコンもモーダルも表示されません。"

excluded_domains:
  type: list
  default: ""
  description: "信頼できる外部リンクドメイン(例:youtube.com|google.com)。これらには鍵アイコンが表示されますが、モーダル/シールドはスキップされます。"
  • 内部ドメイン
    • 内部として扱われます → アイコンもモーダルもなし
  • 除外された(信頼できる)ドメイン
    • :locked: 鍵アイコンを表示します
    • 信頼レベルによる制限とモーダルをスキップします
  • その他のすべての外部リンク
    • 外部リンクアイコンを表示します
    • 信頼レベルに応じて制限または確認されます

:artist_palette: 視覚的インジケーター (SCSS)

アイコンは純粋にCSSによって追加されます。

  • 不明な外部リンク → 外部リンクアイコン
  • 信頼できる外部リンク → 鍵アイコン(成功色)

これにより、DOMがすっきりし、JSベースのアイコン挿入を回避できます。

このスクリーンショットは、コンポーネントが以下を視覚的に区別する方法を示しています。

  • 除外されたドメイン: 信頼できる外部リンク(鍵アイコン、離脱確認なし)、
  • 内部ドメイン: 内部リンク(アイコンなし、離脱確認なし)、
  • 不明な外部リンク(離脱確認付きの外部リンクアイコン)。

:pushpin: ユースケース

このコンポーネントは、以下を行いたい場合に役立ちます。

  • 安全でない、または誤解を招く外部リンクからユーザーを保護する
  • フォーラムを離れる前に新しいユーザーを教育する
  • コミュニティの信頼の進展を強制する
  • UXを損なうことなく法的/コンプライアンスの免責事項を追加する
「いいね!」 6

素晴らしいテーマコンポーネントです!!!

私たちは実際に同様のものを構築しており、クリック数バッジを非表示にして、代わりに認証済み/危険バッジに置き換えています。

私たちは主に、アフィリエイトパートナーシップを結んでいる認証済み/信頼できるベンダーやマーチャントのためにそれを使用しました。

さらに、私たちのポップアップには、テーマコンポーネントのオブジェクト設定エディタを通じて管理されるクーポンコードも表示されます。

「いいね!」 2