Icona Link Esterni

Componente del tema
1
:information_source: Riepilogo Aggiunge un’icona ai link esterni in Argomenti e Post
:hammer_and_wrench: Repository GitHub - denvergeeks/discourse-external-links-icon
:question: Guida all’installazione Come installare un tema o un componente tema
:open_book: Nuovo ai temi di Discourse? Guida per principianti all’uso dei temi di Discourse

Installa questo componente tema

Utilizza l’SVG predefinito (la stessa icona dei Link in Evidenza nel core) come questo linkdiscourse-external-links-icon

4 Mi Piace
2

Vedo questo in modalità scura:

image
image1179×441 34.2 KB

Probabilmente non è l’aspetto previsto?

3

Il componente funziona bene con diverse palette

Screenshot_20251227_111928_Firefox
Screenshot_20251227_111928_Firefox1997×594 134 KB

Ma uno screenshot non adatta il suo colore alla palette di colori. Cosa suggeriresti per presentare la funzionalità in un forum in cui il componente non è installato? Uno screenshot più grande che includa il link?
Stavo per suggerire di usare il componente icona di Discourse, ma non riesco a cambiare il colore dell’icona:

example.com

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

4

[quote=“Moin, post:3, topic:392222”]Uno screenshot più grande che includa il link?

[/quote]

Sì, credo di sì? Sarebbe una rappresentazione migliore di cosa aspettarsi.

5

Ho cambiato l’immagine nella descrizione/esempio in un .webp trasparente con un riempimento grigio.

1 Mi Piace
6

Fantastico, sembra molto meglio!

1 Mi Piace
7

Ciao, per me non funziona, l’icona appare su tutti i link, anche quelli interni.

Un’altra cosa, per i titoli che hanno un link esterno diretto come un video di YouTube, l’icona appare due volte:

image
image548×148 12.5 KB

4 Mi Piace
8

Anche a me. L’icona appare anche sui link interni.

Se ho capito bene il codice, cerca “http*” nell’URL per determinare i link esterni. Sfortunatamente, lo strumento link nell’editor utilizza automaticamente URL completamente qualificati (assoluti) che iniziano con “https:///..”.

Presumo che questo causi le icone esterne sui link “interni”.

Il codice potrebbe essere ampliato per verificare la presenza di “https:///..” classificandoli come interni?

1 Mi Piace
9

Ho creato una PR per risolvere questi problemi.

Questo nasconderà l’icona del link per i link interni, relativi o assoluti, e li nasconderà anche nei link del titolo.

4 Mi Piace
10

Grazie @Lilly, ho unito questa modifica.

2 Mi Piace
11

Ho fatto una cosa simile con il CSS puro molto tempo fa, quando Discourse usava font awesome in font-family.

Non è più possibile, ma un effetto simile può essere ottenuto con questo:

.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

Sebbene l’SVG sia codificato in modo fisso.

12

Ciao, sono di nuovo io, scusa :grinning_face_with_smiling_eyes:

Le icone esterne appaiono nel TC Custom Header Links (icons), non dovrebbero. Grazie.

image

13

Ciao :waving_hand:

Ecco un esempio di come lo uso nel mio componente tema.

Nel mio caso, uso le impostazioni per questo perché il componente cambia dinamicamente le icone tramite CSS, permettendomi di indirizzare direttamente tali impostazioni. (Aggiungere una classe ai link non funziona sempre molto bene in alcuni casi.)

Tuttavia, per il tuo componente, puoi semplicemente escludere l’hostname corrente dinamicamente, qualcosa del genere, credo:

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 }
  );
});