iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 22
0
Modern Web

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

VuePress theme 主題結構

VuePress theme 主題結構

上一篇說明了 Layout 的概念其實就已經可以達成一定程度的客製化了,但人都是貪婪的,光靠簡單的 Layout 切換我想很難滿足實際上的需求對吧?

而且如果網站複雜度提高之後,也免不了要將畫面中的元件進行切割劃分,切割成 component 的形式,今天就來討論主題中「約定」好的目錄結構吧。

theme
├── global-components
│   └── xxx.vue
├── components
│   └── xxx.vue
├── layouts
│   ├── Layout.vue (必要)
│   └── NotFound.vue
├── styles
│   ├── index.styl
│   └── palette.styl
├── templates
│   ├── dev.html
│   └── ssr.html
├── index.js
├── enhanceApp.js
└── package.json

目錄結構的範例,其中只有 layout/Layout.vue 是必要的,其他都是可選。


目錄結構

  • theme/global-components

    存放在這個目錄下的所有 .vue 組件都會變成全域組件喔,最主要的應用情境是可以將一些重複性非常高,像是 vInput.vue 等的組件放在這邊,這樣在其他組件中需要使用時就可以直接在 <template /> 中使用,不需要額外的引入,也可以在 .md 中直接進行使用喔!

    延伸閱讀: @vuepress/plugin-register-components

  • theme/components

    用以儲存主題中各種 .vue 組件的目錄,不過就不像 theme/global-components 有特殊的註冊處理了,需要使用時要各別 import

  • theme/layouts

    Layout 版型的組件目錄,前面已經有介紹過了,要注意 Layout.vue 是主題的必要組件。

  • theme/styles

    有約定兩個檔案,分別是 index.stylpalette.styl ,都是使用 Stylus 的格式來進行撰寫,不過不用擔心, Stylus 的樣式文件也是可以直接寫一般的 CSS 。

    1. index.styl :可以將全域套用的 CSS 寫在這邊。

    2. palette.styl :透過這個檔案來進行 CSS 變數的定義, VuePress 也有約定相關的變數名稱與預設值,如下:

      // 顏色
      $accentColor = #3eaf7c
      $textColor = #2c3e50
      $borderColor = #eaecef
      $codeBgColor = #282c34
      $arrowBgColor = #ccc
      $badgeTipColor = #42b983
      $badgeWarningColor = darken(#ffe564, 35%)
      $badgeErrorColor = #DA5961
      
      // 佈局
      $navbarHeight = 3.6rem
      $sidebarWidth = 20rem
      $contentWidth = 740px
      $homePageWidth = 960px
      
      // 響應式變化點
      $MQNarrow = 959px
      $MQMobile = 719px
      $MQMobileNarrow = 419px
      
  • templates:存儲 HTML 模板的文件,沒有必要的話不用改動。

    • dev.html:可以複寫開發環境的 HTML 模板文件。
    • ssr.html:可以複寫最終編譯結果的 HTML 模板文件。

theme/index.jstheme/enhanceApp.js

不知道你有沒有注意到,上面的說明中並沒有提到這 theme/index.jstheme/enhanceApp.js 呢?

其實是這兩個檔案的觀念比較進階一些,就留待下一篇再來說明囉!


使用 npm 主題須確認是否有 theme/index.js

最後要注意一下,如果使用 npm 下載主題,又或者你將自己設置的主題發佈到 npm 來進行使用的話,就要確認這個主題中是否有 theme/index.js 這個主題配置檔喔,如果沒有的話就要記得在 package.json 中設置 "main": "layouts/Layout.vue",這個屬性,這樣 VuePress 才有辦法正確的編譯主題。

// package.json 範例
{
	"name": "demo-blog",
    "version": "1.0.0",
	"main": "layouts/Layout.vue",
}

上一篇
Layout : VuePress theme 主題的基礎
下一篇
VuePress : `theme/index.js` 主題配置文件
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30

尚未有邦友留言

立即登入留言