Inhaltsverzeichnis
- Hier alle Dateien, welche hinzugefügt bzw. geändert wurden.
- Code Block hervorheben und Kopierfunktion
- Komponente ArticleCodeCopy.tsx
- H2-Überschriften werden für das Inhaltsverzeichnis verwendet.
- Als Code formatierte Textteile, werden hervorgehoben und der Kopierbutton erscheint.
- Cloudapp-dev und bevor Sie uns verlassen
Das Strukturieren Ihrer Inhalte ist sowohl für Ihre Nutzer als auch für Suchmaschinen großartig, führt aber manchmal zu viel Arbeit für die Autoren/Redakteure. Daher möchte ich Ihnen eine einfache und automatische Möglichkeit zeigen, ein Inhaltsverzeichnis und eine Hervorhebung von Codeblöcken zu erstellen. Diese Schritt-für-Schritt-Anleitung wird drei neue Komponenten hinzufügen. Wir werden Contentful als CMS verwenden, Sie können aber jedes CMS verwenden, das JSON-Daten bereitstellt
Der komplette Code ist in diesem Github repo verfügbar.
Hier ein Spoiler zur fertigen Webseite -> https://nextjs14-toc-codeblock-highlight-copy.vercel.app/testblogpost3
Der Link zeigt direkt auf den Blogeintrag "testblogpost3", welcher die durchgeführten Änderungen zeigt.
I will showcase how quickly and easily editors can automate certain parts of their work.
Hier alle Dateien, welche hinzugefügt bzw. geändert wurden.
Starten wir mit der TOC Komponente ArticleToc.tsx. Wie Sie sehen kommt die gesamte Magie von Tailwind und es wurden keine anderen Logiken verwendet.
Die nächste Komponente ist die ArticleTocItem.tsx, welche recht einfach aufgebaut ist und für das Setzen der Anchor-id gebraucht wird. Sobald jemand im Inhaltsverzeichnis (TOC) auf einen Eintrag klickt, möchten wir direkt zur entsprechenden H2-Überschrift springen.
Beide Komponenten werden nun in die Komponente CtfRichText.component.tsx importiert, da diese für die Anzeige der Daten im Frontend verantwortlich ist.
Im unten angeführten Codesnippet, setzen wir die Anchor-id, idem wir die Komponente ArticleTocItem verwenden.
At the end of the CtfRichText.component.tsx we loop through the json.content to create an array, which we use to show our TOC at the beginning of the blog post.
Gegen Ende der Datei CtfRichText.component.tsx iterieren wir über die "json.content", damit wir ein Array erstellen können, welches wir für die Darstellung des Inhaltsverzeichnisses am Anfang benötigen.
Code Block hervorheben und Kopierfunktion
Wie Sie vielleicht bereits gesehen haben, importieren wir die Komponente CopyButton in die Hauptkomponente CtfRichText.component.tsx.
In der MARKS.CODE Sektion, benutzen wir die Copybutton Komponente, damit wir die Codeteile hervorheben und einen Kopierbutton anzeigen können.
Komponente ArticleCodeCopy.tsx
Im Contentfuleditor (RichTextField), muss der entsprechende Inhalt als "Code" formatiert werden, damit die Logik funktioniert.
H2-Überschriften werden für das Inhaltsverzeichnis verwendet.
Als Code formatierte Textteile, werden hervorgehoben und der Kopierbutton erscheint.
Als letzten Schritt, fügen wir die neuen Übersetzungen in den jeweiligen common.json Dateien hinzug und dann sind wir fertig.
Wie Sie sehen, ist der Aufbau der verwendeten Komponenten recht einfach und kann Mithilfe von Tailwindcss schnell implementiert werden.
Cloudapp-dev und bevor Sie uns verlassen
Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:
Wenn Ihnen gefallen hat was Sie gelesen haben oder wenn es Ihnen sogar geholfen hat, dann würden wir uns über einen "Clap" 👏 oder einen neuen Follower auf unseren Medium Account sehr freuen.
