iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
1
Modern Web

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

偏冷門卻有趣的 VuePress

冷門卻有趣的 VuePress

靜態網站生成器的選擇非常的多,比較常聽到用來產生部落格網站的可能有 Hexo 、 Gatsby.js ,其實也都是很棒的靜態網站生成器,相關的教學資源也很多,但在一一嘗試過後我個人偏好使用 VuePress。

下面就來分享一下我覺得 VuePress 比較有趣的地方吧!

VuePress 也是 SPA 框架

SPA 是 Single Page Application 的縮寫,是一種現在很流行的網頁技術,能夠讓網站在做頁面切換的時候,幾乎不會出現延遲與白畫面,可以提供很棒的使用者體驗。

但 SPA 什麼都好,就是有一個很麻煩的缺點......使用 SPA 技術的網站,很容易讓各大搜尋引擎或社群媒體的爬蟲爬不到網站內容,也難以分辨不同頁面間的差異,這對作為行銷或展示曝光用的網站來說可是致命傷啊!

VuePress 則會為每個頁面預渲染生成靜態的 HTML,而在每個頁面被加載的時候又搭配 SPA 的架構模式來運行,因此既有 SPA 的使用者體驗,卻沒有 SPA 最困擾的 SEO 爬蟲問題。


約定大於配置

「約定大於配置」(convention over configuration),是一種軟體開發的設計模式,目的是在減少開發人員需要做的決定,既有簡單的好處,而又不失靈活性。

簡單來說就是:如果沒有特殊的需求,只要稍微了解一下專案的結構就可以開始專注於內容主題的創作。

而且 VuePress 是使用 Vue 對「主題」進行開發,如果是曾經使用過 Vue 的朋友在接觸 VuePress 之後會發現,在「約定大於配置」的這個概念之下,幾乎沒有學習成本。

缺點是目前沒有 CLI(Command-Line Interface),因此若想快速啟動只能選擇 Clone 其他開發者的範本


使用 Markdown 檔來書寫與管理內容

使用 Markdown 格式的 .md 檔來書寫與管理內容都相當的方便,也有許多靜態網站生成器使用 .md 文件來進行內容的撰寫與管理,透過編譯來將 .md 檔編譯成為 HTML 文件。

但 VuePress 其中一個特色就在這邊了, VuePress 會在將 .md 編譯成 HTML 文件之前,先編譯成為 Vue 組件,再經由 Vue Loader 編譯成為 HTML 文件。

正因為多了這一道手續,讓我們可以在 Markdown 中使用預先編寫好的 Vue 前端組件,讓頁面的建構不只是純粹的圖文,完全可以依照需求設計出互動性更高的頁面。


主題使用及開發

而 VuePress 預設的主題,其實是偏向作為文件網站使用的,畢竟 VuePress 一開始開發的動機,就是為了方便 Vue 生態系各項工具的文件網站建立。

但這不代表只能使用那一成不變的風格,我們在使用上不僅可以透過 npm 來安裝喜歡的主題,也可以自行開發主題來使用。

簡介的部分告一個段落了,接下來的章節就開始進入專案架構的說明囉!


上一篇
Markdown 到底在紅什麼?
下一篇
開始一個 VuePress 專案吧!
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言