Icône de lien externe

Composant de thème
1
:information_source: Résumé Ajoute une icône aux liens externes dans les sujets et les publications
:hammer_and_wrench: Dépôt GitHub - denvergeeks/discourse-external-links-icon
:question: Guide d’installation Comment installer un thème ou un composant de thème
:open_book: Nouveau dans les thèmes Discourse ? Guide du débutant pour utiliser les thèmes Discourse

Installer ce composant de thème

Utilise le SVG par défaut (la même icône que les liens en vedette dans le cœur) comme ce liendiscourse-external-links-icon

4 « J'aime »
2

Je vois ceci en mode sombre :

image
image1179×441 34.2 KB

Ce n’est probablement pas l’apparence prévue ?

3

Le composant fonctionne bien avec différentes palettes

Screenshot_20251227_111928_Firefox
Screenshot_20251227_111928_Firefox1997×594 134 KB

Mais une capture d’écran n’ajuste pas sa couleur à la palette de couleurs. Que suggéreriez-vous pour présenter la fonctionnalité sur un forum où le composant n’est pas installé ? Une capture d’écran plus grande qui inclut le lien ?
J’étais sur le point de suggérer d’utiliser le composant d’icône Discourse, mais je suis incapable de changer la couleur de l’icône :

example.com

[example.com [wrap=icon id=up-right-from-square][/wrap]]()

4

Oui, je pense ? Ce serait une meilleure représentation de ce à quoi s’attendre.

5

J’ai changé l’image dans la description/l’exemple pour un .webp transparent avec un remplissage gris.

1 « J'aime »
6

Génial, ça a l’air bien mieux !

1 « J'aime »
7

Bonjour, cela ne fonctionne pas pour moi, l’icône apparaît sur tous les liens, même internes.

Autre chose, pour les titres ayant un lien externe direct comme une vidéo YouTube, l’icône apparaît deux fois :

image
image548×148 12.5 KB

4 « J'aime »
8

Pareil ici. L’icône apparaît également sur les liens internes.

Si j’ai bien compris le code, il recherche « http* » dans l’URL pour déterminer les liens externes. Malheureusement, l’outil de lien dans l’éditeur utilise automatiquement des URL entièrement qualifiées (absolues) commençant par « https:///.. ».

Je suppose que cela provoque l’apparition des icônes externes sur les liens « internes ».

Le code pourrait-il être étendu pour vérifier « https:///.. » et classer ceux-ci comme internes ?

1 « J'aime »
9

J’ai créé une PR pour corriger ces problèmes.

cela masquera l’icône de lien pour les liens internes, relatifs ou absolus, et les masquera également dans les liens de titre.

4 « J'aime »
10

Merci @Lilly, j’ai fusionné ceci.

2 « J'aime »
11

J’ai fait quelque chose de similaire avec du CSS pur il y a longtemps lorsque Discourse utilisait Font Awesome dans font-family.

Ce n’est plus possible, mais un effet similaire peut être obtenu avec ceci :

.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

Le SVG est codé en dur, cependant.

12

Salut, c’est encore moi, désolé :grinning_face_with_smiling_eyes:

Les icônes externes apparaissent sur le TC Custom Header Links (icons), elles ne devraient pas. Merci.

image

13

Bonjour :waving_hand:

Voici un exemple de la façon dont je l’utilise dans mon composant de thème.

Dans mon cas, j’utilise des paramètres pour cela car le composant modifie dynamiquement les icônes via CSS, ce qui me permet de cibler ces paramètres directement. (Ajouter une classe aux liens ne fonctionne pas toujours très bien dans certains cas.)

Cependant, pour votre composant, vous pouvez simplement exclure l’hôte actuel dynamiquement, quelque chose comme ceci, je pense :

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