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

後記

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

請繼續參閱後文!

建議閱讀順序

  1. 為什麼我推薦hexo部署到Gitlab
  2. HEXO基礎配置教學
  3. Git基礎設定
  4. 部署HEXO到GitLab Page
  5. Gitlab使用自訂域名搭配Cloud Flare免費升級成https
  6. hexo NexT主題增加AdSense
  7. 在Hexo NexT增加like Button
  8. hexo NexT主題版更心得

參考資料

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

Hexo 3.1.1 静态博客搭建指南