Web Günlüğü

Blogger Otomatik İçindekiler Tablosu Nasıl Yapılır

Uzun içerikli veya alt başlıkların olduğu yazılardan aşina olduğumuz bir içindekiler tablosu vardır. İngilizce olarak table of contents diye geçer. Bu içindekiler tablosu ile alt başlıklara kolayca ulaşabiliyor veya yazı içeriği hakkında daha fazla bilgi edinebiliyoruz. Bloğumda şuan sağ bloklarda aktif olarak kullandığım bu eklenti sayesinde yazı içerisine eklemiş olduğum alt başlıkları otomatik olarak gösterebiliyorum. İçindekiler tablosu manuel yapılacağı gibi javascript sayesinde otomatik de yapılabiliyor. Web'de bir çok örneği bulunmasına rağmen daha sade ve kullanımı kolay olan bir kod yapısı bularak bunu bloğuma uyarladım. Bu kod yapısı sadece içindekiler tablosu için değil ayrıca farklı projeler için de kullanılabilir. Örneğin blogger tema sitelerinde sağ tarafta bulunan tema özellikleri alanı gibi. Not : Sadece ana başlıklar için kullanılmaktadır. Diğer örneklerde olduğu gibi Başlık, Alt Başlık gibi bir kullanımı yoktur.

Not 2 : İçindekiler tablosunu ben sağ tarafta sidebar'a HTML/JavaScript Gadget'ı kullanarak ekledim, fakat yazı içerisinde de eklenebilir ve ona göre CSS düzenlemesi yapılabilir.

CSS Kodları

</head> etiketi öncesine veya diğer CSS kodları arasına eklenebilir.

<style>
h3:target { animation: highlight 1s ease;}
@keyframes highlight { from { background: yellow; }  to {background: white; }
}
.iceriktablo ul li{list-style:number}
</style>

Javascript Kodları

</body> bitiş etiketinin hemen öncesine eklenmesi gerekiyor. Burada turuncu renkte belirtmiş olduğum .blog-post__content h3 yazı hangi div etiketine ait onu belirtmekte h3 ise yazı içersinde kullanılan başlık etiketini bu h2 olarak da değiştirilebilir, tercihe bağlı.

<script>
var ToC =  "<ul>";
var newLine, el, title, link;
$(".blog-post__content h3").each(function() {  
  el = $(this);
  title = el.text();
  link = "#" + el.attr("id");
  newLine =
    "<li>" +
      "<a href='" + link + "'>" +
        title +
      "</a>" +
    "</li>";
  ToC += newLine;
});
ToC +=   "</ul>";
$(".iceriktablo").prepend(ToC);
</script>

Tablo nerede gösterilecekse aşağıdaki kod oraya eklenmeli. Yazı içerisine eklemek için <data:post.body/> etiketi bulunarak öncesine eklenebilir. Kullanılan şablonda bu etiket birden fazla olabilir.

<div class="iceriktablo"></div>

Kullanım

Son olarak kullanımından bahsedecek olursam yazı içeriğine eklenen herhangi bir başlığa id eklenmesi gerekiyor bu sayede içindekiler tablosundaki bağlantıya tıklanıldığı zaman o başlığa gidilebilsin.

Örnek :

<h3 id="baslik1">Başlık</h3>