Mencoba Plugin di Octopress

Beberapa waktu yang lalu saya baru saja menginstall Octopress, yaitu blogging framework yang terkenal untuk hacker (katanya seperti itu :D). Oke langsung saja, jadi di Octopress ada beberapa plugin yang bisa digunakan untuk ditambahkan di post artikel. Berikut adalah beberapa pluginnya.

1. Code Block Dengan plugin ini kamu bisa menulis blok kode secara langsung dalam posting Anda dan bisa juga dengan menambahkan judul dan link.

Contoh:

The codelink
1
puts "Hello world!" Happy monday!

2. Image Tag Plugin ini memungkinkan kamu untuk menambah gambar di dalam post artikel. Di octopress untuk menambah gambar menggunakan Markdown syntax. Memasukkan gambar di Octopress ada dua jenis yaitu memasukkan gambar dari website / link url gambar tersebut.

Contoh Gambar dari Link Web Lain:

Dan yang kedua adalah memasukkan gambar kita sendiri dari Local. Caranya yaitu dengan copy gambar yang akan di post misal dari hasil screenshot ke dalam folder ‘/source/images’. Setelah itu url pada gambar ubah menjadi /images/namagambar.png.

Contoh Gambar Local:

Bedanya adalah ketika memasukkan gambar dari link web lain otomatis itu bukan milik kita tetapi milik gambar orang tertentu, dan kita bisa terkena hak cipta jika suatu saat yang punya gambar menuntut. Sedangkan jika memasukkan gambar sendiri itu artinya gambar milik kita sendiri misal dari hasil Screenshot, foto objek tertentu, dll. Cara membedakan apakah gambar itu diambil dari link web lain atau upload sendiri adalah dengan klik kanan pada gambar dan open image in new tab.

3. HTML5 Video Tag Plugin ini memungkinkan kamu untuk memasukan video mp4 yang di encode dalam format HTML 5 video di dalam post.

4. Include Code Untuk menampilkan isi code tertentu, arahkan path directory tersebut. Default dari Octopress adalah di dalam directory ‘source/….’

(github.js) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var github = (function(){
    function escapeHtml(str) {
        return jQuery('<div/>').text(str).html();
    }

    function render(target, repos){
        var i = 0, fragment = '', t = $(target)[0];

        for(i = 0; i < repos.length; i++) {
            fragment += '<li><a href="'+repos[i].html_url+'">'+repos[i].name+'</a><p>'+escapeHtml(repos[i].description||'')+'</p></li>';
        }
        t.innerHTML = fragment;
    }

    return {
        showRepos: function(options){
            jQuery.ajax({
                url: "https://api.github.com/users/"+options.user+"/repos?sort=pushed&callback=?",
                dataType: 'jsonp',
                error: function (err) { jQuery(options.target + ' li.loading').addClass('error').text("Error loading feed"); },
                success: function(data) {
                    var repos = [];
                    if (!data || !data.data) { return; }
                    for (var i = 0; i < data.data.length; i++) {
                        if (options.skip_forks && data.data[i].fork) {
                            continue;
                        }
                        repos.push(data.data[i]);
                    }
                    if (options.count) {
                        repos.splice(options.count);
                    }
                    render(options.target, repos);
                }
            });
        }
    };
})();

5. Blockquote Blockquote plugin mengambil penulis, sumber, judul dan kutipan, dan juga HTML Semantik. Contoh:

Over the past 24 hours I've been reflecting on my life & I've realized only one thing. I need a medieval battle axe.

Comments