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

發表於 2020-10-01 分類於 Hexo

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

接下來這一篇我們就讓我們來認識一下 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 基礎，基本上你會看到很熟悉的樣式

.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 刪除唷~