# 自定義頁面
這是 Hexo 級別的問題，可參考
要改樣版可參考：Hexo 入门指南（四） - 页面、导航、边栏、底栏
# 圖片換不了
預設的新浪圖床壞掉了，所以得抽換為自己的圖庫
如果你按照作者說法，在 source/_data 新增了 images.yml，上面寫了六張圖片... 但網站運行還是破圖！！根據我爬文作者文章下方的留言問答，是作者筆誤，要放 7 張圖才能覆蓋喔 XDrz
另外如果有外連圖床，就可以不用寫 images.yml，直接在_config.shoka.yml 加入：
image_server: "https://source.unsplash.com/1600x900/?snow" |
可以用 Unsplash 的 API，懶得申請帳號也能用 public 的 API，Ithome 上有不少相關文章，可以去查詢看看
# 抽換圖片
透過 yml 抽換 Avatar 頭圖，作者說得蠻詳細，在此跳過
在 source/_data 下新增目錄 images，把跟原作者主題儲藏庫下方 source/images 同名同副檔名的圖片加入到這個新建的目錄，它就會蓋掉預設，以下是我改過的部分
| 檔名 | 功能 |
|---|---|
| search.png | 搜尋頁面右下角的插圖 |
| favicon.ico | 網站小圖示 |
大小盡量不要跟原始素材差太多，不然可能會顯示異常
# 抽換瀏覽器分頁轉換時的標題字樣
source/_data/ 新增一個 languages.yml，以你 Hexo config.yml 設置的語系（Shoka 有提供的語系）出發去覆蓋
zh-TW: | |
favicon: | |
show: 開心你來到我的網站(つ´ω`)つ | |
hide: 快看看我🥺 |
# 改按鈕顏色
到原作者主題下方的 source/css/_color.styl 參考既有寫法，回到你自己 hexo 的 source/_data，新增 color.styl，把想改的樣式區段複製下來
要注意的是 styl 的註解跟 CSS 一樣是 // ，我就曾誤寫成 # 網站渲染壞掉 XDrz|||
# Static CMS 後台 Field 設置
這原始後台 Netlify CMS (其實是 Decap CMS) 跟這個抽換的 Static CMS 後台設置的 yml 很相似（似乎因為 Static CMS 是基於前者 Decap CMS 的前身 Netlify CMS 這幾個專案祖譜有點複雜）
首先我們要知道一般 Hexo Post 的 Front-matter 有哪些欄位，可以參考這篇文章
另外 Shoka 主題提供了 sticky: true 來置頂文章，但這邊有個坑 —
這樣寫會網站壞掉：
--- | |
sticky: false | |
title: TEST | |
date: 2023-08-01T12:31:19.281+08:00 | |
updated: 2023-08-01T12:31:20.646+08:00 | |
tag: | |
- thisSite | |
categories: | |
- thisSite | |
cover: https://i.imgur.com/8ZlAuRL.png | |
--- |
這樣寫不會壞掉：
--- | |
title: TEST | |
date: 2023-08-01T12:31:19.281+08:00 | |
updated: 2023-08-01T12:31:20.646+08:00 | |
tag: | |
- thisSite | |
categories: | |
- thisSite | |
cover: https://i.imgur.com/8ZlAuRL.png | |
--- |
交叉試了很久，直接說結論
- 全站不能只有一篇文章時還設置頂
- 置頂不能填 false
所以我不建議在後台加入 Sticky 的 Boolean Filed
接著我們要了解 Hexo 分類跟標籤的特性 — 可以帶 yml list，但同樣寫法意義不同
tag: | |
- a | |
- b # 這篇文章有 a 跟 b 的標籤 | |
# 在 CMS 的寫法：a, b | |
#------------- 我是分隔線 ----------------# | |
categories: | |
- a | |
- b # 這篇文章在 a 下面的 b 子分類 | |
# 等校於 | |
categories: | |
- [a,b] # 這篇文章在 a 下面的 b 子分類 | |
# 在 CMS 的寫法：a, b | |
# 一個文章屬於兩個分類的寫法 | |
categories: | |
- [a] | |
- [b] | |
# 在 CMS 的寫法：[a], [b] | |
# 這邊有個坑，Static CMS list filed 是以逗號區隔，所以當你希望文章有 [a,b] 又有 [c] 兩種分類時，如果寫 [a, b], [c] 會產生不符合預期的格式，目前考慮文章應該暫時不會有這麼複雜的分類結構，我沒有花時間下去繼續研究，突然想到，不知道寫成 a, b, [c] 會是什麼效果🤔... 但暫時不想花太多時間在這裡了 |
以上結論參考文章：1 2 3
接下來就能設計你的 Filed 了，可以參考這個範例，輸入時標籤跟分類時要記住上方代碼塊提及的特性
其他 Static CMS 的 Filed 可以看官方文件說明，歷史遺跡：Netlify CMS 的 Filed
還可以修改文章生成的目錄 1，我的網站目前沒有改生成目錄是因為我覺得分類跟標籤都是可變的..
# 結語
應該大部分基本設置跟簡易美化到這邊都結束了，但這個主題的 markdown 渲染器還有很多奧義，可以參考以下幾篇文章：
- 官方指南
- 網友的測試
還有些置頂文章的配置（其實官方也有寫到）
想要 fork 下來暴改的，像是換掉 loading 貓條，可以參考這個站
