Yayınladığım yazıların son bölümünde mümkün olduğunca yayınlanmış ilgili yazılara (internal veya external) bağlantılar vermeye özen gösteriyorum. 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?
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
1.
<a href="#section1">Introduction</a>
<h2><a name="section1">Introduction</a></h2>
<a href="#section1">Introduction</a>
<h2 id="section1">Introduction</h2> |
<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. Hatta, örnek olarak
buraya bir göz atabilirsiniz. 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…
Başlık tanımlarını (
id ve/ya
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>");
});
}); |
$(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/ya
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.
- Jekyll Anchor Headings
- Auto generate Heading Anchors using HTML AgilityPack DOM Manipulation
- How to convert a Title to a URL slug in jQuery?
- How to automatically create heading anchor links in #HTML with #jQuery and #CSS?
- Links, @w3.org
