Иконка внешних ссылок

Настройка Компонент темы
1
:information_source: Краткое описание Добавляет иконку к внешним ссылкам в темах и сообщениях
:hammer_and_wrench: Репозиторий GitHub - denvergeeks/discourse-external-links-icon · GitHub
:question: Руководство по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Начинающее руководство по использованию тем Discourse

Установить этот компонент темы

Использует SVG по умолчанию (та же иконка, что и для выделенных ссылок в ядре), как в этой ссылке external-link-alt-solid-trans-919191-14x18

Хорошо сочетается как со светлыми, так и с тёмными темами, например…

light-sample

dark-sample

Это просто добавляет иконку. Для полнофункционального решения попробуйте External Link Shield – Exit Confirmation & Trust Gating

В ПЛАНЕ: Настройки для…

  • Позиция
  • Цвет
  • Иконка
  • ??
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

У меня та же проблема. Иконка также появляется на внутренних ссылках.

Если я правильно понял код, он ищет «http*» в URL, чтобы определить внешние ссылки. К сожалению, инструмент ссылок в редакторе автоматически использует полностью квалифицированные (абсолютные) URL, начинающиеся с «https:///..».

Полагаю, именно это вызывает появление иконок внешних ссылок на «внутренних» ссылках.

Можно ли расширить код, чтобы он проверял наличие «https:///..» и классифицировал такие ссылки как внутренние?

1 лайк
9

Я создал PR для исправления этих проблем.

Это скроет иконку ссылки для внутренних ссылок — как относительных, так и абсолютных, а также скроет их в ссылках заголовков.

5 лайков
10

Спасибо @Lilly, я объединил это.

3 лайка
11

Я делал нечто подобное с чистым CSS очень давно, когда 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) на Meta Discourse, хотя их там быть не должно. Спасибо.

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("Внешняя ссылка:", link.href);
      });
    },
    { id: "external-link", onlyStream: true }
  );
});
14

Благодарю за обратную связь. Это должно быть исправлено сейчас!

2 лайка