Pipes 簡介

Hugo Pipes (管道) 是一套 Hugo 用來載入資產 asset 時，疊加處理資產的方法集合，在官網文件中列出了各種相關方法，這邊簡單列出幾個：

• resources.Get 載入資產文件
• resources.ToCSS 將載入 scss 資產轉為 css
• resources.Minify 將載入的資源經過壓縮處理
• resources.Fingerprint 將處理過的檔案名稱加上一段 hash code 以即時更新異動過的資產
• ..等等

使用方法概念上是：

{{ Get file | 第一道處理 | 第二道處理 | ... }}

例如：

{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS }}

上面例子為載入一個 .scss 檔案，賦予給變數 $sass，接著將其使用 pipes 經過一道 resources.ToCSS 將其轉為 .css 檔案，賦予給 $style，之後就可以運用資產方法，將其引入到檔案中，例如：

{{ $style.Permalink }} # 帶出絕對路徑
{{ $style.RelPermalink }} # 帶出相對路徑

方法別名

管道中的每道處理，都可直接使用方法別名，不用每個都補上 resource.functionName，例如：

{{ $style := resources.Get "sass/main.scss" | toCSS | minify | fingerprint }}

# 等同於
{{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}

而一整行 pipes 管道處理，官方稱之為 chain。

Pipes 快取

整條 Pipes 在渲染第一次遇到沒見過的 chain 時，會整個跑一次，之後預設會讀快取：

{{ $mainJs := resources.Get "js/main.js" | js.Build "main.js" | minify | fingerprint }}

以上面例子，載入一個 main.js，經過 Build 輸出成 main.js，以下是結果：

可以看到第二次載入已經是快取的檔案了，如果變更 js 內容，則會再次載入異動過的 js 之後，將其快取。

舉個栗子：bootstrap

創建資產文件夾 asset，結構如下 (為了測試效果，筆者從 cdn 另存檔案放進資產目錄中)：

./assets
├── css
│   ├── bootstrap-theme.min.css 
│   └── bootstrap.min.css
└── js
    └── bootstrap.min.js

接著我們透過 shortcodes 引入：

測試文章 ./content/post/pipe.md

---
title: "Pipe"
date: 2020-10-04T14:06:57+08:00
draft: true
---

Pipe 測試。

{{< pipe-test >}}

測試 shortcode 路徑：

./layouts
└── shortcodes
    └── pipe-test.html

pipe-test.html 內容：

<!-- Latest compiled and minified CSS -->
{{ $bootstrapStyle := resources.Get "css/bootstrap.min.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $bootstrapStyle.Permalink }}">

<!-- Optional theme -->
{{ $bootstrapThemeStyle := resources.Get "css/bootstrap-theme.min.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $bootstrapThemeStyle.Permalink }}">

<!-- Latest compiled and minified JavaScript -->
{{ $bootstrapJs := resources.Get "js/bootstrap.min.js" | js.Build "bootstrap.js" | minify | fingerprint }}
<script src="{{ $bootstrapJs.Permalink }}"></script>

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

成果：

小結

今天利用 Pipes 功能介紹如何載入自訂資產文件：js、scss、css 等等，並提到 shortcodes 如何幫助我們使用 Hugo 的語法，讓其作用到 markdown 文章中 (也可以直接將引入資產的片段放在 <header> 中)；接下來幾天就會開始介紹筆者使用 shortcodes 的案例。

各位中秋節快樂，要收假了(淚)。

參考連結

• Hugo Pipe
• Hugo Shortcode Variables