JQUERY - MAKALE SAYFALARINA BAĞLANTILI İÇİNDEKİLER LİSTESİ EKLEME

Merhaba..

Yazdığımız makalelerin üst tarafına otomatik olarak içindekiler listesi hazırlayıp , kullanıcıların buradaki başlıklara tıklayarak doğrudan sayfanın ilgili bölümüne kolaylıkla ulaşmalarını ve okumalarını sağlayabiliriz.. Bunu birçok makale sayfasında görebilirsiniz. Bunun oluşturmak içim makale içindeki başlıklardan yararlanacağız..

MAKALE İÇİNDEKİ BAŞLIKLAR

İçindekiler listesini oluşturmak için en önemli unsur makale içinde kullanacağımız başlıklar olacaktır. Örneğin makale içeriğindeki ana başlıklar için H2 bir alt başlıklar için H3 etiketlerini kullandığımzı varsayalım. Özellikle H1 demiyorum. Bildiğiniz gibi sayfalarda bir adet H1 kullanılması SEO için yararımıza olacaktır. Onu da arama sonuçlarına etki edebilmesi için makalenin ana başlığı için kullanırız...

Önce buna göre aşağıdaki gibi taslak bir makale sayfası hazırlayalım..

Tasarımın HTML ve CSS Kodları

