Otomatik Heading Anchor Link Oluşturmak

Bu bağlatılar kimi zaman bir yazının tamamına, kimi zaman ise belirli bir bölümüne referans gelebilmekte. Bölümlere referans verirken heading anchor (çapa / tutturucu / dayanak noktası) terimi karşımıza çıkmakta. Bu yazının ve yazının ilerleyen bölümlerinde değineceğim uygulamanın da temelinde de bu terim yatmakta. Peki, heading anchor nedir?

Anchor Link

Esasında anchor terimi ile açıklamaya başlamak daha doğru olacaktır. Bilindiği üzere bir başka kaynağı işaret ettiğimizde bunu link (bağlantı) olarak nitelendiririz. Bir bağlantı bu anlamda iki uçtan oluşur; anchor ve direction (yön). Bu bağlantıyı tanımlarkende source anchor ile başlar ve herhangi bir Web kaynağı olabilen destination anchor‘u işaret ederiz. Bu hedef bir sayfa, görüntü, ses dosyası vb. olabilir. Sayfa içerisindeki belirli bir noktayı işaret ettiğimizde hedef ilgili alanın benzersiz tanımı olan id veya duruma göre name ile belirtilir¹.

<a href="#section1">Introduction</a>
<h2><a name="section1">Introduction</a></h2>

<a href="#section1">Introduction</a>
<h2 id="section1">Introduction</h2>

İlgili bağlantı tıklandığında sayfa id veya name alanını merkeze alır. Böylelikle yazının tamamına değil, beliri bir bölümüne referans bağlantı vermiş oluruz. Jekyll kullananlar ayrıca her heading alanının yanında bir bağlantı icon’unun belirdiğini hatırlayacaklardır^{2 3}. Bu yazının konusu da WordPress ve benzeri yapılar üzerinde yayınladığımız web sayfamızda bu özelliği nasıl kullanabileceğimiz üzerine…

Otomatik Heading Anchor Link Oluşturmak

Başlık tanımlarını (id ve/veya name) kendiniz yapmak ve diğer ek özelliklerden (paragraf işaretleme gibi) istiyorsanız doğrudan AnchorJS‘dan faydalanabilirsiniz⁴. Diğer yandan, ben adım adım ilerleyerek küçük bir JavaScript ile (jQuery gerektirmekte) bu işlemi nasıl otomatik bir şekilde heading içeriğini alarak yapabileceğimize değineceğim.

$(document).ready(function() {
  var slug = function(str) {
    var $slug = "";
    var trimmedHeader = $.trim(str);
    $slug = trimmedHeader
      .replace(/[^a-zğüışçö0-9-]/gi, "-")
      .replace(/-+/g, "-")
      .replace(/^-|-$/g, "");
    return $slug.toLowerCase();
  };

  $("h2.anchor").each(function(i) {
    var heading = $(this);
    var headingDef = slug($(this).text());
    heading.attr("id", headingDef);
    heading.append("<a class=\"anchor-link\" href=\"#" + headingDef + "\"><div id=\"anchor-icon\"></div></a>");
  });
});

Yukarıdaki kod parçacığında (snippet) slug değişkeni içerisinde tanımlanan fonksiyon aracılığıyla heading içeriğini alıyor, boşlukları ve özel karakterleri silerek bir id ve/veya name tanımı haline getiriyoruz. Yani, slug('Bu bir başlık denemesidir!') bize bu-bir-başlık-denemesidir şeklinde döndürülür.

Türkçe karakterleri dönüştürmek isterseniz ayrıca buradaki kod parçacığından faydalanabilirsiniz.

İkinci bölümde ise h2.anchor ile hangi başlıkların hedeflendirileceğini belirtiyoruz. İlgili başlık tanımını alıyor, ilk bölümde bulunan slug‘a gönderiyor, dönen sonucu id olarak ilgili başlığa ekliyoruz. Bir sonraki aşamada da append() ile icon’u link olarak iliştiriyoruz. Hepsi bu kadar. Geri kalan işlem ise (link:hover) CSS ile gerçekleştiriliyor. Örnek uygulamayı burayı tıklayarak görüntüleyebilirsiniz.

İleri Okumalar

1. Jekyll Anchor Headings
2. Auto generate Heading Anchors using HTML AgilityPack DOM Manipulation
3. How to convert a Title to a URL slug in jQuery?
4. How to automatically create heading anchor links in #HTML with #jQuery and #CSS?