Day 24. Hugo Shortcode 運用場景 - 圖片篇

12th鐵人賽 hugo

littlebookboy

2020-10-07 22:40:54

2441 瀏覽

前言

本篇會提到幾種關於圖片引入到 markdown 的運用場景。

Markdown 語法

插入本地圖片

![我是一張圖](/images/image1.png)

通過 markdown 語法引入圖片，以上面為例，你必須把圖片放在 static 底下，例如：

./static
└── images
    └── image1.png

成效：

插入外部圖片

一樣是通過 markdown 語法引入圖片，只是路徑改為圖片網址即可：

![](https://i.imgur.com/D3fTjrl.png)

Shortcodes 語法

基本用法

創建 Shortcode ./layout/shortcodes/img.html，內容如下：

<img src="{{ .Get `src` }}">

用法如下：

# 本地圖片 ./static/images/image1.png
{{< img src="/images/image1.png" >}}

# 外部圖片 https://i.imgur.com/D3fTjrl.png
{{< img src="https://i.imgur.com/D3fTjrl.png" >}}

衍伸用法

使用 <img> 引入圖片，我們就可以運用 HTML 語法，自訂一些參數來調整圖片，下面舉幾個例子：

Resize 調整尺寸

img.html 設定參數 width 以及 height：

<img src="{{ .Get `src` }}" style="width: {{ .Get `width` }}; height: {{ .Get `height` }};">

從 Markdown 傳入參數：

{{< img src="/images/image1.png" width="10%" height="10%" >}}

當然對於前端設計師而言，不會像筆者這邊舉例，直接粗暴的設定寫死 style 屬性，可能會透過另外的 css 樣式套用上去，這邊 Shortcode 傳入的就會改為 size-tag，例如：large、medium、small。

另外，若是使用 Page Bundles 的情況下，透過 Page Resource 載入圖片，就可以運用 Hugo 提供的 Image Processing 這邊提到的方式，對圖片做各種調整，例如 Resize。

Wide Image 展開橫幅

參考佈景 Tranquilpeak (出處) 的做法：

</div>
<div class="figure figure--fullWidth">
  <img class="figure-img" src="{{ .Get "src" }}" {{ with (.Get "title") }}alt="{{ . }}"{{ end }} />{{ with (.Get "title") }}<span class="caption">{{ . }}</span>{{ end }}
</div>
<div class="main-content-wrap">

成效：

這邊說明一下 Shortcode 原始碼，一開始的 </div> 應是為了與圖塊上方內容區隔，接著透過佈景設置的 class 控制圖片展開成全幅，在透過 span.caption 這行載入 title 顯示在圖片正下方，如果不使用這套佈景，基本上也是可以自己刻一份概念差不多的 Shortcode，達成接近的效果。

Image Link 圖片連結

運用 Hugo 判斷傳入參數，若設置了 link，則圖片變成可以另開視窗：

{{ if (isset .Params "openable") | and (eq .Params.openable true) }}
<a href="{{ .Params.src }}" target="_blank">
    <img src="{{ .Get `src` }}">
</a>
{{ else }}
<img src="{{ .Get `src` }}">
{{ end }}

Markdown 引入追加參數 link：

{{< img openable=true src="https://images.unsplash.com/photo-1525490829609-d166ddb58678?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2849&q=80" >}}

成效：