Hugo Markdown render hook solusi untuk custom output image, link dan heading
Ilustrasi

Hugo Markdown render hook solusi untuk custom output image, link dan heading

Rilis Hugo versi 0.62.0 menambah satu fitur lagi, yaitu Markdown render hooks yang berfungsi untuk memancing kode HTML mentah ke dalam body text Markdown.

Karena Hugo telah mengganti mesin render Markdown ke Goldmark, diperlukan bagian template baru untuk mengikat HTML mentah tersebut.

Sebelumnya mesin yang bertugas untuk mem-parser file Markdown berubah menjadi text dalam format HTML memakai engine Blackfriday.

Hugo beralih ke Goldmark sebagai default Markdown processor, selain lebih cepat, Goldmark sudah menerapkan standar baru CommonMark, sebuah organisasi yang menstandarkan format Markdown. 👍

By default mesin Goldmark tidak mau merender HTML mentah dan tautan link external yang berpotensi membahayakan ke dalam isi body text Markdown.

Kalau pun memaksa meng-insert potongan kode HTML, script JS dan link dengan perilaku rel="nofollow" ke dalam body text Markdown, hasil render document HTML di bagian tersebut tidak berjalan alias kosong melompong.

Coba deh kalau tidak percaya, pasti script kalian diabaikan oleh mesin Goldmark. seolah tidak terjadi apa-apa. 😇

Sebelumnya, kami pernah mencoba meng-embed langsung script Codepen ke dalam posting, hasil render laman web seolah tidak terjadi apa-apa. 😱

Karena beda cara kerja antara mesin Goldmark dengan mesin Blackfriday dalam memformat plain text menjadi document HTML, diperlukan template Markdown Render Hooks, untuk menjembatani kode HTML mentah ke dalam file Markdown.

Markdown versi CommonMark, untuk menambahkan tautan, bentuk penulisan shortcode seperti ini: []()

[Insertapps.com](https://insertapps.com/ "Insert Apps")`

Hasil render mesin Goldmark menjadi document HTML, default-nya seperti ini:

<a href="https://insertapps.com/" title="Insert Apps">Insertapps.com</a>

Kalau linknya harus ada output seperti target="_blank" atau sebuah tautan mendapatkan prilaku tambahan dofollow rel="nofollow" atau rel="noopener" cara menanganinya melalui sebuah template render hook.

Buat file baru dengan nama render-link.html lalu tempatkan dalam folder:

layouts
└── _default
    └── _markup
        ├── render-image.html
        ├── render-image.rss.xml
        └── render-link.html

Di dalam file template render hook, insert code spesial seperti berikut:

<a href="{{ .Destination | safeURL }}"
	{{ with .Title}} // Loop untuk mengecek apakah ada title link
		title="{{ . }}"
	{{ end }}
	{{ if strings.HasPrefix .Destination "http" }} // Kondisi bila link tidak secure
		target="_blank" rel="noopener"
	{{ end }}>
	{{ .Text | safeHTML }} // Anchor text
</a>

Maka hasil render di laman HTML menjadi:

<a href="https://insertapps.com/" title="Insert Apps" target="_blank" rel="noopener">
	Insertapps.com
</a>

Begitu juga untuk memformat gambar. Shortcode versi CommonMark untuk insert picture ke dalam plain text Markdown seperti ini: ![]()

![Yout text for alt image](https://insertapps.com/assets/hero.jpg "Text for your image title or caption")

Default output yang dihasilkan oleh mesin Goldmark di laman HTML seperti ini:

<p>
	<img src="https://insertapps.com/assets/hero.jpg"
		 alt="Yout text for alt image"
		 title="Text for your image title or use caption">
</p>

Bagaimana kalau tata letak gambar wajib di-render dalam tag <figure> misalnya, sekaligus menghias dengan tambahan style css card?

Prosesnya sama juga. Create file baru dengan nama render-image.html. Kemudian insert code tambahan tersebut, misalnya seperti ini:

<figure class="card" style="width: 18rem;">
	<img class="card-img-top" // Add image class
		 src="{{ .Destination | safeURL }}" // Print url image here
		 alt="{{ .Text }}" // Print alt image here
	{{ with .Title}} // Checking image title
		 title="{{ . }}"
	{{ end }} />
	//
	<figcaption class="card-body">
		 <h5 class="card-title">{{ .Title }}</h5> // Print title
	<figcaption>
</figure>

Tak hanya itu, dengan template Markdown render hooks ini, bisa custom output ke format file AMP dengan tag <amp-img>.

Cukup buat document HTML baru atau duplicate saja file render-image.html,dan rename nama file menjadi render-image.amp.html.

Lalu tinggal modifikasi saja dengan standar format file template AMP.

<amp-img
  alt="{{ .Text }}"
  src="{{ .Destination | safeURL }}"
  width="900"
  height="675"
  layout="responsive"
>
</amp-img>

Mudahkan?

Untuk custom heading dan untuk membuat daftar isi yang body Markdown, caranya sama juga.

Lebih jelasnya, silahkan baca documentasinya di configurasi markup. Soalnya kami belum mempraktekkannya, nanti kalau sudah pernah mencobnya, artikel ini kami update lagi.

Intinya dengan template Markdown render hook ini akan memudahkan dalam mengelola custom output khusus image, link dan heading. 😏

Oya, bila Hugo Markdown render hook image untuk file template AMP render-image.amp.html gagal di eksekusi, silahkan baca solusinya di halaman ‘Self problem hugo render hook amp-img template not working’. 😓

Comment

comments powered by Disqus