iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 6
1
Modern Web

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

從了解 VuePress 的專案結構開始吧

從了解 VuePress 的專案結構開始吧

首先呢,就先來說明一下「約定」的目錄結構吧!

我們先來回顧一下昨天建立的檔案結構:

.
├── README.md
│ 
├── news
│   ├── README.md
│   └── test.md
│ 
├── yarn.lock
│ 
└── package.json

這時候結構還非常的單純,如果只是要架一個簡單的文件網站,其實這樣就已經足夠囉!

但想必我們的需求不止如此對吧,那麼如果想要調整頁面的樣式或是加入客製化的功能,該怎麼做呢?


在專案中建立 .vuepress 進階設定資料夾

只要在專案中建立如下的資料夾結構,就可以透過各項設定讓 VuePress 網站符合你的需求囉!

.
├── .vuepress (可選的)
│   ├── components (可選的)
│   ├── theme (可選的)
│   │   └── Layout.vue
│   ├── public (可選的)
│   ├── styles (可選的)
│   │   ├── index.styl
│   │   └── palette.styl
│   ├── templates (可選的, 謹慎配置)
│   │   ├── dev.html
│   │   └── ssr.html
│   ├── config.js (可選的)
│   └── enhanceApp.js (可選的)
│ 
├── README.md
│ 
├── news
│   ├── README.md
│   └── test.md
│ 
├── config.js
│ 
├── yarn.lock
│ 
└── package.json

要注意一下命名喔,名稱要完全正確都是小寫才能「符合約定」

你有注意到嗎?其實包含 .vuepress 本身在內,內層的所有資料夾也都是「選用」的喔,沒有哪個檔案或目錄是必要的。

基本上就是一個「複寫」的概念,如果有需要特別設定的部分,再新增檔案來複寫就可以了,沒有的話就會按照預設值來跑,所以也不會造成錯誤。


.vuepress 結構說明

簡單說就是所有想要設定想要客製化的內容全部都在 .vuepress 這個資料夾處理。

這邊呢,就針對資料夾內約定可以設置的檔案與目錄來說明吧:

  • components:該目錄中的 Vue 組件將會被自動註冊為全域組件,可以在不用 import 的情況下隨意調用,在 .md 中也能使用。
  • theme:想自行開發主題的話,這裡就是主題的專案資料夾。
  • styles:用來存放樣式相關的文件,其實最主要是下面列出的兩個 .styl 檔,是使用 Stylus 撰寫的,這也是一種 CSS 的預處理器。
    • index.styl:將會被自動引入的全域樣式,會添加在 CSS 樣式文件的結尾,所以會比預設的 CSS 樣式有更高的權重。
    • palette.styl:用來複寫預設的顏色變數,也可以用來設置新的 Stylus 顏色變數。
  • public:存放靜態資源的資料夾,裡面的檔案不會經過 Webpack 處理。
  • templates:存儲 HTML 模板的文件,沒有必要的話不用改動,想增加 meta 設定可以透過 config.js。
    • dev.html:可以複寫開發環境的 HTML 模板文件。
    • ssr.html:可以複寫最終編譯結果的 HTML 模板文件。
  • config.js:專案的設定文件,網站的標題、簡介、主題設置等等都會透過這個檔案進行設定。
  • enhanceApp.js:有需要安裝注入 Vue 的外掛或路由等邏輯時可以寫在這個檔案,官方網站上有範例。

客製化的關鍵:主題

看到這邊有沒有覺得頭昏眼花呢?希望我的說明能夠讓你對於 VuePress 的專案結構有個基本的了解。

明天,就來探討一下「主題」 theme 這個我認為整個 VuePress 最核心的項目啦!


上一篇
開始一個 VuePress 專案吧!
下一篇
VuePress最基礎的客製化:config.js
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30

尚未有邦友留言

立即登入留言