快轉到主要內容

VSCode + Front Matter CMS,打造Hugo靜態網站管理後台

資訊科技 Hugo網站架設 Hugo Visual Studio Code
✍ 切換正體/簡體字
目錄

覺得靜態網站的文章難以管理嗎?

希望有個漂亮的前端編輯器輔助寫作嗎?

使用「Front Matter」就對了。

記錄設定vscode-front-matter的過程,最後分享設定好之後的發文流程,展示操作簡化後的威力。

1. Front Matter功能簡介
#

Elio Struyf開發的「Front Matter」是一款為靜態網站設計的CMS(內容管理系統),本體作為Visual Studio Code延伸模組提供。

Front Matter設計十分靈活,支援多種靜態網頁框架:Hugo、Jekyll、Hexo、NextJS、Gatsby、Astro。

本文以Hugo為例子。我們知道靜態網站生成器因為都是目錄與檔案組成,使用者常常需要打指令,或是直接編輯markdown檔案的方式來寫作,這對geek來說不是難事,但對使用過CMS界面(例如Wordpress)網站的用戶難免會覺得麻煩。

如果有一款GUI的工具,或者Front-end可以編輯Hugo網站就好了哪。

此時只要裝上Front Matter,你的靜態網站寫作就會輕鬆許多。Front Matter讓你的網站好像有了個Wordpress的後台管理界面一樣,搭配VSCode超強的文字編輯器功能,點幾個按鈕就能完成新增文章、預覽網站、部署網站等等操作。

Front Matter特色就是圖形化,它會嘗試讀取你現有網站的文章、圖片、標籤、分類,清楚的列在面板上;使用者能用所見即所得的markdown編輯器寫文章,以及用漂亮的界面批次管理分類、標籤。

Frotn Matter還會嘗試給一些SEO的建議,甚至讓你調用AI寫文章。

此外,Front Matter在VS Code伺服器版也能運作,所以你可以用這個管理遠端主機上的靜態網站!


吐槽一下:「Front Matter」,作者取這什麼爛名字,搜尋如果不特別標注的話都會找到Markdown的資料== 黑暗執行緒也為取名不利於SEO。

為了清楚指代,我比較喜歡把這套工具稱為vscode-front-matter

當我講Front Matter的時候指的是vscode-front-matter;若為小寫front matter指的是Markdown檔案附帶的front matter。

2. 個人使用Front Matter的理由
#

我自己想要使用CMS的原因是Hugo摸得夠久了,大致知道網站背後生成邏輯為何。

從2022年經營網站以來,我的寫文章作法都是開KDE Dolphin進入目錄,新增目錄,新增markdown(或者複製範本檔),然後開啟KDE Kate寫作,插入圖片還要手動複製圖片路徑,就這樣寫了700篇以上。需要批次操作的時候,就用Linux指令搜尋、刪改,把網站當硬碟檔案整理一般,再打指令部署。

現在我網站的文章太多難以管理,所以需要輕鬆一點的圖形化界面。起碼可以減少手動新增檔案的步驟,多專注在寫文章上面。

但這裡我必須告訴你一點:你得真的經營過Hugo網站好一陣子才適合用Front Matter來管理你的網站,因為沒人知道你的主題結構長怎樣,Front Matter雖然盡量做到開箱即用,但你仍必須按照自己的Hugo工作流,把它調整到適合你網站的樣子。

3. 安裝vscode-front-matter
#

  1. 安裝 VS Code

  2. 安裝 Hugo Git,建立Hugo網站根目錄

  3. 開啟VS Code,點選檔案 → 開啟資料夾,開啟Hugo網站的根目錄資料夾

  4. 到VS Code的延伸模組市集,下載安裝 vscode-front-matter

  5. 點選VS Code左方的FM面板,點選INITIALIZE PROJECT

  6. FRAMEWORK PRESETS框架選取hugo。REGISTER CONTENT FOLDERS就是文章目錄,請選取Hugo網站的根目錄資料夾下的content,例如我是content.zh-twcontent.en-us

  7. 點選IMPORT ALL TAGS AND CATEGORIES,匯入分類和標籤

4. 建立Front Matter設定檔
#

參考 官方文件

注意每個Hugo主題的設計不同,你要按照個人情況做調整。撰文當下我使用 Hugo Blowfish主題

在選取Hugo網站根目錄後,Front Matter會在該目錄建立.vscode.frontmatter目錄,還有frontmatter.json檔案。

我們將設定檔放到frontmatter.json,不要動VS Code的全域setting.json設定。這樣的話Front Matter的設定就只有開Hugo網站目錄的時候才生效。

開啟frontmatter.json,填入以下內容

設定網站本機預覽網址和實際預覽網址,還有hugo server的指令

"frontMatter.preview.host": "http://localhost:1313",
"frontMatter.site.baseURL": "https://ivonblog.com",
"frontMatter.framework.startCommand ": "hugo server"

