Sur l’ajout d’ID aux en-têtes

Online Coding Courses for Kids

Voici un examen de deux secondes. Si un élément a un ID, vous pouvez le lier avec un comportement de navigateur naturel. C’est génial si les titres en ont, car il est souvent utile de créer un lien direct vers une section spécifique du contenu.

Step 2

Si je suis si enclin, je pourrais lier directement à cette rubrique, que ce soit à partir d’une URL, comme https://my-website.com/#step-2ou un lien sur la page, comme:

Jump to Step 2

C’est donc idéal si tous les en-têtes ont des ID uniques.

Je trouve cependant que cela représente beaucoup trop de travail d’ajouter manuellement des ID à tous mes en-têtes. Pendant des années et des années, je l’ai fait comme ça en utilisant jQuery sur ce site même (poursuivez-moi):

// Adjust this for targetting the headers important to have IDs
const $headers = $(".article-content > h3");

$headers.each((i, el) => {
  const $el = $(el);

  // Probably a flexbox layout style page
  if ($el.has("a").length != 0) {
    return;
  }

  let idToLink = "";

  if ($el.attr("id") === undefined) {
    // give it ID
    idToLink = "article-header-id-" + i;
    $el.attr("id", idToLink);
  } else {
    // already has ID
    idToLink = $el.attr("id");
  }

  const $headerLink = $("", {
    html: "#",
    class: "article-headline-link",
    href: "#" + idToLink
  });

  $el.addClass("has-header-link").prepend($headerLink);
});

Ce script va plus loin que l’ajout d’ID (s’il n’en a pas déjà un) en ajoutant un # lien à l’intérieur de la rubrique qui renvoie à cette rubrique. Le but de cela est de démontrer que les en-têtes avoir ID, et facilite la tâche comme le lien de copie avec le bouton droit. Voici cette démo, si vous voulez le voir.

Problème! Tout d’un coup, cela a cessé de fonctionner.

Pas le script lui-même, cela fonctionne bien. Mais c’est le comportement du navigateur natif qui permet au navigateur de descendre à l’en-tête lorsque la page se charge est ce qui est éclaté. J’imagine que c’est une condition de course:

  1. Le HTML arrive
  2. La page commence à s’afficher
  3. Le navigateur recherche l’ID dans l’URL pour faire défiler jusqu’à
  4. Il ne le trouve pas…
  5. Oh, attendez-vous!
  6. Faites défiler là-bas.

le Oh, attendez-vous! l’étape provient du script exécutant et mettant cet ID sur l’en-tête. Je ne blâme vraiment pas les navigateurs de ne pas avoir sauté sur des liens insérés dynamiquement. Je suis surpris que cela ait fonctionné aussi longtemps.

Il est préférable d’avoir les identifiants sur les en-têtes au moment où le code HTML arrive. Ce site est WordPress, donc je savais que je pouvais le faire avec une sorte de filtre de contenu. Il s’est avéré que je n’ai même pas eu à déranger car, bien sûr, il existe un plugin pour cela: Karolína Vyskočilová«S Ajouter des liens d’ancrage. Fonctionne très bien pour moi. La technique consiste à ajouter l’ID sur le lien d’ancrage lui-même, ce qui est également tout à fait correct. Je suppose que c’est une autre façon d’éviter de jouer avec les identifiants existants.

Si je n’avais pas WordPress, j’aurais trouvé un autre moyen de traiter le côté serveur HTML pour m’assurer qu’il existe une sorte de lien de titre. Il y a toujours un moyen. En fait, si c’était trop bizarre ou trop lourd ou quoi que ce soit à faire pendant le processus de construction ou dans un filtre côté serveur, j’envisagerais de le faire chez un technicien de service. Je m’amuse avec HTMLRewriter de Cloudflare, qui en est totalement capable.

Close Menu