iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
0
Modern Web

Hugo 貼身打造個人部落格系列 第 22

Day 22. Hugo Shortcode 介紹

Shortcode 簡介

我們知道 Hugo Content 其內容主要是用 Markdown 這類文字標記語法所寫成,內容格式、可用語法較為基礎簡單,若是我們想要套用更多樣化的語法時,只用 Markdown 是做不到的,而且我們不能在 .md 中撰寫如 HTML 的語法,此時就可以透過 Hugo Shortcode 來為我們處理這一塊。

Shortcode V.S. Hugo Template

Shortcode 可以看作是「一小塊 HTML 程式片段」,與 Hugo Template 不同的是,前者通常運用在「插入特定用途」、「重複使用」的片段語法到 markdown 內容中,而後者則是作為 markdown content 的外殼載體、或是佈局規劃等,用以構成我們最後呈現的視圖頁面 (View)。

換句話說,Template 有點像尚未擺放任何拼圖的底框,拼圖畫面則是文章內容,在使用 Shortcode 豐富其畫面的變化。

Shortcode 使用說明

在專案底下新增以下結構資料:

./layouts
└── shortcodes
    └── sandbox.html

shortcodes 資料夾用來放置所有 shortcode,資料夾名稱不可異動,大小寫也須完全相同。而底下的每一支 .html,例如 sandbox.html 都是一支可以被插入到 .md 的 shortcode 原始碼。

舉個例子:嵌入 gif

假設我們想要利用 HTML 語法嵌入外部 gif 圖檔,可新增一支 imgur.html 檔案,內容如下:

# imgur.html
---
title: "Shortcode Test 1"
date: 2020-10-05T20:47:09+08:00
draft: false
---

shortcode 測試

{{< imgur B3lI2gf >}}

<!-- 或是指定變數名稱 {{< imgur code="B3lI2gf" >}} -->
<img src="https://i.imgur.com/{{ .Get 0 }}.gif">

使用 {{ .Get 0 }} 代表取得 {{< shortcode $ >}} 第一個 $ 位置的值,你也可以透過指定變數名稱取代 0:

{{< imgur code="B3lI2gf" >}}

這樣 imgur.html 引入圖檔 src 的部分就可以改成:

<img src="https://i.imgur.com/{{ .Get `code` }}.gif">

效果

重複使用:

...
{{< imgur code="B3lI2gf" >}}
{{< imgur code="B3lI2gf" >}}
{{< imgur code="B3lI2gf" >}}
{{< imgur code="B3lI2gf" >}}
{{< imgur code="B3lI2gf" >}}
{{< imgur code="B3lI2gf" >}}

小結

本篇介紹如何建置一支 shortcode、從 markdown 傳參數給 shortcode 使用,最後引入 markdown 文章內容中呈現,我們只需要懂一些 HTML 的基本用法,就可以擴充更多的選項,豐富網站的內容。

接下來會在分幾個運用場景,多介紹一些筆者自己使用 shortcode 的經驗,並補充一些 Hugo Variables 的說明 (有用到的話)。

參考連結


上一篇
Day 21. Hugo Pipes
下一篇
Day 23. Hugo Shortcode 運用場景 - 網址篇
系列文
Hugo 貼身打造個人部落格30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
teddybear95
iT邦新手 5 級 ‧ 2022-05-06 22:13:13

代码段嵌入这种{{< imgur 34242310-b5056510-e655-11e7-8568-60ffd4f71910 >}}短代码问题请教,这种{{}}不能显示怎么解决。

0
qetup1988
iT邦新手 5 級 ‧ 2022-10-31 15:49:58

第一段 shortcode 簡介那邊敘述不正確。 markdown 是可以支援 html 沒問題的。可參考此連結

哇~
我搞錯了QQ
感謝你的指正~

另外不知道為何用手機打不開你的連結
我找了一篇也有解釋到相關資訊的補充在這
https://markdown.tw/

我要留言

立即登入留言