Table of Contents
- 1. Kelebihan
- 2. Kekurangan
- 3. Langkah-langkah
- 4. Tips Editing Org
- 4.1. Menghilangkan postamble
- 4.2. Mengubah format postamble
- 4.3. Setting Image agar auto muncul dengan alt, title dan caption
- 4.4. Menghilangkan H1
- 4.5. Mengubah Kata "Table of Contents", "Figure", dan "Footnotes"
- 4.6. Menambahkan kode HTML agar ikut di render di Org
- 4.7. Menangani Table
- 4.8. Membuat Macro Agar Proses Copy Paste Bisa Otomatis
- 4.9. More on HTML markup
- 4.10. Membuat baris baru di org mode (export HTML)
- 5. Kesimpulan
Tulisan ini awalnya iseng, tapi kok semakin dalam semakin enak, jadinya malah berubah menjadi semacam tutorial. Kalau ada salah kalimat atau code tolong dimaafkan ya, ini setengah sambil dokumentasi, jadi cepet-cepet ditulis dulu sebelum nanti malah lupa.
Melanjutkan serial artikel "Tutorial Emacs untuk Pemula", kali ini akan membahas cara nge-blog (menulis blog) dengan org mode di Emacs.
Figure 1: mbak e menulis artikel SEO
Sebagai contohnya, artikel yang sedang Anda baca ini, saya tulis dalam org-mode di Emacs. Kenapa ndak langsung aja tulis di dashboard blog nya? Kalau sekadar menulis aja, gampang, tidak ada editing aneh-aneh, tapi kalau kita udah sampai misalnya pengen bikin footnote, atau table of contents otomatis, tentu akan kesulitan kalau dilakukan di text editor nya si CMS.1
1 Kelebihan
- Dengan menggunakan mode Org, tulisan kita jadi lebih terlihat terstruktur dan profesional.
- Kita bisa export berkas ke HTML atau export ke PDF2 secara otomatis.
- Kalian punya backup data dalam bentuk plain text yang bisa kalian unggah di github atau sejenisnya. Jadi just in case, ada apa-apa, kalian tinggal posting ulang aja HTML nya.
2 Kekurangan
- Image harus di unggah dulu, entah ke web server sendiri atau pihak ketiga, baru nanti link kita tambahkan di dokumen Org.
- Repot!!! Memang harus diakui, jadi tambah repot, karena harus mikir isi tulisan sekaligus mikir editing. Kembali lagi ini masalah kebiasaan aja sih, kalau sudah terbiasa, segala sesuatunya akan berjalan dengan smooth saja…
3 Langkah-langkah
3.1 Buat postingan di blogger
Pastikan mode edit as HTML, sekalian upload image, jika ingin menggunakan image, nanti URL dari image ini yang akan dimasukkan ke dokumen Org.
3.2 Buat berkas Org dan Tulis Konten
Caranya adalah membuat berkas .org, kemudian menulis seperti biasa, jangan lupa gunakan markup untuk org, seperti * untuk H2 dan seterusnya.
3.3 Export as HTML buffer
Kemudian setelah selesai, kita export dengan menekan C-c C-e h H atau export ke HTML buffer.3 Yang disalin cukup kode HTML yang ada di dalam <div id"content">= sampai dengan penutupan </div>. Yang lain ndak usah di salin, nanti malah tabrakan sama template bawaan blog.
Langkah selanjutnya terserah Anda, mau langsung copy paste ke dashboard CMS atau Anda sunting dulu. Berikut ini ada beberapa tips editing org mode sebelum di artikel di post.
4 Tips Editing Org
Kalau mau disunting dulu secara manual, monggo dipersilakan. Tapi ini ada beberapa tips yang dapat dilakukan agar proses sunting cukup di Org mode aja (sekali untuk selamanya). Selanjutnya tinggal copy paste langsung di dashboard blogger.
4.1 Menghilangkan postamble
By default, Emacs akan menambahkan, div postamble di akhir artikel kita, yang isinya, author, tanggal artikel dibuat dan sebagainya. Kita dapat menghilangkan ini dengan cara menambahkan baris berikut di berkas Org kita (quick hack):
EXPORT HTML <style>#postamble{display:none;}</style> EXPORT
Update :
Bisa dengan menambahkan #+OPTIONS:
#+OPTIONS: html-postamble:nil
4.2 Mengubah format postamble
Kita juga dapat mengubah format dari postamble sesuai dengan keinginan kita, misal:
;; mengubah format postamble Org mode. (setq org-html-postamble "Terakhir diperbarui pada %C oleh %a.")
4.3 Setting Image agar auto muncul dengan alt, title dan caption
Untuk image, berikut ini cara untuk membuatnya langsung tampil di postingan (bukan di Org mode)
#+CAPTION: mbak e menulis artikel SEO #+ATTR_HTML: :alt mbak e menulis artikel SEO :title mba e menulis artikel SEO :align center [[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6f-T4n3DMXYA3956pPV7cSmlqWHBVHiM7eKoF2utptrEoiTfSaCh6o1EnMsl15J3v75t5qYivbX0pLRddx8nhV-p8Jlf7qxgGeLEEO2BqsLu-M82VVfayO-gwQ4D_jW93_vJ1tC9iZOqllVZ4hBH_l56SJfG8vFWhf2lFxDT4NrZh6nBv_da8oNT_2OY/s1024/menulis-blog-dengan-org-mode-di-emacs.png][https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6f-T4n3DMXYA3956pPV7cSmlqWHBVHiM7eKoF2utptrEoiTfSaCh6o1EnMsl15J3v75t5qYivbX0pLRddx8nhV-p8Jlf7qxgGeLEEO2BqsLu-M82VVfayO-gwQ4D_jW93_vJ1tC9iZOqllVZ4hBH_l56SJfG8vFWhf2lFxDT4NrZh6nBv_da8oNT_2OY/s1024/menulis-blog-dengan-org-mode-di-emacs.png]]
4.4 Menghilangkan H1
Lihat solusi terbaru di bawah:
By default, Org mode akan menyertakan <h1> di body, behavior seperti ini seringkali tidak pas kalau diterapkan di blog, karena blog umumnya sudah memiliki form input untuk H1.
Untuk yang satu ini, sementara belum menemukan cara yang pas, jadi ya pake cara hack sedikit ya, dengan edit CSS di template, seperti berikut:
h1.title{display:none;}
Lha nanti H1 nya double dong? Gimana SEO nya… ah masa bodoh lah dengan SEO, yang penting seneng dulu… :)
Update:
Bisa juga dihilangkan ketika kita mau menyalin kode, kita hilangkan dulu tag H1 dengan keyboard macro, seperti yang saya contohkan di bawah.
Update Terbaru :
Ternyata mudah kawan-kawan, maafkan aku yang noob ini, cukup dengan menambahkan baris berikut di #+OPTIONS
#+OPTIONS: title:nil
4.5 Mengubah Kata "Table of Contents", "Figure", dan "Footnotes"
Belum ketemu caranya, udah nyoba pake #+LANGUAGE: id tetep ndak bisa. Nanti kalau udah bisa, artikel ini saya akan update lagi.
4.6 Menambahkan kode HTML agar ikut di render di Org
Nah, ini dia, kadang kita punya kode HTML khusus yang biasa kita masukkan secara manual ketika editing post. Seperti alert box yang kadang saya masukkan ke dalam postingan seperti berikut ini:
Ini contoh kode HTML yang akan ikut di export di Org.
caranya adalah sebagai berikut:
EXPORT HTML <div class="bs-blue"> <p>Ini contoh kode HTML yang akan ikut di export di Org.</p> </div> EXPORT
4.7 Menangani Table
Mari kita coba membuat table di org mode. Table di blog ini, saya custom menggunakan class styled-table.
| No | Nama | Alamat | Profesi |
|---|---|---|---|
| 1 | John Doe | Sleman | Pakar SEO |
| 2 | Barbara | Klaten | Mentor SEO |
Bisa ternyata ya guys… caranya gimana… sini Om ajarin… Sebelumnya buat atau cari tau CSS style table kalian dari template yang kalian gunakan, setelah itu masukkan nama class ke dalam :class nama-class-table-kalian dan masukkan juga :rules none. Seperti terlihat dalam kode di bawah ini.
#+ATTR_HTML: :class styled-table :rules none | No | Nama | Alamat | Profesi | |----+----------+--------+------------| | 1 | John Doe | Sleman | Pakar SEO | | 2 | Barbara | Klaten | Mentor SEO |
4.8 Membuat Macro Agar Proses Copy Paste Bisa Otomatis
Seperti kita tahu, yang akan kita copy paste ke dalam post hanya yang ada di <div id="content">, sebelum dan sesudahnya tidak kita salin. Proses ini dapat kita automasi dengan membuat custom keyboard macro di emacs.4 Caranya, jalankan dulu keyboard macro, kalau saya langkahnya kurang lebih seperti ini:
| Command | Keterangan |
|---|---|
| Ctrl-s content" | Memulai search dari |
| Ctrl-a | Menuju ke awal baris |
| Ctrl-spc | Memulai sorot |
| Ctrl-> | Menuju ke akhir dokumen |
| Ctrl-p 2x | Naik 2 baris |
| Alt-w | Salin (copy) |
Pastikan Anda menggunakan Emacs yang versi GUI, biar hasil copy tersimpan di clipboard secara global, dan bisa di paste di aplikasi lain (dalam hal ini browser). Selanjutnya tinggal paste seperti biasa menggunakan C-v.
Selanjutnya, kita bisa simpan keyboard macro ini ke dalam .emacs kita, kemudian menautkan dengan keybinding custom, biar ke depan tinggal pencet satu tombol saja, bisa langsung tersalin, dalam hal ini saya contohkan, akan saya simpan ke F8.
Caranya adalah
- Alt-x
name-last-kbd-macrotekan enter dan beri nama, saya contohkan dengancopy-html-content. - Buka berkas .emacs
- Alt-x
insert-kbd-macro. Untuk menyisipkan baris macro ke .emacs - Setelah itu tautkan pada F8 dengan cara menambahkan baris berikut (saya menggunakan emacs versi 27.x)
;; keybinding for that macro (global-set-key (kbd "<f8>") #'copy-html-content)
untuk emacs versi 29 (warning: saya belum coba code berikut, silakan cari tutorial lagi kalau ternyata masih error)
;; keybinding for that macro (keymap-global-set "<f8>" #'copy-html-content)
4.9 More on HTML markup
4.9.1 kbd
kbd untuk melakukan markup <kbd>, silakan baca referensi berikut: stackexchange
4.9.2 mark
Update Cara Mark dengan macro:
Ada cara yang lebih pas tanpa harus hack, yakni dengan memanfaatkan macro.5 Silakan lihat tautan di bawah ini:
Cara lama
Kelemahan cara ini adalah kadang tidak berhasil dengan sempurna, karena dalam satu paragraf hanya bisa memberi tag mark satu saja, kemudian mark di awal paragraf juga kadang tidak berhasil. Jadi disarankan pake cara macro saja.
Untuk bisa melakukan markup <mark>, tambahkan code berikut di .emacs Anda:6
(defun org-add-my-extra-markup () "Add highlight emphasis." (add-to-list 'org-font-lock-extra-keywords '("[^\\w]\\(`\\[^\n\r\t]+`\\)[^\\w]" (1 '(face highlight invisible nil))))) (add-hook 'org-font-lock-set-keywords-hook #'org-add-my-extra-markup) (require 'ox) (defun my-html-mark-tag (text backend info) "Transcode :blah: into <mark>blah</mark> in body text." (when (org-export-derived-backend-p backend 'html) (let ((text (replace-regexp-in-string "[^\\w]\\(`\\)[^\n\t\r]+\\(`\\)[^\\w]" "<mark>" text nil nil 1 nil))) (replace-regexp-in-string "[^\\w]\\(<mark>\\)[^\n\t\r]+\\(`\\)[^\\w]" "</mark>" text nil nil 2 nil)))) (add-to-list 'org-export-filter-plain-text-functions 'my-html-mark-tag)
Untuk menandai kata yang diberika mark tag, tambahkan ` (backtick) di awal dan akhir kata yang mau ditandai.
Warning: Kode hack di atas masih belum sempurna, terutama masalah regex parsing nya, jadi kadang ketika kita kasih tanda `di sini` ternyata yang kesorot sampai belakang (alias kebablasen).
Jadi sebaiknya lakukan cek n ricek lagi sebelum posting.
Demo: perhatikan bahwa ini bagian penting ya
4.10 Membuat baris baru di org mode (export HTML)
Untuk membuat baris baru di dokumen Org mode, bisa dengan menggunakan beberapa cara, misalnya:
#+BEGIN_EXPORT HTML <br /> #+END_EXPORT
atau ada cara yang lebih sederhana, yakni:
#+HTML: <br/>
5 Kesimpulan
Artikel ini full ditulis menggunakan Org-mode, saya tinggal copy paste dari berkas .org ke editor di blogger. Gimana hasilnya? Lumayan bukan? Biar ndak dikira hoax, berikut ini tautan ke gist nya.7 Kalau tertarik belajar Emacs, silakan mulai dari sini.8
Dah ya… ini artikel dah panjang banget… kalau ada tambahan nanti akan saya tulis di artikel lain….