Step 3. 給 hexo 套一層酷酷的外皮(shokax)

# 說明

預設的 hexo 皮是非常醜的，因此我們可以再原有的基礎上加入 theme, 就能使它變得非常好看。
我所使用的 theme 是 hexo-theme-shokaX
但由於 shokaX 的說明資料非常凌亂，因此這邊會大致統整一下

# 安裝

hexo 是可以安裝 theme, 簡單來說就是給他套一層皮。這個皮膚是由四個中國人寫的。然後她的安裝方式跟其他的 theme 可能不太一樣，並不是直接拉到 hexo 的 theme 資料夾就好。我覺得安裝可能不太會有問題，這邊就不細說了。

$ npm i shokax-cli --location=global # 初始化 init 環境

$ SXC install shokaX

安裝完成之後應該就可以看到 網頁的風格 有改變了。
安裝 shokax 的方法跟一般的安裝方式有點不同，不能將 github 的專案直接放進去 ./themes/ 的資料夾
他必須用自己的 SXC 安裝套件安裝。

# 設定檔案

大部分關於 shokax 的設定檔案都是存在 <hexo>\node_modules\hexo-theme-shokax\_config.yml , 所以設定檔案有兩份，這邊說一下你可能想知道的設定部分。

其實他的註解都寫得滿清楚了，由這邊可以看到。

experiments:

  ...

  fixedCover: "" #這一項修改主頁面背景圖片

  ...

hexo new page "about" #生成 關於網站

hexo new page "admiration" #生成 關於作者

# _posts

在資料夾底下 ./source/ 有一個_posts, 這個是專門放置發文的 markdown 檔案，你可以在這邊編寫完成檔案後，會經由 markdown 的編譯器，並發佈到伺服器上。

網站範例 example-for-hexo

這邊交幾個基礎的語法

#!./source/*.md

---

tag: //文章的 Tag

cover: //文章的背景圖片

title: 早安//標題

date: 2023-04-08//文章的日期

---

如果在文章裡面要欠入圖片的話，可以在與頁面相同的目錄下開一個名稱相同的資料夾，裡面才存放圖片就可以了。

!# test.md

![](photo.jpg)

...
|--test.md
|--test
   |--photo.jpg
...

# _data

這個我還不知道是什麼，之後在補。

# Reference

PS: 更多的參考資料可以學習 Next 的設定方式，裡面有很多都是類似的。