NexT 實用的設定與功能

前言

這邊紀錄一下我的 NexT 修改了那些地方及一些不錯的插件安裝。

這一篇會滿多美化&加強 NexT 的一些功能(包含一些細節調整)。

※接下來大多設置都在 theme/NexT/_config.yml 中,如果有跳到主系統的 config 會再額外提醒。

本文撰寫環境

Hexo 版本

  • hexo: 3.8.0
  • hexo-cli: 2.0.0

NexT 版本

  • NexT: 7.1.0

版權宣告

就是設置 footer 底部這區塊。

設置位子約 65 行,查詢 copyright即可看到,若不輸入預設則會顯示網站作者名稱。

附帶一個,如果不想要出現這一段 “由 Hexo 強力驅動 v3.8.0
| 主題 – NexT.Pisces v7.1.0”,只需要將 67 行 及 73 行的 enable 修改為 false 即可。

小補充,可以幫版權宣告旁的小圖示增加小動畫。

只需要將 animated 修改為 true 即可。

程式碼區塊美化

預設程式碼區塊為方角

透過 _config.yml,可以修改為原角及增加複製功能。

搜尋 codeblock,即可看到相關設置(這邊主要是調整複製程式碼區塊的按鈕樣式)

  • border_radius 弧度(預設為 1)

  • copy_button

    • enable 改成 true 後就可以開啟複製程式碼區塊按鈕
    • show_result 顯示複製結果
    • style 樣式,只有留空及 flat 一種樣式((預設很醜

如果想要調整程式碼區塊樣式,就查詢 highlight_theme,總共有這幾種樣式可供選擇 normal | night | night eighties | night blue | night bright

可參考Tomorrow-theme範例

替NexT增加書籤功能

這個功能還不錯,下一次使用者進來就可以直接返回到上一個觀看的文章。

首先必須使用指令模式 (CMD) 進入到 NexT 主題資料夾

輸入以下指令

1
git clone https://github.com/theme-next/theme-next-bookmark.git source/lib/bookmark

再來開啟 _config.yml 尋找 bookmarkenable 改為 true 即可。

這樣在畫面右上角就可以看到類似書籤的圖標了。

假設我今天在 【NexT一些不錯的功能】 這篇文章關掉瀏覽器 or 退出網站,下次若要在瀏覽上一篇的文章時,只需要點上方這個書籤就會回到上次瀏覽的文章了。

開啟分享文章功能

※ 注意此功能約在 7.2.0 就移除改外掛方式了。

這是一個不錯用的功能,但是預設是關閉的,開啟會在所有文章最下方出現分享按鈕,而且可自定義那些要顯示與關閉。

只需要開啟 _config.yml 查詢 Likely Share,然後將 enable 修改為 true 即可,可自定義分享按鈕名稱,若不想要有特定社群按鈕,只需要在前面加上 “#” 字號即可關閉。

內置標籤

這個太多設置寫法了,直接附上連結(個人不常用就是了)

HEXO_next主题 自带样式设置

動畫相關設置

大多動畫設置都在這裡,搜尋 motion 即可看到。

(迷之聲:我還是喜歡預設就好了…)

燈箱效果

NexT 也是可以使用燈箱效果,一樣先 cd 到 NexT 主題目錄下

然後輸入以下指令

1
git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

附帶一提,如果已經有安裝過 fancybox2 記得一定要先移除。

安裝完畢後打開 _config.yml 查詢 fancybox,將 falsetrue 即可。

※若沒有安裝 fancybox 直接改為 true,網站會瞬間整個白化哦!

美化背景相關設置

粒子效果

NexT 有提供動態背景的方式,首先第一種粒子料果。

一樣先 cd 到 NexT 主題目錄下

輸入以下指令

1
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

然後開啟 _config.yml 查詢 Canvas-nest 確定 enable 是否為 true,若為 false 改成 true 即可。

3D 效果

一樣先 cd 到 NexT 主題目錄下

輸入以下指令

1
git clone https://github.com/theme-next/theme-next-three source/lib/three

基本上預設應該會有一個效果是打開的,所以這是第一種效果

  • three_waves

  • canvas_lines

  • canvas_sphere

這個效果沒出來無法貼圖~~~~

背景彩帶效果

一樣先 cd 到 NexT 主題目錄下

輸入以下指令

1
git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

然後到 _config.yml 中搜尋 theme-next-canvas-ribbon 將 falsetrue 即可。

這個我不演示效果了,覺得不好看。

讀取進度條

一樣先 cd 到 NexT 主題目錄下

輸入以下指令

1
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

然後開啟 _config.yml查詢 theme-next-pacepace 改為 false即可。

讀取進度條相關的樣式設置在下方這地方,由於樣式過多就不一個一個展示。

若要看樣式可以觀看 pace 官網下方有範例

我是使用 pace-theme-center-atom 樣式。

圖片延遲加載(懶加載)

一樣先 cd 到 NexT 主題目錄下

輸入以下指令

1
npm install hexo-lazyload-image --save

然後開啟系統_config.yml(非theme)在最後加入以下這段

1
2
3
4
lazyload:
enable: true
onlypost: false
loadingImg: /images/loading.gif
  • onlypost 是否只針對文章中的圖片做懶加載,若為 false 會包含大頭貼等等都做處理。
  • loadingImg 圖片還沒加載進來時的代替圖,要將代替圖片放置在 theme/source/images 下。

替 Hexo 增加留言版

首先要先到 Disqus 申請帳號並登入,然後點中間【GET STARTED】

然後選擇 【I want to install Disqus on my site】

填寫需要的相關欄位

  • Websit Name 自訂 Websit name,注意這個在後面 hexo 會使用到。
  • Category 類別
  • Language 語言

我這邊是新增一個測試用。

將下來開啟 NexT 的 _config.yml,查詢 Disqus 將剛剛的Websit Name輸入至 shortname

  • enable 開關留言板
  • shortname 剛剛設置的Websit Name
  • count 是否顯示文章留言數量

這樣就可以看到文章最後都有留言板哩

如果要觀看留言或管理等,只需要到這邊就可以看跟管理>連結

補充

若想要移除剛剛 clone 的功能,只需要開啟路徑 (hexo-theme-next-master\source\lib) 將相對檔案移除即可。

※刪除時請確定檔案資料夾,以免誤刪重要插件。

0%