Webflow CMS'de dinamik içindekiler tablosu – En kolay yol

Yayınlanan: 2022-03-22
Yakın zamanda yapışkan bir İçindekiler Tablosuna etkin durumlar eklemeyi mümkün kıldık – talimatlar için makalenin sonuna bakın!

Arka fon

Flowrite'ta kısa süre önce daha uzun içerik parçaları yazmaya başladık ve en temel öğe olan içindekiler tablosundan başlayarak bloglarımızı daha okunaklı hale getirmek istedik.

Webflow kullanıyoruz ve kesinlikle onu seviyoruz, ancak CMS öğeleri için ToC'leri ölçeklenebilir bir şekilde oluşturmanın o kadar kolay olmadığı ortaya çıktı. Mevcut tüm çözümler, kimlikleri ve bağlantıları manuel olarak ayarlamaya veya 3. taraf eklentileri kullanmaya dayanır.

Bloglarımızdaki başlıklara dayalı olarak ToC'leri otomatik olarak oluşturacak basit bir sistem istedik. Biz inşa ettik ve işte siz de aynısını nasıl yapabilirsiniz!

Nasıl çalışır?

  1. ToC öğelerinizi tasarlayın. Onları istediğiniz şekilde yapın – üzerine gelme durumları, animasyonlar vb. oluşturun.
  2. CMS sayfanızın herhangi bir yerinde belirli bir kimliğe sahip ToC için bir div oluşturun.
  3. CMS sayfanızdaki <body> etiketinin sonuna bir kod parçası ekleyin.
  4. ToC'ler, her CMS öğesi için otomatik olarak oluşturulur.

Dinamik İçindekiler Tablonuzu oluşturma

ToC öğelerinizi tasarlayın

ToC öğenize bir sınıf verin ("tocitem" kullanıyoruz) ve istediğiniz şekilde biçimlendirin.

Benim tavsiyem, bu öğeleri tasarlamak için ayrı, özel bir sayfa kullanmaktır. Bu şekilde, gerekirse tasarımı daha sonra kolayca değiştirebilirsiniz.

Notion'ın İçindekiler öğelerinin sadeliğini sevdik, bu yüzden bunu bir kıyaslama olarak kullandık.


Birden fazla başlık türü eklemek istiyorsanız, bunlara ek bir sınıf ("toc-h2", "toc-h3" vb.)

ToC'niz için öğeyi oluşturun

ToC'nizin olmasını istediğiniz yere bir div ekleyin ve ona bir "toc" kimliği verin. Yine, bu öğeyi istediğiniz gibi şekillendirebilirsiniz.

️
ToC'nizin zengin metin öğenizin içinde olmasını istiyorsanız, daha fazla ayrıntı için bu makalenin sonuna bakın.

Son olarak, Zengin Metin öğesine bir "içerik" kimliği verin. Bu, ToC'de doğru başlıkları kullandığımızdan emin olmak için daha sonra gerekli olacaktır.

İki seçenek arasından seçim yapın

ToC'ler otomatik olarak oluşturulacağından, bunlara hangi başlıkları dahil etmek istediğimizi belirtmemiz gerekiyor. Bu yazıda iki seçeneği ele alıyoruz:

  1. Yalnızca tek bir statik başlık türüne dayalı olarak ToC'ler oluşturma, örneğin H2'ler.
  2. Seçtiğiniz birden fazla başlığa dayalı olarak ToC'ler oluşturma - örneğin, bir blog gönderisi için H2'ler ve H3'ler ve bir diğeri için H2'ler ve H4'ler.

Seçenek 1: Tek başlı ToC'ler

Bu seçenekte, ToC'ler her zaman aynı başlığa göre oluşturulacaktır.

Koleksiyon sayfalarınızda <body> etiketinizin sonuna aşağıdaki kodu ekleyin. Nasıl çalıştığını anlamak istiyorsanız, her satırın sonundaki yorumlara bakın.

  <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>

Siteyi yayınlayın ve hazırsınız

Seçenek 2: Çok başlı ToC'ler

Bu seçenek, ToC'leri oluşturmak için hangi başlıkların kullanılacağını duruma göre belirleme şansı verir.

