HEXO搭配主題next基礎配置教學
前言
本來的初衷是要記錄筆記。尤其程式筆記，程式碼縮排及高亮的硬需求，幾乎直接綁死markdown，不然光是基本的版面整理，就可以耗上不少時間
雖然剛開始需要花一點點的心力學習，真的也只需要一點點
熟悉後，可以更專注在文章產生，不必煩惱版面！
文章完成的同時，也差不多完成結構了，不論是要輸出pdf或是單純的部落格文章，輸出的結果都相當漂亮！
筆記最重要的環節，再需要查閱時，可以快速定位到相關片段
next版型直接將markdown的TOC(即旁邊的文章目錄)精巧的定位在旁邊，也不必再耗費心力去點開，隨著閱讀的進度，自動展開相關標題，加上精緻又簡單的風格，深得我心！
不論是hexo或next，整個blog的架構都模組化的相當好，都只需要修改_config.yml就可以達到大部份的需求
個人不太建議做太過深度的客制化，盡量只改到_config.yml就好。畢竟之後的版更也是得自己動手來，要是客製化的太多，往後的版更越是痛苦
若是有要修改版型或css，應避免直接修改文件，盡量將修改內容寫在_custom或custom.styl裡，減少版更時的痛苦
其實next官方提供的文件及英文命名，大至上就足夠完善自己的需求了
以下提供自己的修改的內容供參考
next主題的_config.yml
比較簡單且大家應該都會做的，比如網站icon、留言串disqus、Google analyze之類的，我就不特別再說明了
著重在一般比較容易忽略或需要比較多修改的地方
取消底下的由 Hexo 強力驅動 v3.7.1 | 主題 — NexT
搜尋powered:、theme:，設置成false
安裝sitemap、baidusitemap
雖然台灣不用百度
但同為中文母語，而我們的目的也是技術交流，讓自己的blog能被各搜尋引擎找到，也不是什麼壞事
- terminal
cd回到blog根目錄 npm i hexo-generator-baidu-sitemap --save- 在主題的
_config.yml任意處加上# added by myself baidusitemap: path: baidusitemap.xml npm i hexo-generator-sitemap --save
只有百度需要另外添加至_config.yml
要讓Google爬到blog，只要有安裝hexo-generator-sitemap，就會自動啟用了！
新增tags、categories、archives 頁面
- terminal cd至blog根目錄
hexo new page tagshexo new page categorieshexo new page archives- 到
source下新出現的這3個目錄，裡面的index.md各自加上type: "tags"(categories、archives同理)
主題會自動渲染成相關頁面
顯示閱讀到目前文章的進度%數
搜尋scrollpercent:，設成true
針對Pisces、Gemini主題，將回到頁首放在側欄
沒設定的話預設在右下角
搜尋b2t，設成true
自動新增繼續閱讀
官方是建議手動指定要切開的地方
在文章中加上<!-- more -->，就會在該處斷開，以下文章自動閱讀
若不想要加的話
則搜尋 auto_excerpt:，設成true
可以在length設定預設斷開的長度
程式碼區塊圓角
搜尋codeblock:，border_radius:設10以上
10以下不太明顯
若要出現複製按鈕的話，再將copy_button: true
程式碼高亮主題
highlight_theme:，註解中有列出可設定的主題了
我是使用night eighties
關閉歸檔的嗯..! 目前共有 x 篇文章。 繼續努力。
cheers_enabled: false
文章增加閱讀次數
有提供三個方法，我採用leanCloud
因為他可以做到比較細緻的設定
像是localhost不計數，而且設定也比較簡單
請參考LEAFERxLAB/Leancloud访客统计插件重大安全漏洞修复指南
這篇有完整的安裝 + 設定教學
我一開始也被那security變數跟這說明嚇到，想說是不是問題很多
但仔細看過後就會知道也只是你的閱讀次數被修改= =
主要原因也是權限關係
NEXT於6.0.5後也內置解決方法了
再補上npm i hexo-leancloud-counter-security --save套件就行，不必修改其他頁面
他設定的_config.yml，還要再hexo根目錄的_config.yml新增一些東西(即該篇連結的4.进一步设置权限（可选，建议设置）)
我就是沒注意到要新增，然後hexo s時會出現can't read enable_sync of undefined，傻傻的浪費1小時多再找原因= =
修改note 標籤
若希望note標籤跟我上面的一樣的話
在note:，style: 設定成flat
網頁讀取時，上面會有一條加載條(跟youtube一樣)
搜尋pace:，設成true，預設的主題就是了
有興趣的話可以每個都改來試試看，挑喜歡的
部份css修改(themes/next/source/css/_variables/custom.styl)
我有小小調整了一些css樣式
若想要更細部的修改，可以看目錄底下的其他styl檔，依自己需求客製化
將要修改的變數名複製到custom.styl，給予要調整的值
啟動渲染時，就會覆蓋掉預設的
以下內容全部都放在同一份custom.styl裡
滑鼠移到超連結時變淺藍色
$link-hover-color = $#0593d3文章字體放大
$font-size-base = 16px修改單行程式碼的顏色
就是只用一個`包起來的小片段
$code-background = #eee
$code-foreground = #dd0055增加AdSense
為侵入式修改，且較為複雜，故獨立一篇出來
詳請參閱[hexo NexT主題增加AdSense](/hexo NexT主題增加AdSense)
後記
雖然都只是改參數，不用寫什麼程式碼
這樣改改玩玩，不知不覺也耗掉一整天了
不過看到自己的blog漸漸成型，也是滿有成就感的
都弄好後，接下來，就是部署嘍！
請繼續參閱後文！
系列文章
參考資料
不論有沒有想要深度優化，這篇都建議看一下，可以了解yml front formatter及next提供的文本語法，尤其是自帶的notes、label、tabs標籤，讓文章更加豐富！
打造个性超赞博客Hexo+NexT+GithubPages的超深度优化