iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
1
Modern Web

透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 系列 第 11

VuePress 模板與主題使用

VuePress 模板與主題使用

其實以我目前使用 VuePress 的感想,其中一個比較不友善的地方就是 VuePress 沒有提供一個專案的 CLI 鷹架作為啟動使用,不過這也確實跟 VuePress 初衷之一的「最小配置」準則有關就是了。

不過沒有關係,沒有官方的 CLI 但也有許多人分享了模板供大家使用,我這邊就以 Ahmad Mostafa (GitHub:z3by)所開發的 VuePress 模板與主題來做個簡單的說明吧。


下載模板檔案

你可以到 z3by/vuepress-blog-template 將模板專案下載到你的電腦,下載的選項在點擊 Code 按鈕後就可以看到了。

如果你的電腦已經有安裝 Git 的話,可以使用 git clone 來把專案複製下來,現在沒有安裝的話也沒關係,後面的章節也對對 Git 與 GitHub 做個簡介。

現在就先用 Download ZIP 來把檔案下載下來吧。


打開專案資料安裝所需套件

下載下來的模板中,其實並沒有將運作所需的套件一併下載,所以我們要先打開終端機 Terminal 輸入 yarn 來將專案所需的套件進行下載與安裝。

當套件的安裝流程跑完之後,在終端機中輸入 yarn dev 就可以啟動開發伺服器了,當編譯跑完出現像這樣的畫面時:

打開瀏覽器就可以看到像這樣完整呈現的網站囉!是不是超簡單的啊!


模板中已設定了主題

為什麼透過模板打開的畫面,跟我們前面的感覺差那麼多呢?

因為這個模板預設已經設定了使用該作者開發的主題: vuepress-theme-modern-blog 囉,我們可以先來看看專案中的 package.json

"devDependencies": {
  "vuepress": "^1.2.0",
  "vuepress-plugin-crisp": "^1.0.0",
  "vuepress-theme-modern-blog": "^2.4.1"
}

可以看到依賴套件中,有一個 vuepress-theme-modern-blog 對吧,這就代表我們在上面使用 yarn 下載套件時,已經一併把主題套件給下載下來了。

再來我們看看 .vuepress/config.js 也可以看到這一行:

module.exports = {
  theme: "modern-blog",
}

這就是透過設定,來告訴 VuePress 使用 vuepress-theme-modern-blog 這個主題喔。

如果主題名以 vuepress-theme- 開頭,在 .vuepress/config.js 設定中可以省略這個前綴。


主題文件

但這個網站,還不能稱之為你的對吧?

畢竟標題、內容等等都還是一副模板的樣子,這時候其實就可以開始在 .vuepress/config.js 中來進行各項的設定,主題的設定文件可以在這邊看到: vuepress-theme-modern-blog 主題文件

而文章的撰寫只要寫在 _posts 裡面,就可以被編譯成文章網頁囉,作者也提供了範本可以讓你參考,先來玩玩看吧!


上一篇
Front Matter : Markdown 的細節設定
下一篇
Git 與 GitHub 傻傻分不清楚
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30

尚未有邦友留言

立即登入留言