Cuprins dinamic pe Webflow CMS – Cel mai simplu mod

Publicat: 2022-03-22
Recent am făcut posibilă adăugarea de stări active la un Cuprins lipicios – consultați sfârșitul articolului pentru instrucțiuni!

fundal

La Flowrite, am început recent să scriem piese de conținut mai lungi și am vrut să facem blogurile noastre mai lizibile, pornind de la cel mai elementar element – ​​cuprinsul.

Folosim Webflow și ne place absolut, dar s-a dovedit că crearea ToC-urilor scalabil pentru articole CMS nu a fost atât de simplă. Toate soluțiile existente se bazează fie pe setarea manuală a ID-urilor și a link-urilor, fie pe utilizarea pluginurilor terță parte.

Ne-am dorit un sistem simplu care să genereze automat ToC-uri pe baza titlurilor din blogurile noastre. Asta am construit și iată cum puteți face același lucru!

Cum functioneaza?

  1. Proiectați-vă articolele ToC. Faceți-le așa cum doriți - creați stări de hover, animații etc.
  2. Creați un div pentru ToC cu un anumit ID oriunde pe pagina dvs. CMS.
  3. Introduceți o bucată de cod la sfârșitul etichetei <body> pe pagina dvs. CMS.
  4. ToC-urile sunt generate automat pentru fiecare articol CMS.

Crearea unui Cuprins dinamic

Proiectați-vă articolele ToC

Oferă articolului tău ToC o clasă (folosim „tocitem”) și stilează-l așa cum vrei.

Recomandarea mea este să folosiți o pagină separată, privată pentru proiectarea acestor elemente. În acest fel, puteți modifica cu ușurință designul ulterior, dacă este necesar.

Ne-a plăcut simplitatea elementelor Cuprinsului lui Notion, așa că am folosit asta ca punct de referință.


Dacă doriți să includeți mai multe tipuri de titluri, asigurați-vă că le oferiți o clasă suplimentară ("toc-h2", "toc-h3", etc.)

Creați elementul pentru ToC

Adăugați un div oriunde doriți să fie ToC și dați-i un id „toc”. Din nou, puteți stila acest element în orice mod doriți.

️
Dacă doriți să aveți ToC în elementul de text îmbogățit, vedeți sfârșitul acestui articol pentru mai multe detalii.

În cele din urmă, dați elementului Rich Text un id „conținut”. Acest lucru va fi necesar mai târziu pentru a ne asigura că folosim titlurile corecte în ToC.

Alegeți dintre două opțiuni

Deoarece ToC-urile vor fi generate automat, trebuie să indicăm ce titluri dorim să includem în ele. În această postare, acoperim două opțiuni:

  1. Generarea de ToC pe baza unui singur tip de antet static, de exemplu H2s.
  2. Generarea de ToC pe baza mai multor titluri la alegere – de exemplu, H2 și H3 pentru o postare de blog și H2 și H4 pentru alta.

Opțiunea 1: ToC cu un singur titlu

În această opțiune, ToC-urile vor fi întotdeauna generate pe baza aceluiași titlu.

