Sur l'ajout d'identiques aux titres

Ajout d'ID aux titres pour la liaison lisse

Cet article relève du défi de créer des liens facilement accessibles à des sections spécifiques d'une page Web, en particulier ciblant les en-têtes. Le concept de base est simple: les titres avec des ID uniques permettent une liaison directe via le comportement du navigateur (par exemple, https://my-website.com/https://www.php.cn/link/86317a3269e7927536b010c2615aeab5 ).

Par exemple, le titre:

<h3 id="Étape"> Étape 2</h3>

peut être lié à l'utilisation:

 <a href="https://www.php.cn/link/86317a3269e7927536b010c2615aeab5">Sautez à l'étape 2</a>

Bien que l'ajout manuellement des ID à tous les titres soit fastidieux, l'auteur a initialement utilisé JQuery pour automatiser ce processus sur leur site Web. Ce script a non seulement ajouté des ID (en cas de manque), mais a également inséré un lien dans chaque en-tête pour une climatisation pratique.

Cependant, cette approche s'est avérée peu fiable en raison d'une condition de course: le navigateur a tenté de localiser l'ID avant que le script jQuery ne l'a ajouté. Cela met en évidence l'importance d'avoir des ID présents dans le HTML avant le début du rendu de la page.

La solution de l'auteur, tirant parti de leur site WordPress, impliquait un plugin ("Ajouter des liens d'ancrage" par Karolína Vyskočilová) qui ajoute élégamment des ID aux liens d'ancrage, en évitant les conflits avec les ID existants.

Pour les sites non WordPress, le traitement HTML côté serveur (pendant le processus de construction ou via un filtre côté serveur) est recommandé pour s'assurer que les ID sont inclus dans le HTML initial. Alternativement, un travailleur de service, en utilisant éventuellement un outil comme HTMLrewRiter de CloudFlare, propose une solution côté client pour obtenir le même résultat. La clé est de s'assurer que les ID sont disponibles avant que le navigateur ne déclenche son comportement de liaison.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!