외부 링크 아이콘

안녕하세요 :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("External link:", link.href);
      });
    },
    { id: "external-link", onlyStream: true }
  );
});
1개의 좋아요