Digit Oktavianto Web Log

Catatan Sampah si Digit

Octopress Tips : Embed / Include Source Code in Octopress

| Comments

Hari ini saya akan memberikan Octopress tips mengenai cara include / embed source cde pada postingan di Octopress. Sebagai contoh anda bisa melihat postingan saya di http://digitoktavianto.web.id/octopress-tips-tag-cloud-and-category-sidebar-in-octopress.html. Di sana anda akan melihat source code yang saya embed pada postingan tersebut. Source code tag_cloud.html dan category_list.html yang saya include-kan disana merupakan source code yang saya ambil dari folder tertentu dan saya hanya melakukan perintah untuk memanggil source code tersebut.

Anda dapat menemukan cara ini juga pada halaman docs Octopress di http://octopress.org/docs/blogging/code/ pada bagian include source code snippet.

Untuk melakukan ini anda hanya perlu menulis Syntax seperti ini :

1
{% include_code [title] [lang:language] path/to/file %}

Namun sebelumnya /path/to/file di atas harus anda konfigurasi terlebih dahulu. File konfigurasi nya berada pada _config.yml . Jika anda membuka _config.yml :

digit@digit-laptop:~$ nano _config.yml

Pada bagian ini :

1
code_dir: downloads/code/

Secara default anda harus menaruh source code yang akan di embed / di include disana. Namun berhubung folder itu tidak ada maka bisa kita rubah. Saya membuat folder /code di dalam folder /source/Download/

digit@digit-laptop:~$ mkdir source/Download/code

digit@digit-laptop:~$ cd source/Download/code

Karena anda akan menaruh semua source code yang mau di embed di folder /source/Download/code, maka file ‘_config.yml’ nya anda rubah dahulu.

digit@digit-laptop:~$ nano _config.yml

Menjadi seperti ini :

1
code_dir: Download/code/

Di folder /source/Download/code ini anda harus menaruh file-file yang akan anda embed / include pada postingan di Octopress.

Misalnya di dalam folder /source/Download/code itu saya isi tag_cloud.html dan category_list.html yang akan saya embed di link postingan ini –> http://digitoktavianto.web.id/octopress-tips-tag-cloud-and-category-sidebar-in-octopress.html

Maka di dalam postingan tersebut saya hanya perlu memanggil source code tag_cloud.html dan category_list.html seperti ini :

1
2
3
{% include_code [lang:html] tag_cloud.html %}

{% include_code [lang:html] category_list.html %}

Selamat Mencoba :D

Comments