Hugo: สร้าง custom shortcode

Published on

Shortcode ใน Hugo คืออะไร

แนวคิดก็คล้ายๆ ภาษา markdown หรือ shortcode ของ WordPress คือ snippet ที่มีให้เราใช้ เขียนสั้นๆ แต่แปลงออกมาเป็น output HTML ยาวๆ ได้

ตัวอย่างเช่น built-in shortcode ของ Hugo เวลาอยากจะแทรกรูปจาก Instagram ในโพสต์ แทนที่จะต้องไป copy embed HTML code ยาวๆ มาทั้งหมด (ซึ่งยาวมาก) ก็จะเหลือแค่

{{< instagram BhjmuHLBs48 >}}

instagram คือชื่อของ shortcode ส่วน Bhj.. คือ ID ของรูปจาก Instagram ทั้งหมดถูกหุ้มด้วย {{< >}}

นอกจาก Instagram แล้ว Hugo ยังมี built-in shortcode ให้อีกจำนวนหนึ่งไว้ช่วยทุ่นแรง


บล็อกนี้ผมได้ทำ style ของรูปไว้ 3 แบบ

เวลาผมแทรกรูปลงในโพสต์ จะใช้ tag <p> ครอบไว้ พร้อมกับ CSS class .media แล้วตามด้วย CSS class เพิ่มเติม ตามแต่ละ style

เช่น

<!-- แบบธรรมดา -->
<p class="media">
  <img src="" alt="">
</p>

<!-- แบบกึ่งเต็ม -->
<p class="media semi-full">
  <img src="" alt="">
</p>

<!-- แบบเต็ม -->
<p class="media full">
  <img src="" alt="">
</p>

(ในโพสต์รีวิวจักรยาน Storck Visioner มีรูปทั้ง 3 style)

ปกติแล้วเวลาเขียน markdown file syntax การใส่รูปคือ

![alt text](image.png)

ซึ่งพอ compile เป็น HTML ก็จะได้

<img src="image.png" alt="alt text">

แต่ถ้าอยากเอา tag <p> มาครอบ จะทำแบบนี้ไม่ได้ รูปจะไม่ออก

<p class="media">
  ![alt text](image.png)
</p>

ที่ผ่านมา เวลาจะใส่รูปลงไปในโพสต์ ก็เลยต้องเขียน HTML แบบเต็มๆ เลยคิดว่า ทำเป็น shortcode ไว้ น่าจะช่วยทุ่นแรงได้

สร้าง Shortcode ใช้เอง

จะลองทำ 1 shortcode ที่สามารถ render HTML output สำหรับรูปภาพออกมาได้ทั้ง 3 แบบ จะให้ชื่อเป็น picture และให้ส่ง parameter เข้าไปได้ แบบนี้

{{< picture style="full" src="image.png" alt="image alternate text" >}}

เริ่มจาก ต้องไปสร้างไฟล์ HTML สำหรับ shortcode นี้ก่อน ผมเลือกเก็บไว้ใน theme ต้องสร้างไฟล์ที่ /themes/armno/layouts/shortcodes/picture.html

จากนั้น ในไฟล์ picture.html เราก็ต้องมี HTML code เตรียมไว้

<!-- picture.html -->
<p class="media">
  <img src="" alt="">
</p>

และใส่ค่าจาก parameter ของ shortcode โดยใช้ {{ .Get "param-name" }} method จาก Hugo

<!-- picture.html -->
<p class="media {{ with .Get "style"}}{{.}}{{ end }}">
  <img {{ with .Get "src"}} src="{{.}}"{{ end }}
  {{ with .Get "alt"}} alt="{{.}}"{{ end }}>
</p>

เพียงเท่านี้ก็ได้ shortcode ใหม่มาใช้แล้ว .. ผ่าม!

ทดสอบเพิ่มรูปโดยใช้ pitcure shortcode

ทดสอบ picture shortcode ด้วยรูปปลาทู

Share

(Edit on GitHub)