Externes Links-Symbol

Themenkomponente
1
:information_source: Zusammenfassung Fügt ein Symbol zu externen Links in Themen und Beiträgen hinzu
:hammer_and_wrench: Repository GitHub - denvergeeks/discourse-external-links-icon
:question: Installationsanleitung So installieren Sie ein Theme oder eine Theme-Komponente
:open_book: Neu bei Discourse Themes? Leitfaden für Anfänger zur Verwendung von Discourse Themes

Diese Theme-Komponente installieren

Verwendet das Standard-SVG (dasselbe Symbol wie bei „Hervorgehobene Links“ im Kern) wie dieser Linkdiscourse-external-links-icon

4 „Gefällt mir“
2

Ich sehe das im Dunkelmodus:

image
image1179×441 34.2 KB

Das ist wahrscheinlich nicht das beabsichtigte Aussehen?

3

Die Komponente funktioniert einwandfrei mit verschiedenen Paletten

Screenshot_20251227_111928_Firefox
Screenshot_20251227_111928_Firefox1997×594 134 KB

Aber ein Screenshot passt seine Farbe nicht an die Farbpalette an. Was würden Sie vorschlagen, um die Funktion in einem Forum zu präsentieren, in dem die Komponente nicht installiert ist? Ein größerer Screenshot, der den Link enthält?
Ich wollte gerade vorschlagen, die Discourse-Icon-Komponente zu verwenden, aber ich kann die Farbe des Icons nicht ändern:

example.com

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

4

[quote=“Moin, post:3, topic:392222”]Ein größerer Screenshot, der den Link enthält?

[/quote]

Ja, ich denke schon? Das wäre eine bessere Darstellung dessen, was zu erwarten ist.

5

Ich habe das Bild in der Beschreibung/im Beispiel zu einem transparenten .webp mit einer grauen Füllung geändert.

1 „Gefällt mir“
6

Großartig, sieht viel besser aus!

1 „Gefällt mir“
7

Hallo, es funktioniert bei mir nicht, das Icon erscheint bei allen Links, auch bei internen.

Eine andere Sache: Bei Titeln, die einen direkten externen Link wie ein YouTube-Video haben, erscheint das Icon doppelt:

image
image548×148 12.5 KB

4 „Gefällt mir“
8

Dasselbe hier. Das Symbol erscheint auch bei internen Links.

Wenn ich den Code richtig verstanden habe, sucht er nach „http*“ in der URL, um externe Links zu bestimmen. Leider verwendet das Link-Tool im Editor automatisch vollständig qualifizierte (absolute) URLs, die mit „https://<MeineDomain>/..“ beginnen.

Ich nehme an, dass dies die externen Symbole bei „internen“ Links verursacht.

Könnte der Code erweitert werden, um nach „https://<MeineDomain>/..“ zu suchen und diese als intern einzustufen?

1 „Gefällt mir“
9

Ich habe einen PR erstellt, um diese Probleme zu beheben.

Dies wird das Link-Symbol für interne Links, relativ oder absolut, ausblenden, sowie es in Titel-Links ausblenden.

4 „Gefällt mir“
10

Danke @Lilly, ich habe das zusammengeführt.

2 „Gefällt mir“
11

Ich habe vor langer Zeit etwas Ähnliches mit reinem CSS gemacht, als Discourse Font Awesome in der font-family verwendet hat.

Das ist jetzt nicht mehr möglich, aber ein ähnlicher Effekt kann mit diesem erreicht werden:

.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

Allerdings ist das SVG fest codiert.

12

Hallo, ich bin es wieder, entschuldigung :grinning_face_with_smiling_eyes:

Die externen Symbole erscheinen im TC unter Custom Header Links (icons), sollten sie aber nicht. Danke.

image

13

Hallo :waving_hand:

Hier ist ein Beispiel dafür, wie ich dies in meiner Theme-Komponente verwende.

In meinem Fall verwende ich Einstellungen dafür, da die Komponente Symbole dynamisch über CSS ändert, wodurch ich diese Einstellungen direkt ansprechen kann. (Das Hinzufügen einer Klasse zu Links funktioniert in manchen Fällen nicht immer sehr gut.)

Für Ihre Komponente können Sie jedoch einfach den aktuellen Hostnamen dynamisch ausschließen, ungefähr so, denke ich:

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("Externer Link:", link.href);
      });
    },
    { id: "external-link", onlyStream: true }
  );
});