(18) 試著學 Hexo - NexT 主題篇 - 認識 NexT 結構

前言

接下來這一篇我們就讓我們來認識一下 NexT 的結構。

NexT 目錄結構

  • docs
  • languages
  • layout
  • scripts
  • source
  • _config.yml
  • gulpfile.js

其他沒列出來的部分是可以不用去太過在意的檔案,基本上也不太會去動到那些檔案,例如:.eslintrc.json.travis.yml 以及 .editorconfig 等等,這些檔案都是開發一個主題時才會需要特別調整或處理的。

看到這邊你可能會想說:「難道用 NexT 主題還要改它的東西?!前面學那麼多難道還不夠嗎?!」

真沒良心!

除非你有打算做一些客製化,否則基本上你是可以不用改任何東西的,最多只會針對 themes/_config.yml 調整。

但是呢… 為了充鐵人賽篇數 為了可能某些人會想要客製化模板,所以才會建議稍微認識一下它的結構。

docs

基本上 docs 資料夾顧名思義就是放一些說明文件的地方,目前主要是三個語系,分別是英語、簡體中文以及俄語。

languages

languages 資料夾底下包含了各國語言的語系包,約 22 個語系。

layout

NexT 本身模板是採用 swig 模板引擎,基本上如果你寫過 ejs 應該會格外覺得親切,因為非常相似,其中如果你是使用 VSCode 開發的話,你也可以安裝 swig 套件幫助辨識該檔案

https://marketplace.visualstudio.com/items?itemName=zhutian.swig

而該資料夾底下又細分

  • _macro
  • _partials
  • _scripts
  • _third-party

在這邊會比較需要注意的是 _partials 資料夾,如果你想增加一些功能的話,大多都是針對該資料夾底下的 swig 修改。

scripts & source

這兩個資料夾基本上就是放置 CSS 與 JavaScript 的地方,當然也包含第三方插件等,其中 NexT 所採用的 CSS 預處理器是 stylus。

這邊你也可以安裝 language-stylus 來高亮並辨識檔案

https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus

如果你具有 Sass or SCSS 基礎,基本上你會看到很熟悉的樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.header-inner {
background: var(--content-bg-color);
border-radius: $border-radius-inner;
box-shadow: $box-shadow-inner;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
width: $sidebar-desktop;

+desktop-large() {
width: $sidebar-desktop;
}

+tablet-mobile() {
border-radius: initial;
position: relative;
width: auto;
}
}

gulpfile.js

這一支其實我從來都沒開啟來看過,因為在使用 NexT 的時候,並不會使用到該檔案,這隻檔案我快速簡單看過去主要是用於測試用,因此不用去理會它沒關係。

但是如果你好奇的話,你可以輸入 cd themes/next 接下來安裝套件 npm install 並在終端機輸入 npm run test 就可以運作了,但是在這邊應該會噴一些錯誤,主要是第三方套件的一些錯誤,所以在此可以忽略 gulpfile.js。

附帶一提,如果你真的有進入到這個目錄底下輸入 npm install,那麼請記得將 node_modules 刪除唷~