我的寫作流程再優化：用 Front Matter CMS + Gemini AI 一鍵生成英文網址

13 Aug 2025 ·7 min

用 AI 讓中文標題自動變成好看的英文網址

為什麼想這樣做？

我平常習慣用中文寫作，但文章發佈到網站上時，總覺得網址用英文顯示比較簡潔。過去，我雖然會用 ChatGPT 這類工具幫忙翻譯標題，但還是得複製標題、下指令、再把結果貼回來調整格式。這個來回的過程，總覺得多了一道手續，有點打斷寫作的流暢感。

最近我找到一個方法，可以用 Front Matter CMS 搭配 Google Gemini AI，在 VS Code 裡按個鈕，就自動完成這件事。

設定好的樣子： 在 VS Code 裡按一下，就能把像「探索第二大腦：提升生產力的四個步驟」這樣的中文標題，自動轉成乾淨、也適合搜尋引擎的英文網址 exploring-second-brain-four-steps-to-boost-productivity。整個過程不用自己翻譯，真的就是按一下就好。

誰適合看這篇？

習慣用 VS Code 寫 Markdown 文章
文章是中文（或其他非英文），但希望網址是英文
正在用 Front Matter CMS 管理文章
想省下翻譯和整理網址格式的時間

關於 Front Matter CMS

我也是最近才發現這個 Front Matter CMS VS Code 擴充套件（下載連結），對於已經有在維護靜態網站的人來說，它真的很方便。它能讓管理 Markdown 文章的體驗更直覺，還能加上各種自訂功能。我們今天想做的「AI 轉網址」就是其中一種，設定好之後就能很自然地融入寫作流程裡。

開始設定前，先準備好這些

需要的工具與帳號

VS Code（已安裝 Front Matter CMS 擴充套件）
Node.js（建議 v18 以上）
一個靜態網站專案（用什麼框架都可以）
Google AI Studio 帳號（用來申請 Gemini API Key）

安裝必要套件

# npm
npm install -D @dotenvx/dotenvx @google/genai @frontmatter/extensibility

# 或 pnpm
pnpm add -D @dotenvx/dotenvx @google/genai @frontmatter/extensibility

# 或 yarn
yarn add -D @dotenvx/dotenvx @google/genai @frontmatter/extensibility

申請 Gemini API Key

到 Google AI Studio
登入 Google 帳號
建立 API Key，記得先複製好待會要用

設定步驟

1. 建立腳本

在專案根目錄新增 scripts/generate-slug-gemini.js：

import process from 'node:process'
import dotenvx from '@dotenvx/dotenvx'
import { FieldAction } from '@frontmatter/extensibility'
import { GoogleGenAI } from '@google/genai'

// Load environment variables with quiet option to suppress debug output
dotenvx.config({ quiet: true });

(async () => {
  const { frontMatter } = FieldAction.getArguments()

  if (!frontMatter) {
    FieldAction.done('Error: Front matter data not found')
    return
  }

  if (!frontMatter.title || frontMatter.title.trim() === '') {
    FieldAction.done('Error: Post title is missing or empty')
    return
  }

  const apiKey = process.env.GEMINI_API_KEY
  if (!apiKey || apiKey.trim() === '') {
    FieldAction.done('Error: GEMINI_API_KEY environment variable not found or empty')
    return
  }

  const ai = new GoogleGenAI({ apiKey })

  const model = process.env.GEMINI_MODEL || 'gemini-2.5-flash'

  const prompt = `Convert the following Chinese blog post title into a concise English URL slug.

Requirements:
- Return ONLY the slug, nothing else
- Use lowercase letters only
- Connect words with hyphens (-)
- Remove all special characters, spaces, and punctuation
- Keep it concise but descriptive
- Make it SEO-friendly

Chinese Title: "${frontMatter.title}"`

  try {
    const result = await ai.models.generateContent({
      model,
      contents: prompt,
    })

    if (!result || !result.text) {
      FieldAction.done('Error: Gemini AI returned empty response')
      return
    }

    let slug = result.text.trim()

    // Remove quotes that AI sometimes adds
    if (slug.startsWith('"') && slug.endsWith('"')) {
      slug = slug.slice(1, -1)
    }

    // Ensure slug meets URL requirements
    slug = slug
      .toLowerCase()
      .replace(/[^a-z0-9\-]/g, '-')
      .replace(/-+/g, '-')
      .replace(/^-|-$/g, '')

    FieldAction.update(slug)
  }
  catch (error) {
    FieldAction.done(`Error: Failed to generate slug - ${error.message}`)
  }
})()

2. 設定 API Key

在專案根目錄建立 .env：

GEMINI_API_KEY=你的_API_KEY

# 視需要設定：指定要使用的 Gemini 模型（預設為 gemini-2.5-flash）
GEMINI_MODEL=gemini-2.5-flash

並確保 .gitignore 已忽略 .env（如果沒有，執行以下指令新增）：

# 加入 .gitignore 以避免把 API 金鑰提交到 Git
echo ".env" >> .gitignore

💡 模型選擇：腳本預設使用 gemini-2.5-flash，這是目前最適合文字生成的模型。如果想嘗試其他模型，可以參考 Gemini API 模型說明。

3. 設定 Front Matter CMS 功能

編輯 frontmatter.json：

{
  "frontMatter.taxonomy.contentTypes": [
    {
      "name": "post",
      "fields": [
        {
          "title": "標題",
          "name": "title",
          "type": "string",
          "single": true
        },
        {
          "title": "網址（Slug）",
          "name": "slug",
          "type": "string",
          "single": true,
          "actions": [
            {
              "title": "用標題產生網址",
              "script": "./scripts/generate-slug-gemini.js"
            }
          ]
        }
      ]
    }
  ]
}

設定好之後的樣子

打開一篇文章
在 Front Matter 面板找到「網址（Slug）」欄位
點擊「網址（Slug）」欄位右側的小終端機圖示按鈕（>_）
會自動生成並填入英文網址

過程中可能遇到的小狀況

問題：按鈕沒有出現，或按了沒反應

# 檢查設定檔 frontmatter.json 格式
npx jsonlint frontmatter.json

# 確認腳本路徑存在
ls -la scripts/generate-slug-gemini.js

# 重新載入 Front Matter CMS
# 命令選擇區（Command Palette）執行 "Front Matter: Refresh Front Matter Settings"

問題：出現 `GEMINI_API_KEY environment variable not found`

# 檢查 .env 是否在專案根目錄，格式如下
cat .env
# 應該看到：GEMINI_API_KEY=你的金鑰
# 建立或修改後，請完整重開 VS Code

問題：出現 `The script did not return a field value`

請移除所有 console.log / console.error。Front Matter 只接受 FieldAction.update() 與 FieldAction.done() 的輸出。

問題：Gemini 回傳空值

到 Google AI Studio 確認 API Key 是不是還有效，或是額度用完了。

結語

自從設定好這個功能，我寫文章的流程又順了一點。雖然手動翻譯網址只是件小事，但能把這一步也自動化，確實讓我可以更專注在內容本身。有時候，寫作的順暢感就是來自這些微不足道的小地方。

資源連結：

感謝你讀到這裡！如果我的分享讓你有所共鳴或啟發，歡迎請我喝杯珍奶 🧋，給我一點繼續分享的能量： https://anna.bobaboba.me

#AI