我的文章都是以Page Bundle發表,在frontMatter.taxonomy.contentTypes設定新文章預設包含的fornt matter欄位如下。這也是日後在新增文章的時候會預先填好的欄位。

 "frontMatter.taxonomy.contentTypes": [
    {
      "name": "default",
      "previewPath": null,
      // 啟用Page Bundle
      "pageBundle": true,
      // 預設新文章目錄名,留空,目錄就會直接使用標題當名稱
      "filePrefix": "", 
      "fields": [
        {
          "title": "標題",
          "name": "title",
          "type": "string"
        },
        {
          "title": "發布日期",
          "name": "date",
          "type": "datetime",
          "default": "{{now}}",
          "isPublishDate": true
        },
        {
          "title": "是否為草稿",
          "name": "draft",
          "type": "draft"
        },
        {
          "title": "分類",
          "name": "categories",
          "type": "categories"
        },
        {
          "title": "標籤",
          "name": "tags",
          "type": "tags"
        },
        {
          "title": "預覽圖",
          "name": "preview",
          "type": "image"
        },
      ]
    }
  ]

上面已經定義好新文章的欄位,所以我不需要使用templates功能(且使用範本反而會讓我無法新增文章)

指定文章front matter採用YAML格式

"frontMatter.taxonomy.frontMatterType": "YAML"

指定時間格式

  "frontMatter.taxonomy.dateFormat": "yyyy-MM-dd'T'HH:mm:ssxxx"

content.zh-tw下面還有不同的section,使用frontMatter.content.pageFolders個別指定其路徑

"frontMatter.content.pageFolders": [
    {
      "title": "posts",
      "path": "[[workspace]]/content.zh-tw/posts"
    },
    {
      "title": "artworks",
      "path": "[[workspace]]/content.zh-tw/artworks"
    }
  ]

5. 將Shortcode轉成Snippet
#

貼Youtube連結為了避免跑版都有用shortcode處理CSS,但是這個程式碼有點冗長。

Front Matter可以讓你把Shortcode變成圖形選單,這樣日後就可以用圖形化方式插入shortcode程式碼。

例如我有一個shorcode位於Hugo網站根目錄/layouts/shortcodes/embedded-youtube.html

文章內插入的語法是(這裡前後要再補一個大括號)

{< embedded-youtube "網址"> }

於是就在frontmatter.json新增以下段落

// Shortcode程式碼
  "frontMatter.content.snippets": {
	// embedded-youtube按鈕
    "embedded-youtube": {
      "description": "插入Youtube影片",
      "body": [
        "{< embedded-youtube [[videourl]] >}"
      ],
      "fields": [
        {
          "name": "videourl",
          "title": "影片網址",
          "type": "string",
          "default": ""
        }
      ]
    }
  },
  // 關閉Snippet的註解
  "frontMatter.snippets.wrapper.enabled": false

這樣Dashboard的Snippets頁面就會出現embedded-youtube按鈕,點選填入網址就會插入Shortcode到文章內。

6. 一切就緒後的發文操作流程
#

  1. 開啟VSCode,開啟Hugo根目錄資料夾

  2. 切換到Front Matter頁面,點選Create Content,選取要使用的section,輸入檔名

  3. 這樣Page Bundle目錄和新文章index.md就自動建好了。

  4. 插入圖片點一下右上角的按鈕,Front Matter會自動定位到Page Bundle所在的目錄,讓我直接選取圖片素材插入

  5. 嫌編輯器界面不夠優雅的,點選左下角的Enable writing settings會讓行距暫時變好看一點。

  6. Front Matter列表的縮圖要手動指定才會顯示。仿造Blowfish主題的習慣,將Page Bundle目錄下與index.md在同一階層的feature.webp設定為文章縮圖。

  7. 在Dashbaord點選Start Server啟動Hugo伺服器,開啟瀏覽器預覽。

  8. 關於部署網站的部份,因為我有準備一個指令稿做Git推送動作,所以我沒有啟用Front Matter的Git整合功能。

相關文章

Hugo + Github + Netlify免費架設靜態網站教學
資訊科技 Hugo網站架設 Hugo Github Netlify
調整Hugo的permalinks,讓不同目錄下的頁面產生同一個網址
資訊科技 Hugo網站架設 Hugo
為什麼我要用Disqus取代Giscus當作Hugo留言板
資訊科技 Hugo網站架設 Hugo Github

留言板

此處提供二種留言板。點選按鈕,選擇您覺得方便的留言板。要討論程式碼請用Giscus,匿名討論請用Disqus。

這是Giscus留言板,需要Github帳號才能留言。支援markdown語法,若要上傳圖片請貼Imgur連結。您的留言會在Github Discussions向所有人公開。

這是Disqus留言板,您可能會看到Disqus強制投放的廣告。有時留言可能會被系統判定需審核,導致延遲顯示,請見諒。