點燈坊

失くすものさえない今が強くなるチャンスよ

整合 Hugo 與 Petite-vue (IIFE)

Sam Xiao's Avatar 2024-01-23

Petite-vue 特別適合後端有自己 Template Engine 的使用場景，Hugo 雖然為 SSG，但因為使用了 Go Template，事實上與後端類似，因此也適合 Petite-vue，更可還原 Alpine 風格將 JavaScript 寫在 HTML 內。

Version

Hugo 0.121.2
Petite-vue 0.4.1

New Site

$ hugo new site hugo-pvue --format json
  • hugo new site : 以預設骨架建立 Hugo 站台
  • –format json : 以 JSON 格式作為 Hugo 設定檔

Install Petite-vue

$ npm install -D petite-vue
  • 使用 NPM 安裝 Petite-vue

Module Mounts

hugo.json

{
   "baseURL": "https://example.org/",
   "languageCode": "en-us",
   "title": "My New Hugo Site",
   "module": {
      "mounts": [
         {
            "source": "node_modules/petite-vue/dist/petite-vue.iife.js",
            "target": "static/js/petite-vue.iife.js"
         }
      ]
   }
}

Line 5

"module": {
  "mounts": [
    {
      "source": "node_modules/petite-vue/dist/petite-vue.iife.js",
      "target": "static/js/petite-vue.iife.js"
    }
  ]
}
  • 將 node_modules 目錄下的 Petite-vue mount 到 static 目錄下，只是邏輯上的 mount，並不是 copy 到 static 目錄下
  • 因為在 static 目錄下的 JavaScript 可直接使用最為方便，因此選擇 mount 到 static 目錄下
  • 雖然在 static 目錄下看不到 Petite-vue，但最後會將 Petite-vue publish 到 public 目錄下

若要以類 Alpine 風格使用 Petite-vue，則要使用 petite-vue.iife.js

Layout

layouts/index.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="js/petite-vue.iife.js" defer init></script>
    {{ $title := "Petite-vue Lab" }}
    <title>{{ $title }}</title>
  </head>
  <body>
    <div>{{ $title }}</div>
    <div v-scope="{ count: 0 }">
      <button @click="count++">+</button>
      <div v-text="count"></div>
    </div>
  </body>
</html>

Line 6

<script src="js/petite-vue.iife.js" defer init></script>
  • 引用在 static/js 目錄下的 petite-vue.iife.js

Line 7

{{ $title := "Petite-vue Lab" }}
<title>{{ $title }}</title>
  • 定義 Go template 變數
  • 顯示 Go template 變數

Line 12

<div v-scope="{ count: 0 }">
  <button @click="count++">+</button>
  <div v-text="count"></div>
</div>
  • v-scope：定義 Petite-vue 變數
  • @click：click event
  • v-text：顯示 Petite-vue 變數

使用 v-text 可避免與 Go Template 的 delimiter 衝突

Conclusion

  • 在 Hugo 似乎較流行使用 Alpine，雖然 Alpine 與 Vue 十分相似，但若想維持 Vue 的風格，在 Hugo 使用 Petite-vue 也是不錯選擇
  • 使用 Module Mount 可簡單將 node_modules 下的 Petite-vue mount 到 static 目錄下，如此可繼續使用 NPM 管理 Petite-vue 版本，不必再手動將 Petite-vue 複製到 static 目錄下，此方法也適用於其他 NPM 套件
  • Petite-vue 也支援 Alpine 風格將 JavaScript 寫在 HTML 內，這種適合用來控制 HTML 與 CSS 是否呈現，而非用來控制 data
  • Petite-vue 使用 Alpine 風格時，就不再糾結於 delimiter 了，直接使用 v-text 避開 Go Template 的 delimiter 即可

# Hugo # Petite-vue