Analyse de la marque dans une table des matières automatisée

Ce didacticiel montre la création d'une table des matières interactive pour le contenu de marque long. Il tire parti de plusieurs techniques pour améliorer l'expérience utilisateur, notamment l'analyse de Markdown, l'observateur d'intersection pour la détection de section active, l'animation de défilement en douceur et les transitions Vue.js pour les mises à jour de liste animée.

Une table des matières fournit une navigation rapide dans une page. Ceci est particulièrement utile pour les longs articles, offrant aux utilisateurs un aperçu clair et un accès facile à différentes sections. Ce guide détaille comment transformer le texte de Markdown en une table des matières HTML avec des en-têtes liés, mettant en évidence la section actuellement consultée. Nous implémenterons également les mises à jour de la liste de défilement et d'animation en douceur à l'aide de Vue.js.

Analyse de marque et génération HTML

Le contenu Web utilise souvent Markdown. Nous utiliserons la bibliothèque marked (bien que les alternatives conviennent) pour analyser Markdown en HTML. Le contenu de Markdown est récupéré à partir d'un gist github. La fonction marked convertit le texte de marque récupéré en HTML, qui est ensuite injecté dans le DOM.

 Fonction asynchrone FetchandPaSEmarkDown () {
  const url = 'https://gist.githubusercontent.com/lisilinhart/e9dcf5298adff7c2c2a4da9ce2a3db3f/raw/2f1a0d47eba64756c22460b5d2919d45d8118d42/red_panda.md'
  const Response = attendre fetch (URL);
  const data = attendre la réponse.Text ();
  const htmlfrommarkdown = marked (data, {Sanitize: true});
  retourner htmlfrommarkdown;
}

Le HTML analysé est inséré dans un élément DOM désigné en utilisant innerHTML .

 fonction async init () {
  const $ main = document.QuerySelector ('# app');
  const htmlContent = attendre fetchandParsarkDown ();
  $ main.innerhtml = htmlContent;
}

init ();

Générer la table des matières

L'étape suivante consiste à créer la table des matières à partir des en-têtes (H1 et H2) dans le HTML analysé. Nous utilisons querySelectorAll pour sélectionner ces en-têtes, extraire leur contenu texte, leur profondeur (H1 ou H2) et les attributs d'ID.

 fonction generateLinkmarkup ($ contentElement) {
  CONSEUX CONS = [... $ contentElement.QuerySelectorAll ('H1, H2')];
  const parsedheadings = en-têtes.map (en-tête => ({
    Titre: Heading.InnerText,
    en profondeur: heading.nodename.replace (/ \ d / g, ''),
    id: heading.getAttribute ('id')
  }));
  // ... (reste de la fonction pour générer un balisage HTML)
}

Cela génère un tableau d'objets, chacun représentant un titre. Ces données sont ensuite utilisées pour créer le HTML pour la table des matières à l'aide des littéraux du modèle ES6, ajoutant l'indentation pour les sous-titres (H2). Le HTML résultant est ajouté à l'élément de côté.

Implémentation de l'observateur d'intersection

Pour mettre en évidence dynamiquement la section active de la table des matières, nous utilisons l'API de l'observateur d'intersection. Cette API nous permet de surveiller lorsqu'un élément (dans ce cas, une rubrique) se croit avec la fenêtre.

 fonction createObserver ($ links) {
  const Options = {rootmargin: "0px 0px -200px 0px", seuil: 1};
  const Callback = (entrées, observateur) => handleObserver (entrées, observateur, $ links); // Rappel gère les mises à jour
  Renvoie un nouveau IntersectionObserver (rappel, options);
}

Fonction HandleObserver (entrées, observateur, $ liens) {
  entrées.ForEach (entrée => {
    if (entry.isINTERSECTING && entry.INTERSECTIONRATIO> = 1) {
      UpdateLinks (`# $ {entry.target.getAttribute ('id')}`, $ links);
    }
  });
}

fonction updateLinks (visibleId, $ liens) {
  $ links.ForEach (link => {
    link.classlist.remove («is-active»);
    if (link.getAttribute ('href') === visibleId) link.classList.add ('is-active');
  });
}

La fonction handleObserver vérifie l'intersection et appelle updateLinks pour ajouter / supprimer la classe is-active du lien correspondant dans la table des matières.

Smooth défilement et lien Cliquez sur Manipulation

Cliquez sur un lien dans la table des matières doit faire défiler en douceur la section correspondante. Nous ajoutons un auditeur d'événements à chaque lien, empêchant le comportement par défaut et utilisons window.scroll avec l'option de comportement smooth (sauf si l'utilisateur préfère le mouvement réduit).

 const motionquery = window.matchMedia ('(préfère-réduit le mouvement)');

$ links.ForEach (link => {
  link.addeventListener ("cliquez", evt => handlelinkclick (evt, $ titres, motionquery));
});

fonction handlelinkclick (evt, $ titres, motionquery) {
  evt.PreventDefault ();
  const id = evt.target.getAttribute ("href"). remplace ('#', '');
  const section = $ headings.find (heading => heading.getAttribute ('id') === id);
  section.focus ();
  window.scroll ({
    Comportement: motionquery.matches? «instantané»: «lisse»,
    en haut: section.offsetTop - 20
  });
}

Animer la table des matières avec Vue.js

Enfin, Vue.js<transition-group></transition-group> Le composant est utilisé pour animer l'ajout et la suppression des éléments de liste dans la table des matières. Cela fournit des transitions en douceur lorsque les sections deviennent actives ou inactives. Les transitions CSS appropriées sont définies pour gérer l'animation. (Le code pour l'intégration VUE et CSS est omis par la concision mais constitue la partie finale de la mise en œuvre.) Une fonction de débouchement est recommandée pour empêcher les problèmes d'animation avec un défilement rapide.

Cette approche complète offre une table des matières hautement interactive et conviviale pour le contenu de marque long.

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!