前言

筆者想要在每篇文章底下 (footer) 放上如下圖所示：

紅框中的三種鏈結，分別使用不同的語法達成，以下將一一介紹。

類型

• 本站跳轉：原始 Markdown 超連結
• 開新分頁：Shortcode 超連結
• 自動擷取：Hugo Site Variables 文章永久鏈結

本站跳轉

使用 Markdown 語法可製作超鏈結，讓讀者可在網站中快速跳轉，對於鏈結目標是自己的網址來說 (例如 reference 另一篇文章)，使用這類語法就足夠了。

[Title](https://example.com)

此類鏈結筆者應用在：作者名稱 littlebookboy 超鏈結，點擊可以連到 /archives 所有文章的頁面。

開新分頁

若是鏈結目標為外部網址 (別人的頁面)，你又不想讓別人點開網址後，蓋掉自己的頁面 (本頁跳轉)，就必須讓使用者點擊 link 時，預設行為可以「開新分頁」，這個需求透過 shortcode 可以輕易做到。

創建一支 shortcode 名為 ./layout/shortcodes/a.html：

<a href="{{ .Params.href }}" target="{{ .Params.target }}">{{ .Inner }}</a>

變數 .Inner，指的是這塊的值：

# 在 markdown 中引入 shortcode，使用成對標籤包覆的部分，即為 .Inner
{{< a >}}我是Inner{{< /a >}}

使用方法：

{{< a href="https://ithelp.ithome.com.tw/users/20106430/ironman/3613" target="_blank" >}}Hugo 貼身打造個人部落格{{< /a >}}

呈現效果：

可以看到原始碼帶有 target="_blank"，如此這類鏈結就可以預設點擊開新分頁：

自動擷取

想要產生「文章永久鏈結」，其實要運用到 Hugo 提供的 Site Variables 與 Page Variables，直接上 shortcode (page-link.html)：

<a href="{{ .Site.BaseURL }}{{ .Page.RelPermalink }}" target="_blank">{{ .Site.BaseURL | replaceRE ".me/" ".me" }}{{ .Page.RelPermalink }}</a>

href 部分是抓 config.toml 中設置的 baseURL (透過 {{ .Site.BaseURL }} 取得)，以及當前頁面的相對網址 (透過 {{ .Page.RelPermalink }} 取得)

href="{{ .Site.BaseURL }}{{ .Page.RelPermalink }}"

在顯示文字的部分，針對 {{ .Site.BaseURL }} 加了一道方法處理，把 .me/ 改為 .me，不然筆者自己網址會長得像 https://xxx.me//post 在 me 之後帶有 //。

{{ .Site.BaseURL | replaceRE ".me/" ".me" }}

在 markdown 中引入以下這行即可：

{{< page-link >}}

小結

這裡面筆者研究最久的是產生「文章永久鏈結」的部分了，它結合了 config 設置、variables 應用、pipes 應用、shortcode 應用等等，對初入門的人來說有點硬，喜歡的話就幫我按個 like，感恩。

參考連結

• Hugo Site Variables
• Hugo Page Variables
• Hugo Shortcode Variables