HEXO搭配主題next基礎配置教學

前言

本來的初衷是要記錄筆記。尤其程式筆記,程式碼縮排及高亮的硬需求,幾乎直接綁死markdown,不然光是基本的版面整理,就可以耗上不少時間
雖然剛開始需要花一點點的心力學習,真的也只需要一點點
熟悉後,可以更專注在文章產生,不必煩惱版面!
文章完成的同時,也差不多完成結構了,不論是要輸出pdf或是單純的部落格文章,輸出的結果都相當漂亮!

筆記最重要的環節,再需要查閱時,可以快速定位到相關片段
next版型直接將markdown的TOC(即旁邊的文章目錄)精巧的定位在旁邊,也不必再耗費心力去點開,隨著閱讀的進度,自動展開相關標題,加上精緻又簡單的風格,深得我心!

不論是hexo或next,整個blog的架構都模組化的相當好,都只需要修改_config.yml就可以達到大部份的需求

個人不太建議做太過深度的客制化,盡量只改到_config.yml就好。畢竟之後的版更也是得自己動手來,要是客製化的太多,往後的版更越是痛苦

若是有要修改版型或css,應避免直接修改文件,盡量將修改內容寫在_customcustom.styl裡,減少版更時的痛苦

其實next官方提供的文件及英文命名,大至上就足夠完善自己的需求了

next主題配置
next第三方服務

以下提供自己的修改的內容供參考

next主題的_config.yml

比較簡單且大家應該都會做的,比如網站icon、留言串disqus、Google analyze之類的,我就不特別再說明了
著重在一般比較容易忽略或需要比較多修改的地方

取消底下的由 Hexo 強力驅動 v3.7.1 | 主題 — NexT

搜尋powered:theme:,設置成false

安裝sitemapbaidusitemap

雖然台灣不用百度
但同為中文母語,而我們的目的也是技術交流,讓自己的blog能被各搜尋引擎找到,也不是什麼壞事

  1. terminal cd回到blog根目錄
  2. npm i hexo-generator-baidu-sitemap --save
  3. 在主題的_config.yml任意處加上
    1
    2
    3
    # added by myself
    baidusitemap:
    path: baidusitemap.xml
  4. npm i hexo-generator-sitemap --save

只有百度需要另外添加至_config.yml
要讓Google爬到blog,只要有安裝hexo-generator-sitemap,就會自動啟用了!

新增tags、categories、archives 頁面

  1. terminal cd至blog根目錄
  2. hexo new page tags
  3. hexo new page categories
  4. hexo new page archives
  5. 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

滑鼠移到超連結時變淺藍色

1
$link-hover-color = $#0593d3

文章字體放大

1
$font-size-base = 16px

修改單行程式碼的顏色

就是只用一個`包起來的小片段

1
2
$code-background  = #eee
$code-foreground = #dd0055

增加AdSense

為侵入式修改,且較為複雜,故獨立一篇出來

詳請參閱[hexo NexT主題增加AdSense](/hexo NexT主題增加AdSense)

後記

雖然都只是改參數,不用寫什麼程式碼
這樣改改玩玩,不知不覺也耗掉一整天了
不過看到自己的blog漸漸成型,也是滿有成就感的
都弄好後,接下來,就是部署嘍!

請繼續參閱後文!

系列文章

HEXO系列文章

參考資料

不論有沒有想要深度優化,這篇都建議看一下,可以了解yml front formatter及next提供的文本語法,尤其是自帶的notes、label、tabs標籤,讓文章更加豐富!
打造个性超赞博客Hexo+NexT+GithubPages的超深度优化

Hexo 3.1.1 静态博客搭建指南