Koleksiyonunuzda yeni bir metin alanı oluşturarak başlayalım. Biz buna "TOC tabanlı..." diyoruz. Burası, her bir CMS öğesinin ToC'sinde kullanılacak başlıkları belirlediğiniz yerdir. Virgülle ayırın ve boşluk bırakmayın.


Şimdi, koleksiyon sayfalarınızda <body> etiketinizin sonuna aşağıdaki kodu ekleyin. Nasıl çalıştığını anlamak istiyorsanız, her satırın sonundaki yorumlara bakın.

  <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>

Son olarak, [HEADINGS] öğesini "ToC tabanlı..." CMS alanınızın değeriyle değiştirdiğinizden emin olun.


İşte bu, yayınlamaya hazırsınız.

özelleştirme

Yapışkan bir İçindekiler'deki etkin durumlar

Chris Coyier'in CSS-Tricks hakkındaki gönderisinden esinlenerek, görünür ToC öğelerine aktif durumlar eklemek için bir yol geliştirdik - yapışkan ToC'ler için harika bir özellik.

İlk olarak, "observer.observe(heading);" ekleyin. daha önce uyguladığınız kodun başında. Doğru konum için ekran görüntüsüne bakın.

Ardından, mevcut tüm ToC kodunun üstüne aşağıdaki kod parçacığını ekleyin:

  <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>

Kod, görünür bir tocitem'e "active" adlı bir sınıf ekler ve yeni bir tocitem göründüğünde sınıfı kaldırır.

Son olarak, örneğin farklı bir arka plan rengi vererek "aktif" sınıfa stil verdiğinizden emin olun.

‍

CMS öğelerinin yalnızca bazılarında ToC'leri görüntüleyin

Bazı CMS öğelerinizde bir ToC'nin görünmesini istemiyorsanız aşağıdaki adımları tamamlayın:

1. "ToC'ye göre.." alanını boş bırakın.
 Seçenek 1'i kullanıyorsanız, ToC'nin görünüp görünmeyeceğini belirtmek için CMS koleksiyonunuza bir anahtar ekleyin. ‍

2. ToC div'inizin görünürlüğünü 1. adımdaki seçiciye göre koşullu hale getirin.

3. Alan boşsa işlevi çalıştırmamak için ToC kod parçacığınızın başında bir if ifadesi oluşturun . "}" ile kapatmayı unutmayın.

Zengin Metin öğenizin içindeki ToC

ToC'nizi Zengin Metin öğenizin içine yerleştirmek istiyorsanız, ToC div öğesini bir yerleştirme koduyla çoğaltabilirsiniz.

Zengin Metninizin içinde özel bir kod öğesi oluşturun ve kod alanına "<div id="toc" class="toc"></div>" kopyalayıp yapıştırın.


Yalnızca bazı CMS öğelerinde satır içi ToC'ye ve diğerlerinde "normal" bir ToC'ye sahip olmak istiyorsanız, birkaç ek numara yapmanız gerekir:

1. Yalnızca bir seçeneğe sahip bir Seçenek seçici oluşturun : ".getElementById('content'). Zengin Metin içinde bir ToC'ye sahip olmak istediğiniz CMS öğelerinde bunu seçin.

2. "Normal" ToC'yi yalnızca seçici ayarlanmamışsa görüntüleyin.


3. Seçicinin değerini kodun aşağıdaki kısmına ekleyin. Şimdi, seçici seçilmişse, kod ToC öğelerini doğru ToC div'in içine ekleyecektir.

Kaydırmada gezinme çubuğu yerleşiminden kaçının

Bir ToC bağlantısını tıkladığınızda sayfanın doğru başlığa kaydırıldığını ancak gezinme çubuğunuz tarafından engellendiğini fark edebilirsiniz.

Bunu düzeltmek için:

  1. Gezinme öğenizin konumunun "sabit" olarak ayarlandığından emin olun.
  2. Nav öğesinin etiketini "Başlık" olarak değiştirin

‍

Bu kadar! Yol boyunca herhangi bir sorunla karşılaşırsanız, bana bir e-posta göndermekten veya Twitter / LinkedIn üzerinden ulaşmaktan çekinmeyin.

Bu sistemi kullanıp kullanmayacağınızı da bilmek isterim, bu yüzden lütfen kullandıysanız bana ping atın ve gönderiyi yararlanabilecek başka biriyle paylaşın ️