外部リンクアイコン

テーマコンポーネント
1
:information_source: 概要 トピックと投稿内の外部リンクにアイコンを追加します
:hammer_and_wrench: リポジトリ GitHub - denvergeeks/discourse-external-links-icon
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourseテーマは初めてですか？ Discourseテーマ使用の初心者ガイド

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

コアの特集リンクと同じデフォルトのSVGを使用します。例：このリンク！discourse-external-links-icon|18x21

「いいね！」 4
2

ダークモードでこれが見えます。

image
image1179×441 34.2 KB

これは意図された表示ではないと思われますか？

3

コンポーネントは異なるパレットで正常に動作します

Screenshot_20251227_111928_Firefox
Screenshot_20251227_111928_Firefox1997×594 134 KB

しかし、スクリーンショットはカラーパレットに合わせて色を調整しません。コンポーネントがインストールされていないフォーラムでこの機能を提示するには、どのような提案がありますか？リンクを含む大きなスクリーンショットでしょうか？
Discourse のアイコンコンポーネントの使用を提案しようとしていましたが、アイコンの色を変更できません。

example.com

[example.com [wrap=icon id=up-right-from-square][/wrap]]()

4

はい、そう思います。それが期待されるものをよりよく表しているでしょう。

5

説明/例の画像を、グレーの塗りつぶしを持つ透過的な.webpに変更しました。

「いいね！」 1
6

素晴らしい、ずっと良くなりました！

「いいね！」 1
7

こんにちは、私には動作しません。アイコンが内部リンクを含むすべてのリンクに表示されます。

もう一つ、YouTube動画のような直接的な外部リンクを持つタイトルでは、アイコンが二重に表示されます。

image
image548×148 12.5 KB

「いいね！」 4
8

私も同じです。アイコンは内部リンクにも表示されます。

コードを正しく理解していれば、外部リンクを判断するためにURL内の「http*」を検索しているようです。残念ながら、エディタのリンクツールは、自動的に「https://<MyDomain>/..」で始まる完全修飾（絶対）URLを使用します。

これが「内部」リンクに外部リンクアイコンが表示される原因になっていると推測します。

コードを拡張して、「https://<MyDomain>/..」をチェックし、これらを内部として分類することは可能でしょうか？

「いいね！」 1
9

これらの問題を修正するためにPRを作成しました。

これにより、内部リンク（相対的または絶対的）のリンクアイコン、およびタイトルリンクのアイコンが非表示になります。

「いいね！」 4
10

@Lillyさん、ありがとうございます。マージしました。

「いいね！」 2
11

大分昔に、Discourseがfont-familyでFont Awesomeを使っていた頃に、純粋なCSSで似たようなことをしたことがあります。

今はできなくなりましたが、これを使えば似たような効果が得られます。

.cooked {
  a[href^="http"]:not([href*="www.yourdomain.com"]) {
    display: inline-flex;
    align-items: center;

    &::after {
      content: "";
      width: 0.8em;
      height: 0.8em;
      margin-left: 0.2em;
      margin-bottom: 0.4em;
      background-color: currentColor; 
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z'/%3E%3C/svg%3E");
      mask-size: contain;
    }
  }
}

image
image438×136 6.52 KB

ただし、SVGはハードコードされています。

12

こんにちは、またお邪魔します、すみません :grinning_face_with_smiling_eyes:

外部アイコンが Custom Header Links (icons) TC に表示されていますが、表示されるべきではありません。ありがとうございます。

image

13

こんにちは :waving_hand:

これは、私のテーマコンポーネントでこれをどのように使用しているかの例です。

私の場合、コンポーネントがCSSを介してアイコンを動的に変更するため、設定を使用しています。これにより、それらの設定を直接ターゲットにすることができます。（リンクにクラスを追加することは、場合によってはあまりうまくいかないことがあります。）

しかし、あなたのコンポーネントの場合は、おそらく次のように現在のホスト名を除外するだけでよいでしょう。

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.decorateCookedElement(
    (element) => {
      const currentHost = window.location.hostname;

      const selector = `a[href*='//']:not([href^='/']):not([href*='${currentHost}'])`;
      
      const links = element.querySelectorAll(selector);

      links.forEach((link) => {
        console.log("外部リンク:", link.href);
      });
    },
    { id: "external-link", onlyStream: true }
  );
});