Analyse von Markdown in ein automatisiertes Inhaltsverzeichnis

Dieses Tutorial zeigt, dass ein interaktives Inhaltsverzeichnis für Langform-Markdown-Inhalte erstellt wird. Es nutzt verschiedene Techniken, um die Benutzererfahrung zu verbessern, einschließlich Markdown -Analyse, Intersection -Beobachter für die aktive Erkennung von Abschnitt, reibungslose Scrolling -Animation und Vue.js -Übergänge für Animationslisten -Updates.

Ein Inhaltsverzeichnis bietet eine schnelle Navigation innerhalb einer Seite. Dies ist besonders nützlich für lange Artikel und bietet den Benutzern einen klaren Überblick und einen einfachen Zugriff auf verschiedene Abschnitte. In dieser Anleitung wird beschrieben, wie der Markdown -Text in ein HTML -Inhaltsverzeichnis mit verknüpften Überschriften umwandelt und den aktuell angezeigten Abschnitt hervorgehoben wird. Wir werden auch reibungslose Scrolling- und Animationslisten -Updates mit vue.js. implementieren.

Markdown -Parsing und HTML -Generation

Webinhalte verwendet häufig Markdown. Wir werden die marked Bibliothek (obwohl Alternativen geeignet sind), um den Markdown in HTML zu unterziehen. Der Markdown -Inhalt wird von einem Github -Kern abgerufen. Die marked Funktion wandelt den abgerufenen Markdown -Text in HTML um, der dann in die DOM injiziert wird.

 asynchrische Funktion FetchandParSemarkdown () {
  const url = 'https://gist.githubuSercontent.com/lisilinhart/e9dcf5298adff7c2c2a4da9ce2a3db3f/raw/2f1a0d47Eba64756c2460b5d2919d45d45d8118d42/Red_Pa.md2919d45d8118d42/red_tra.md2/Red';
  const response = wartet avetch (URL);
  const data = warte auf response.text ();
  const htmlfrOrmarkdown = markiert (Daten, {sanitize: true});
  return htmlfrommarkdown;
}

Das analysierte HTML wird unter Verwendung von innerHTML in ein bestimmtes DOM -Element eingefügt.

 asynchrische Funktion init () {
  const $ main = document.querySelector ('#App');
  const htmlContent = warte fetchandparsemarkdown ();
  $ main.InnerHtml = htmlContent;
}

init ();

Erzeugen des Inhaltsverzeichnisses

Der nächste Schritt besteht darin, das Inhaltsverzeichnis aus den Überschriften (H1 und H2) innerhalb des analysierten HTML zu erstellen. Wir verwenden querySelectorAll , um diese Überschriften auszuwählen, ihren Textinhalt, ihre Tiefe (H1 oder H2) und ID -Attribute zu extrahieren.

 Funktion GeneratelinkMarkup ($ contentElement) {
  const hokings = [... $ contentElement.querySelectorAll ('H1, H2')];
  const Parsedheadings = Überschriften.MAP (Heading => ({{{
    Titel: Heading.Innertext,
    Tiefe: Heading.nodename.replace (/\ d/g, ''),
    ID: Heading.getAttribute ('ID')
  }));
  // ... (Rest der Funktion zum Generieren von HTML -Markup)
}

Dies erzeugt eine Reihe von Objekten, die jeweils eine Überschrift darstellen. Diese Daten werden dann verwendet, um die HTML für die Inhaltsverzeichnis mit ES6 -Template -Literalen zu erstellen, wobei die Eindrückung für Unterschwellen (H2) hinzugefügt wird. Das resultierende HTML wird dem beilichen Element hinzugefügt.

Implementierung des Kreuzungsbeobachters

Um den aktiven Abschnitt im Inhaltsverzeichnis dynamisch hervorzuheben, verwenden wir die Schnittbeobachter -API. Diese API ermöglicht es uns, zu überwachen, wenn ein Element (in diesem Fall eine Überschrift) mit dem Ansichtsfenster kreuzt.

 Funktion createObserver ($ links) {
  const options = {rootMargin: "0px 0px -200px 0px", Schwelle: 1};
  const callback = (Einträge, Beobachter) => HandleObserver (Einträge, Beobachter, $ Links); // Callback behandelt Updates
  Neue IntersectionObServer (Rückruf, Optionen) zurückgeben;
}

Funktion HandelsoBserver (Einträge, Beobachter, $ links) {
  Einträge.foreach (Eintrag => {
    if (Eintrag. Issintersecting && Eintrag.
      updatelinks (`#$ {Eintrag.target.getAttribute ('id')}`, $ links);
    }
  });
}

Funktion updatelinks (SaciBleId, $ links) {
  $ links.foreach (link => {
    link.classList.remove ('is-active');
    if (link.getAttribute ('href') === SINDIBISLID) link.classList.add ('is-active');
  });
}

Die Funktion handleObserver prüft und ruft updateLinks auf, um die is-active Klasse aus der entsprechenden Verbindung im Inhaltsverzeichnis hinzuzufügen/zu entfernen.

Smooth Scrolling und Link Klicken Sie Klicken Sie auf Handhabung

Wenn Sie auf einen Link im Inhaltsverzeichnis klicken, scrollen Sie reibungslos zum entsprechenden Abschnitt. Wir fügen jedem Link einen Ereignishörer hinzu, smooth das Standardverhalten verhindern und window.scroll verwendet.

 const motionQuery = window.matchmedia ('(bevorzugt reduzierte Bewegung)');

$ links.foreach (link => {
  link.adDeVentListener ("Click", EVT => HandlelinkClick (EVT, $ Headings, MotionQuery));
});

Funktion HandlelinkClick (EVT, $ Headings, MotionQuery) {
  evt.preventDefault ();
  const id = evt.target.getAttribute ("href"). ersetzen ('#', '');
  const section = $ hokings.find (hading => hading.getAttribute ('id') === id);
  Abschnitt.Focus ();
  window.scroll ({{{
    Verhalten: MotionQuery.Matches? 'Instant': 'glatt',,
    Oben: Abschnitt.offsettop - 20
  });
}

Animieren des Inhaltsverzeichnisses mit Vue.js

Schließlich Vue.js<transition-group></transition-group> Die Komponente wird verwendet, um die Hinzufügung und Entfernung von Listenelementen im Inhaltsverzeichnis zu belasten. Dies liefert reibungslose Übergänge, wenn Abschnitte aktiv oder inaktiv werden. Geeignete CSS -Übergänge werden definiert, um die Animation zu verarbeiten. (Der Code für VUE -Integration und CSS wird für die Kürze weggelassen, bildet jedoch den letzten Teil der Implementierung.) Eine Entfernung wird empfohlen, um Animationsprobleme mit schnellem Scrollen zu verhindern.

Dieser vollständige Ansatz liefert ein hoch interaktives und benutzerfreundliches Inhaltsverzeichnis für Langform-Markdown-Inhalte.

Das obige ist der detaillierte Inhalt vonAnalyse von Markdown in ein automatisiertes Inhaltsverzeichnis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!