WordPress kullanmıyorsanız sitenize istediğiniz özellikleri eklemek oldukça zor olabilir. Aşağıdaki kodlar ile web sitenize otomatik olarak içindekiler bölümü ekleyebilirsiniz. Bu kod <article> etiketi içindeki başlıkları otomatik olarak alıyor ve sıralıyor. Ayrıca başlığı slug olarak çeviriyor ve üzerine tıkladığınızda ekranı ilgili başlığa kaydırıyor. Kendi sitemde <article> etiketi kullandığım için böyle yaptım. Sizin makaleleriniz hangi etiket arasında yer alıyorsa ona göre düzenleme yapabilirsiniz.
HTML - (Bunu içindekiler tablonuz nerede görünsün istiyorsanız oraya ekleyin)
HTML - (Bunu içindekiler tablonuz nerede görünsün istiyorsanız oraya ekleyin)
Kod:
<aside>
<h2>İçindekiler</h2>
<ul id="toc"></ul>
</aside>
Kod:
<script>
function generateSlug(text) {
return text.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]+/g, '');
}
document.addEventListener('DOMContentLoaded', function() {
var toc = document.getElementById('toc');
var headings = document.querySelectorAll('article h2, article h3, article h4');
headings.forEach(function(heading, index) {
var listItem = document.createElement('li');
var link = document.createElement('a');
var slug = generateSlug(heading.textContent);
heading.setAttribute('id', slug);
link.textContent = heading.textContent;
link.setAttribute('href', '#' + slug);
listItem.appendChild(link);
toc.appendChild(listItem);
});
});
</script>