外部链接图标

主题组件
1
:information_source: 摘要 为主题和帖子中的外部链接添加图标
:hammer_and_wrench: 代码仓库 GitHub - denvergeeks/discourse-external-links-icon
:question: 安装指南 如何安装主题或主题组件
:open_book: Discourse 主题新手？ Discourse 主题使用入门指南

安装此主题组件

使用默认的 SVG（与核心中的“精选链接”图标相同），如下所示：此链接discourse-external-links-icon

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:///..”开头的完全限定（绝对）URL。

我假设这导致了“内部”链接上出现外部图标。

代码能否扩展以检查“https:///..”并将这些归类为内部链接？

1 个赞
9

我创建了一个拉取请求 (PR) 来修复这些问题。

这将隐藏内部链接（相对或绝对）的链接图标，并且也会隐藏标题链接中的图标。

4 个赞
10

感谢 @Lilly，我已经合并了此项。

2 个赞
11

我很久以前在 Discourse 使用 font-awesome 作为 font-family 时做过类似的事情。

现在已经不可能了，但可以用这个实现类似的效果：

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