外部链接图标

主题组件
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("External link:", link.href);
      });
    },
    { id: "external-link", onlyStream: true }
  );
});