Externes Links-Symbol

Themenkomponente
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 }
  );
});