Tek Şeker ·

Tek Şeker     Hakkında     Arşiv     Feed

Jekyll Blog'a Yeni Özellikler Eklenmesi

Jekyll BLog’umuzu kurduk. Peki buna nasıl ekstra özellikler ekleyeceğiz. Bu yazımızda bunlardan bahsedeceğim.


Google Analytics

Google Analytics kodunu sitemize eklemek için , öncelikle Google Analytics‘e gidip sitemizin özellikleri ile yeni bir İzleme Kimliği oluşturuyoruz.

Yeni İzleme Kimliği’ni oluşturduktan sonra Google bize şu şekilde bir tracker kodu veriyor:

 1 <script>
 2   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 3   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 4   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 5   })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 6 
 7   ga('create', 'UA-77063245-1', 'auto');
 8   ga('send', 'pageview');
 9 
10 </script>

Bu kodu her sayfamıza eklememiz gerektiği için, şöyle bir yol izliyoruz. _includes/google_analytics.html _includes klasörünün altına gidip google_analytics.html adında bir dosya oluşturuyoruz. Bunun içerisine Google’ın bize verdiği kodu kopyalıyoruz.

Daha sonra _layouts/default.html ‘e gidip

{% include google_analytics.html %}

kodunu eklediğimizde , artık Google Analytics kodumuz otomatik olarak her sayfamıza eklenmiş olacaktır.

Highlight ve Çalışan Kod Parçacıklarının Highligt edilmesi

Highlight dediğimiz olay , kod parçacağını size gösterirken kod editörlerinde göründüğü şeklinde sayfa içerisinde gösterilmesi.

Bunu yapmak için highlight etmek istediğimiz kod parçacığını:

{% highlight html %}
//Kodumuz
{% endhighlight %}

şeklinde yazıyoruz.

Normalde bir üstte göstermeye çalıştığım şeyi yapmak istediğimde , yazdığım kodun çalışıp yine içerisinde bulunan kodu highlight etmeye çalışması gerekiyordu. Örnek olsun diye yazdığımız kod parçası , kod olduğu için çalışıp görevini yerine getireceğinden bizim onu göremiyor olmamız gerekirdi. Bunun gibi çalışan kod parçacıklarını highlight etmek istediğimizde şu şekilde raw , endraw arasına alıyoruz. Örnek olarak:

my photo

Hightlight 100’den fazla dili destekliyor. Bu dillere şu adresten bakabilirsiniz @Languages

Örneğin terminal için highlight shell yazmanız gerekiyor.

Yazımı Devam Eden Sayfaların Yayına Alınmadan Düzenlenmesi

Sistemimizi git push dediğimizde sitemizin otomatik olarak oluşması şeklinde kurduğumuz için aklınıza henüz daha bitmemiş sayfalarımızı nasıl tutacağımız gelmiş olabilir. Bunu yapmak için bütün dosyalarımızın bulunduğu ana dizinimizde (_config.yml dosyamızın bulunduğu yer)

_drafts

adında bir klasör oluşturuyoruz. Daha sonra düzenlemesi süren .md uzantılı dosyalarımızı burada başında tarih bulunmadan tutuyoruz.

Eğer düzenlemesi hala devam eden sayfalarımızın yayında nasıl gözüktüğünü merak ediyorsak terminal’imize

jekyll serve --drafts

yazdığımız zaman, hala düzenleme aşamasında olan sayfalarımızda local’imizde görücüye çıkmış oluyor.

Bazı Özel Değişiklikler Yapılması

Bizim sitemizin üstünde görüldüğü gibi Arşiv sekmesi oluşturmak istersek bunu şu şekilde yapıyoruz.

Öncelikle Archive.md adında içerisinde bütün yazılarımızın listeleneceği bir dosya oluşturuyoruz.

---
layout: page
title: Archive
---

## Blog Posts

{% for post in site.posts %}
  * {{ post.date | date_to_string }} &raquo; [ {{ post.title }} ]({{ post.url }})
{% endfor %}

Daha sonra sitemizin üst kısmına bulunan içersinde Hakkında, Arşiv ve Feed sekmelerinin bulunduğu, navigation bar denilen , yönlendirme çubuğunu eklemek için öncelikle _config.yml dosyamızın içerine

pages_list:       
  About: '/about'
  Archive: '/archive'
  Feed: '/atom.xml'

şeklinde bir tanımlama yapıyoruz. Daha sonra _layouts/default.html dosyasına giderek

<h3 class="masthead-title">
<a href="/" title="Home">{{ site.title }}</a>

{% for page in site.pages_list %}
  &nbsp;&nbsp;&nbsp;
  <small><a href="{{ page[1]  }}">{{ page[0] }}</a></small>
{% endfor %}
</h3>

kodunu ekliyoruz ki , her bir sayfamız oluşurken öncelikle üst kısmına yaptığımız deşiklikleri alsın ve o şekilde oluşsun.

Jekyll İçin Poole

Poole jekyll için template’lerin yer aldığı ve bir çok sorunuza cevap bulabileceğiniz bir git deposu. Poole

Kaynaklar

jekyll-github-pages-poole