<!DOCTYPE html>
<html> 
<head>
  <title>İÇİNDEKİLER LİSTESİ OLUŞTURMA  </title>
  <meta charset="utf-8"> 
  <style>
    body {font-family: calibri;}
    .makale {  margin: 3rem auto;  width:70%; padding: 2rem; border: 1px solid #eee; }
    @media (max-width:768px) {.makale{width:90%;}}
    .makale h1{  color:darkorange;}
    .makale h2{  color:orange;margin-top:3rem  }
    .makale h3{  color:#555;margin-top:2rem; padding-left:3rem  } 
    .makale h3+p{  padding-left:3rem } 
  </style>
</head>

<body bgcolor="#fff">  

  <div class="makale"> 

    <h1> MAKALE ANA BAŞLIĞI (h1) </h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit assumenda, aliquam quis quidem accusantium. Eveniet nemo ipsam facere dolorem facilis et reprehenderit distinctio dolor voluptas, suscipit, dignissimos, iste neque nisi.(P) </p>

    <hr>

    <h2>1 MAKALE İÇERİK BAŞLIĞI (h2)  </h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit assumenda, aliquam quis quidem accusantium. Eveniet nemo ipsam facere dolorem facilis et reprehenderit distinctio dolor voluptas, suscipit, dignissimos, iste neque nisi.(P)</p>

         <h3>1.1 MAKALE İÇERİK ALT BAŞLIĞI (h3)  </h3> 
         <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit assumenda, aliquam quis quidem accusantium. Eveniet nemo ipsam 
          facere dolorem facilis et reprehenderit distinctio dolor voluptas, suscipit, dignissimos, iste neque nisi.(P)</p>

          <h3>1.2 MAKALE İÇERİK ALT BAŞLIĞI (h3)  </h3> 
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit assumenda, aliquam quis quidem accusantium. Eveniet nemo ipsam 
          facere dolorem facilis et reprehenderit distinctio dolor voluptas, suscipit, dignissimos, iste neque nisi.(P)</p>

    <h2>2 MAKALE İÇERİK BAŞLIĞI (h2)  </h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit assumenda, aliquam quis quidem accusantium. Eveniet nemo ipsam facere dolorem facilis et reprehenderit distinctio dolor voluptas, suscipit, dignissimos, iste neque nisi.(P)</p>

          <h3>2.1 MAKALE İÇERİK ALT BAŞLIĞI (h3)  </h3>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit assumenda, aliquam quis quidem accusantium. Eveniet nemo ipsam 
           facere dolorem facilis et reprehenderit distinctio dolor voluptas, suscipit, dignissimos, iste neque nisi.(P)</p>

  </div> 
  
</body>
</html>

Yukarıdaki taslağı incelersek , makale yazısı , MAKALE class'lı bir div içerisinde oluşturulmuş. Makale içeriğinde ise; 2 tane H2 içerik ana başlığı ve 3 tane H3 içerik alt başlığı var.

1 MAKALE İÇERİK BAŞLIĞI (h2)
1.1 MAKALE İÇERİK ALT BAŞLIĞI (h3)
1.2 MAKALE İÇERİK ALT BAŞLIĞI (h3)
2 MAKALE İÇERİK BAŞLIĞI (h2)
2.1 MAKALE İÇERİK ALT BAŞLIĞI (h3)

Bu başlıklara göre içerik listesini ( İÇİNDEKİLER ) yaparak sayfa üstüne yerleştireceğiz ve sayfa başındaki uygulamada olduğu gibi , bu başlıklar tıklandığında sayfayı doğrudan ilgili bölüme yönlendireceğiz.

Peki bu listeyi otomatik olarak yaratmak için neler yapacağız?.

Öncelikle sayfaya JQUERY Bağlantısını ekleyeceğiz.
Makale içeriğindeki H2 ve H3 başlıklarını JQUERY find ile bulacağız..
İçindekiler bölümü için CONTENT div'i oluşturacağız.
Makale içinde bulduğumuz başlıklar içn döngü başlatacağız.
Döngüde sırayla her bulunan başlık için yer şareti belirleyip ekleyeceğiz.
Her bir başlığı, content div içerisine linkleri ile ekleyeceğiz.
DÖngüyü , Content listesini ve IF bloğuu kapatacağız.
Content div için de biraz CSS ekleyeceğiz..

JQUERY BAĞLANTISI

İstediğimiz işlemi JQUERY ile yapacağımız için sayfaya JQUERY bağlantısını eklememiz gerekiyor..

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

MAKALE İÇİNDEKİ BAŞLIKLARIN BULUNMASI

Makale class'lı div içerisindeki başlıkları, yani H2 ve H3 etiketlerini bulmak için find metodunu kullanacağız..

basliklar=$(".makale").find("h3,h4");   // Makaledeki tüm H3 ve H4  başlıkları "basliklar" diziine aktarılıyor..

Makale içeriğindeki hem H2 hemde H3 , tüm başlıkları dizi şeklinde "basliklar" değişkenine almış olduk. Bu dizinin uzunluğu makaledeki toplam başlık sayısı olacaktır. Ancak makalede H2 yada H3 kullanılmamış ise bu kez dizi oluşmayacak ve toplam sayısı 0 olacak. Dolayısı ile döngü kurmadan önce bunu kontrol ettirmeliyiz. Makalede başlık kullanılmadıysa içindekiler listesini eklememiz anlamsız olur. Dolayısı ile yapacaklarımızı toplam başlık sayısının 0 dan büyük olduğu durum için düşüneceğiz...

if (basliklar.length>0) {   // Eğer makalede başlık varsa

İÇİNDEKİLER İÇİN CONTENT DİV'İ OLUŞTURMA

Makaledeki başlıkları bulduğumuza göre ilk başlıktan önce CONTENT class'lı bir div ekleyelim.. İlk bulunan başlık etiketine basliklar[0] ile ulaşabiliriz. Bu etiketten önce div eklemek için insertBefore() metodunu kullanacağız..

$("<div class='content'></div>").insertBefore(basliklar[0]);  // content divi ekleniyor

Content div oluştuğuna göre, div içerisine P etiketleri ile beraber İÇİNDEKİLER yazısı ekleyip , hemen ardından da listeyi UL ile başlatalım.

$(".content").append("<p>İÇİNDEKİLER</p>"); // content içine İÇİNDEKİLER başlığı ekleniyor
$(".content").append("<ul>"); // Content içinde liste başlatılıyor..

CONTENT div içini hazırlmaış olduk. Şimdi döngü başlatarak tek tek başlıklar üzerinde işlemleri yapalım..

DÖNGÜ OLUŞTURMA

"basliklar" isimli diziye aldığımız tüm başlıklara tek tek ulaşmak için bir FOR döngüsü oluşturacağız. Dizilerin ilk elemanları 0. indis olduğundan döngüyü 0'dan başlatmalıyız..

for(i=0;i<basliklar.length;i++) {  // döngü başlatılıyor

Artık başlıklar üzerinde tek tek işlemlerimizi yapabilriiz...

YER İŞARETİ BELİRLEME ve EKLEME

Her bir başlık için yanına "<a name=""> ile bir yer işareti ekleyeceğiz. Ancak bu yer işaretlerinin ismi için her başlıkta bribirinden farklı bir değer yaratmamız iyi olur. Eğer başlık yazılarının aynısını yer işareti adı yaparsak , başlıklardaki türkçe karakterler , boşluklar linklerin düzgün çalışmamasına sebep olabilir. HEr başlık ayrı bir indis olduğuna göre bu indis numarası ile yeni bir değer yaratabiliriz. Örneğin ilk başlık için 1baslik , iikinci baslik için 2baslik gibi.. Nasıl olsa döngü her dönüşte bize bu rakamları otomatik getiriyor...

yerisareti=i+"baslik";  // yer işareti adı oluşturuluyor (0baslik,1baslik ......)

Artık bu yer işaretlerini başlıkların içine append ile ekleyebilriiz...

$(basliklar[i]).append("<a name='"+yerisareti+"'></a>");  // Başlıkların içine yer işareti ekleniyor...

BAŞLIKLARI CONTENT DIV'E EKLEME

Content div'in için hazırlamıştık . Şimdi her bir başlığı div içerisine liste maddesi olarak ekleyeceğiz. Aynı zamanda, tıklandığında yer şaretine gidebilmesi için bir link oluşturacğız. Ancak burada başlığın ana başlık (H2) mı yoksa alt başlık (H3) mı olduğunu bilmemiz gerekiyor. İstediğmiz içindekiler bölümünde alt başlıklar (H3) girintili olmalı. Dolayısıyla ana başlıkları (H2) doğrudan <Lİ> etiketleri ile eklerken , alt başlıkları (H3) yeni bir liste <UL> şeklinde ekleyeceğiz. Başlık etiketinin ne olduğunu get(0).tagName metodu ile kontrol edebilriiz... Başlıkları CONTENT listesine eklerken içindeki yazıyı text() metoduyla alacağız..

 if ( $(basliklar[i]).get(0).tagName=="H2") {  // başlık H2 ise (ana başlıksa)

         // content listesine h2 başlığı ve linki ekleniyor..
         $(".content" ).append("<li><a href='#"+yerisareti+"'  >"+$(basliklar[i]).text()+"</a></li>"); 
         
}

else {  // başlık H2 değilse (alt başlıksa (H3)
          
           // content listesine yeni bir liste ile h3 başlığı ve linki ekleniyor..
          $(".content" ).append("<ul><li><a href='#"+yerisareti+"'>"+$(basliklar[i]).text()+"</a></li></ul>");
       
 }

Linkleri oluşturuken , yukarıda oluşturduğumuz yer işareti değişkenini ("yerisareti") kullandık. Başına # işareti ekelyerek , bağlantının sayfa içinde oluğunu belirttik..

DÖNGÜYÜ , CONTENT LİSTESİNİ ve IF'i KAPATMA

Makaledeki başlıkların içine yer işareti ekleyip, bu başlıkları tek tek CONTENT listesi içerisine linkleriyle beraber eklediğimize göre önce for döngüsünü kapatıp , ardından CONTENT div içinde ana listeyi </ul> ekleyerek ve son olarak başta açtığımız if bloğunu kapatmalıyız.

      } // for bitişi

     $(".content").append("</ul>");  // content içindeki ana liste kapanıyor..

   } // if bitişi

Böylece JQUERY kısmını bitirmiş olduk . Artık sayfa yüklendiğinde İÇİNDEKLER bölümü otomatik oalrak oluşacak ve listedeki başlıklar tıklandığında, sayfa içinde ilgili bölüme yönelndirilmesi sağlanmış olacaktır. Sayfa başındaki önizlemede görebilirsiniz...

CONTENT DIV İÇİN CSS EKLEME

Sayfada otomatik olarak oluşan CONTENT div'inin sayfa tasarımına uygun olması içn biraz şekillendirelim...

    .content { 
      background-color: #eee;
      border: 1px solid #000;
      padding:2rem;
      box-shadow: 1rem 1rem 3rem #ccc;
      margin-top: 2rem; 
    }
    .content p {font-weight: bold;font-size:1.5rem}
    .content li a {color:#111;font-weight: bold;text-decoration: none;} 
    .content li a:hover {color:orange}

Artık bir makale sayfasına otomatik olarak içindekiler listesini eklemiş olduk .Bu jquery scripti istediğiniz makale sayfası altına yerleştirdiğinizde , bağlantılı içindekiler listeniz oluşacaktır. Ayrıca makaleyi güncelleyip yeni bir başlık ekleseniz bile doğrudan içindekiler listesine eklenecektir. Tabi burada ben H2 ve H3 üzerine yoğunlaştım ama istediğiniz etiketleri baz alarak yapabilirsiniz..

Eğer her sayfada olsun istemiyorsanız, CONTENT divini JQUERY ile otomatik olarak oluşturmak yerine kendiniz istediğiniz yere ekleyebilirsiniz. Bu durumda JQUERY kodlarından content divin eklendiği satırı silmeniz gerekir!

TÜM JQUERY KODLARI

Sırasıyla yazdığımız tüm jquery kod parçalarını bir araya getirirsek, istediğimi İÇİNDEKİLER listesini oluşturan JQUERY scripti aşağıdaki gibi olur.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>  
  <script> 

    basliklar=$(".makale").find("h3,h4");   // Makaledeki tüm H3 ve H4  başlıkları "basliklar" diziine aktarılıyor..

    if (basliklar.length>0) {    // Eğer makalede başlık varsa  

     $("<div class='content'></div>").insertBefore(basliklar[0]);  // content divi ekleniyor
     $(".content").append("<p>İÇİNDEKİLER</p>"); // content içine İÇİNDEKİLER başlığı ekleniyor
     $(".content").append("<ul>"); // Content içinde liste başlatılıyor.. 

      for(i=0;i<basliklar.length;i++) {  // döngü başlatılıyor

         yerisareti=i+"baslik";  // yer işareti adı oluşturuluyor (1baslik,2baslik ......)          
         $(basliklar[i]).append("<a name='"+yerisareti+"'></a>");  // Başlıkların yanına yer işareti ekleniyor... 

         if ( $(basliklar[i]).get(0).tagName=="H2") {  // başlık H2 ise (ana başlıksa) 
             // content listesine h2 başlığı ve linki ekleniyor..
          $(".content" ).append("<li><a href='#"+yerisareti+"'  >"+$(basliklar[i]).text()+"</a></li>");  
        }
         else {  // başlık H2 değilse (alt başlıksa (H3) 
            // content listesine yeni bir liste ile h3 başlığı ve linki ekleniyor..
          $(".content" ).append("<ul><li><a href='#"+yerisareti+"'>"+$(basliklar[i]).text()+"</a></li></ul>"); 
        }


     } // for bitişi 
     $(".content").append("</ul>");   // content içindeki ana liste kapanıyor.. 
   } // if bitişi


  </script>

Görüşmek üzere...

Tarayıcıda Aç Uygulamayı İndir

Son Güncelleme : 21 Ekim 2024 10:45, Pazartesi

YORUMLAR () YORUM YAZ

Yorum yapılmamış!

BENZER İÇERİK

JQUERY ile Tabloda Anlık Arama

06 Nisan 2021 12:58, Salı

JQUERY BAĞLANTISI NASIL YAPILıR?

02 Nisan 2024 23:36, Salı

JQUERY NEDİR?

03 Nisan 2024 09:52, Çarşamba