Introduceți următorul cod la sfârșitul etichetei <body> pe paginile de colecție. Vedeți comentariile de la sfârșitul fiecărui rând dacă doriți să înțelegeți cum funcționează.

  <script> document.getElementById("content").querySelectorAll("h2").forEach(function(heading, i) { // runs a function for all h2 elements inside your rich text element heading.setAttribute("id", "toc-" + i); // gives each h2 a unique id let str = heading.innerHTML; // adds section titles to slugs str = str.replace(/\s+/g, '-').replace(/[°&\/\\#,+()$~%.'":;*?<>{}]/g, "").toLowerCase(); // replaces spaces with hyphens, removes special characters and extra spaces from the headings, and applies lowercase in slugs heading.setAttribute("id", str); // gives each heading a unique id const item = document.createElement("a"); // creates an anchor element called "item" for each h2 item.innerHTML = heading.innerHTML // gives each item the text of the corresponding heading item.setAttribute("class", "tocitem"); // gives each item the correct class item.setAttribute("href", "#" + str); // gives each item the correct anchor link document.querySelector("#toc").appendChild(item); // places each item inside the Table of Contents div }); </script>
<script> document.getElementById("content").querySelectorAll("h2").forEach(function(heading, i) { // runs a function for all h2 elements inside your rich text element heading.setAttribute("id", "toc-" + i); // gives each h2 a unique id let str = heading.innerHTML; // adds section titles to slugs str = str.replace(/\s+/g, '-').replace(/[°&\/\\#,+()$~%.'":;*?<>{}]/g, "").toLowerCase(); // replaces spaces with hyphens, removes special characters and extra spaces from the headings, and applies lowercase in slugs heading.setAttribute("id", str); // gives each heading a unique id const item = document.createElement("a"); // creates an anchor element called "item" for each h2 item.innerHTML = heading.innerHTML // gives each item the text of the corresponding heading item.setAttribute("class", "tocitem"); // gives each item the correct class item.setAttribute("href", "#" + str); // gives each item the correct anchor link document.querySelector("#toc").appendChild(item); // places each item inside the Table of Contents div }); </script>

Publicați site-ul și sunteți gata

Opțiunea 2: ToC cu mai multe rubrici

Această opțiune vă oferă șansa de a determina de la caz la caz ce titluri vor fi folosite pentru a genera ToC.

Să începem prin a crea un câmp de text nou în colecția ta. Îi spunem „TOC bazat pe...”. Aici specificați titlurile care vor fi utilizate în ToC pentru fiecare articol CMS. Separați prin virgulă și nu includeți spații.


Acum, introduceți următorul cod la sfârșitul etichetei <body> pe paginile dvs. de colecție. Vedeți comentariile de la sfârșitul fiecărui rând dacă doriți să înțelegeți cum funcționează.

  <script> document.getElementById("content").querySelectorAll("[HEADINGS]").forEach(function(heading, i) { // runs a function for all headings inside your rich text element let str = heading.innerHTML; // adds section titles to slugs str = str.replace(/\s+/g, '-').replace(/[°&\/\\#,+()$~%.'":;*?<>{}]/g, "").toLowerCase(); // replaces spaces with hyphens, removes special characters and extra spaces from the headings, and applies lowercase in slugs heading.setAttribute("id", str); // gives each heading a unique id const item = document.createElement("a"); // creates an anchor element called "item" for each heading item.innerHTML = heading.innerHTML; // gives each item the text of the corresponding heading ("[HEADINGS]").split(",").forEach(function(x) { // runs a function for each item in your headings list if (heading.tagName.toLowerCase()==x) { item.classList.add("tocitem", "toc-" + x); // gives each item the correct class } }); item.setAttribute("href", "#" + str); // gives each item the correct anchor link document.querySelector("#toc").appendChild(item); // places each item inside the Table of Contents div }); </script>
<script> document.getElementById("content").querySelectorAll("[HEADINGS]").forEach(function(heading, i) { // runs a function for all headings inside your rich text element let str = heading.innerHTML; // adds section titles to slugs str = str.replace(/\s+/g, '-').replace(/[°&\/\\#,+()$~%.'":;*?<>{}]/g, "").toLowerCase(); // replaces spaces with hyphens, removes special characters and extra spaces from the headings, and applies lowercase in slugs heading.setAttribute("id", str); // gives each heading a unique id const item = document.createElement("a"); // creates an anchor element called "item" for each heading item.innerHTML = heading.innerHTML; // gives each item the text of the corresponding heading ("[HEADINGS]").split(",").forEach(function(x) { // runs a function for each item in your headings list if (heading.tagName.toLowerCase()==x) { item.classList.add("tocitem", "toc-" + x); // gives each item the correct class } }); item.setAttribute("href", "#" + str); // gives each item the correct anchor link document.querySelector("#toc").appendChild(item); // places each item inside the Table of Contents div }); </script>

În cele din urmă, asigurați-vă că înlocuiți [HEADINGS] cu valoarea câmpului dvs. CMS „ToC based on...”.


Gata, sunteți gata să publicați.

Personalizare

Stări active într-un Cuprins lipicios

Inspirați de postarea lui Chris Coyier despre CSS-Tricks, am creat o modalitate de a adăuga stări active la elementele ToC vizibile – o caracteristică grozavă pentru ToC-uri lipicioase.

În primul rând, adăugați „observer.observe(heading);” la începutul codului pe care l-ați implementat mai devreme. Consultați captura de ecran pentru locația corectă.

Apoi, adăugați următorul fragment de cod peste tot codul ToC existent:

  <script> const observer = new IntersectionObserver(entries => { entries.forEach(entry => { const id = entry.target.getAttribute("id"); if (entry.isIntersecting) { document.querySelectorAll(".active").forEach((z) => { z.classList.remove("active") }); document.querySelector(`a[href="#${id}"]`).classList.add("active"); } }); }, { rootMargin: '0px 0px -75% 0px' }); </script>
<script> const observer = new IntersectionObserver(entries => { entries.forEach(entry => { const id = entry.target.getAttribute("id"); if (entry.isIntersecting) { document.querySelectorAll(".active").forEach((z) => { z.classList.remove("active") }); document.querySelector(`a[href="#${id}"]`).classList.add("active"); } }); }, { rootMargin: '0px 0px -75% 0px' }); </script>

Codul adaugă o clasă numită „activ” la un tocitem vizibil și elimină clasa când apare un nou tocitem.

În cele din urmă, asigurați-vă că stilați clasa „activă”, oferindu-i o culoare de fundal diferită, de exemplu.

‍

Afișați ToC numai pentru unele dintre elementele CMS

Dacă nu doriți să apară o ToC pe unele dintre elementele dvs. CMS, parcurgeți următorii pași:

‍ 1. Lăsați câmpul „ToC bazat pe....” gol.
 Dacă utilizați Opțiunea 1, adăugați un comutator în colecția dvs. CMS pentru a indica dacă ToC ar trebui să apară sau nu. ‍

2. Condiționează vizibilitatea div ToC pe baza selectorului de la pasul 1.

3. Creați o instrucțiune if la începutul fragmentului de cod ToC pentru a evita rularea funcției dacă câmpul este gol. Nu uitați să închideți cu „}”.

ToC în elementul dvs. Rich Text

Dacă doriți să plasați ToC în elementul Rich Text, puteți replica elementul div ToC cu un cod de încorporare.

Creați un element de cod personalizat în textul îmbogățit și copiați și inserați „<div id="toc" class="toc"></div>" în câmpul de cod.


Dacă doriți să aveți o ToC inline doar pentru unele dintre elementele CMS și o ToC „normală” pentru altele, trebuie să faceți câteva trucuri suplimentare:

1. Creați un selector de opțiuni cu o singură opțiune: „.getElementById('conținut'). Selectați-l pe acele elemente CMS în care doriți să aveți o ToC în textul îmbogățit.

2. Afișați ToC „normal” numai dacă selectorul nu este setat.


3. Adăugați valoarea selectorului la următoarea parte a codului. Acum, dacă selectorul a fost selectat, codul va adăuga elementele ToC în div-ul corect al ToC.

Evitați suprapunerea barei de navigare pe defilare

Este posibil să observați că atunci când faceți clic pe un link ToC, pagina derulează în jos la titlul corect, dar este blocată de bara de navigare.

Pentru a remedia acest lucru:

  1. Asigurați-vă că poziția elementului de navigare este setată la „fixă”
  2. Schimbați eticheta elementului de navigare în „Header”

‍

Asta e! În cazul în care ați întâmpinat probleme pe parcurs, nu ezitați să-mi trimiteți un e-mail sau să contactați prin Twitter / LinkedIn.

Mi-ar plăcea să știu și dacă ajungi să folosești acest sistem, așa că te rog să-mi dai un ping dacă ai făcut-o și să distribui postarea cu altcineva care ar putea beneficia de el ️