Liens

Remarques :

Les hyperliens sont essentiels pour connecter les sites web et votre contenu. Pour créer un lien, utilisez simplement l’option d’insertion de lien dans Word ou google doc.

Des liens peuvent être ajoutés dans tout le contenu par défaut et dans les différentes options de mise en forme.

Dans Word et Google Docs, seuls les liens absolus sont acceptés, ce qui facilite généralement la copie et le collage à partir de votre navigateur. Les liens sont automatiquement convertis en liens relatifs à votre site, tandis que les liens externes sont conservés absolus.

Les liens sont souvent utilisés au-delà des liens de texte et de référence, par exemple des médias incorporés ou des fragments référencés intégrés dans la page.

Exemple :

Voir Sortie en direct

Structure de contenu :

Voir Contenu dans le document

Code :

Comme les liens sont considérés comme du contenu par défaut, ils sont stylisés dans du code CSS de projet ou de bloc. Aucun code JavaScript n’est généralement utilisé.
Il n’existe aucun code de style associé au lien dans le projet standard.

Mention spéciale : Microsoft Word Online n'autorise pas les liens sur les images. Une solution de contournement serait donc de laisser les auteurs placer un lien directement sous l'image, puis l'encapsuler côté client, par ex.

/**
 * Wraps images followed by links within a matching <a> tag.
 * @param {Element} container The container element
 */
function wrapImgsInLinks(container) {
  const pictures = container.querySelectorAll('picture');
  pictures.forEach((pic) => {
    const link = pic.nextElementSibling;
    if (link && link.tagName === 'A' && link.href) {
      link.innerHTML = pic.outerHTML;
      pic.replaceWith(link);
    }
  });
}

Mention spéciale : il est recommandé de gérer certains liens qui doivent être ouverts dans une nouvelle fenêtre en fonction de s’il s’agit de liens externes ou de fichiers PDF (par exemple) côté client, par exemple.

/**
 * Handles external links and PDFs to be opened in a new tab/window
 * @param {Element} main The main element
 */
export function decorateExternalLinks(main) {
  main.querySelectorAll('a').forEach((a) => {
    const href = a.getAttribute('href');
    if (href) {
      const extension = href.split('.').pop().trim();
      if (!href.startsWith('/')
        && !href.startsWith('#')) {
        if (!href.includes('xyz.com') || (extension === 'pdf')) {
          a.setAttribute('target', '_blank');
        }
      }
    }
  });
}