#!/usr/bin/ruby puts

SunDi3yansyah

;
puts

App Server, Database App, Web App

;

Cara Membuat Plugin Kategori List Di Sidebar Octopress

| Comments | Cahyadi Triyansyah Cahyadi Triyansyah

Pertama kita perlu menulis kode ruby ​​sedikit. Menambahkan file ke direktori plugin yang disebut category_list_tag.rb. Plug-in ini akan mengambil data kategori dari situs dan menghasilkan daftar item untuk setiap kategori. Pada line 17 tag category_list tersedia untuk liquid template engine (Lihat code di bawah).

Pertaman buat file baru menggunakan editor kesukaan kalian, dan isi code Ruby nya seperti ini:

[email protected] - category_list_tag.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module Jekyll
  class CategoryListTag < Liquid::Tag
    def render(context)
      html = ""
      categories = context.registers[:site].categories.keys
      categories.sort.each do |category|
        posts_in_category = context.registers[:site].categories[category].size
        category_dir = context.registers[:site].config['category_dir']
        category_url = File.join(category_dir, category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase)
        html << "<li class='category'><a href='/#{category_url}/'>#{category} (#{posts_in_category})</a></li>\n"
      end
      html
    end
  end
end

Liquid::Template.register_tag('category_list', Jekyll::CategoryListTag)

Sekarang kita perlu membuat daftar kategori (category_list.html) template di dalam direktori source/_includes/asides, dengan menggunakan “category_list” tag dari plug-in di atas.

Buat file baru di source/_includes/asides dengan nama category_list.html dengan isi code sebagi berikut:

Kemudian yang terakhir adalah meng-edit file _config.yml cari kode berikut ini:

[email protected]
1
default_asides

Tambahkan asides/category_list.html ke dalam daftar asides-nya, misalnya punya saya seperti ini:

[email protected] - _config.yml
1
default_asides: [asides/recent_posts.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html, asides/category_list.html]

Terakhir memperhabarui dengan perintah rake supaya kita bisa melihat hasilnya

Jika di lokal server

[email protected]
1
rake preview

Jika di server seprti GitHub atau yang lainnya.

[email protected]
1
2
rake generate
rake deploy

Maka hasilnya seperti ini kalau punya saya:

Good Luck…! Happy coding, happy hacking, happy homoer :)

Comments