Che Blog
0%

hexo功能更新日誌

發表於 更新於 分類於 閱讀次數：
文章字數： 6.5k 所需閱讀時間 ≈ 6 分鐘

架設部落格站也差不多一個多月了，hexo雖然很方便，但還是需要自己調整很多設定才可以達到理想中的效果，NexT主題也有提供大部分版面配置與效果，寫這篇文章把一些個人化的修改紀錄起來，方便未來去作底層的修改，也分享給大家~

last update: 2022/4/10

hexo _config.yml 中的設定

針對我有修改過的設定說明

1
2
3
4
5
6
7
8
9
10
language: zh-TW # 調整語系

# Extensions
theme: next # 調整自己想要使用的主題

# Deployment # 修改部署上github的資訊
deploy:
  type: git # 透過git
  repo: https://github.com/chengche6230/chengche6230.github.io.git # 記得將username改成自己的
  branch: main # 選擇要部署的branch(通常是直接部署上main)

NexT _config.yml 中的設定

這是主題自己的config檔，位於hexo根目錄的.\themes\next\_config.yml。NexT強大的一點就是支援非常多的套件，都有寫在config檔裡面了，但基本上預設都是關閉，可以自己打開玩看看~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
favicon: # 修改網頁icon的地方，將圖片放到 \source\images 底下

# Schemes
scheme: Mist # NexT底下還有四種不同的風格{Muse, Mist, Pisces, Gemini}，可以根據喜好修改

menu: # 選擇要顯示哪些頁面，並使用甚麼icon

footer: # 這區可以設定頁面底部的資訊，如:copyright, icon等

sidebar:
  position: left # 修改sidebar的出現位置
  display: always # 修改sidebar的出現時機

avatar: # 修改大頭貼的照片和外框

social: # 修改社群帳號資料

reward: # 可以放收款QR code讓別人打賞

busuanzi_count: # 不蒜子插件(用來記錄造訪人數和觀看次數)，如網頁底下所示
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye

若是要更改用字遣詞可以到NexT底下的 .\languages\zh_TW.yml 修改對應的中文字。

Page中front matter設定

在頁面的md檔最上方有一塊—-包起來的範圍，可以對文章或頁面設定一些基本的屬性。若是很常用的屬性可以到 scaffolds\ 中對page或post等進行設定，設定完成後每一個新增的md檔就會照著格式預設產生。底下是一些我有用到的屬性:

1
2
3
4
5
6
7
8
title: # 文章標題或頁面名稱
date: # 產生時間
categories: # 分類
tags: # 標籤，可以設定多個標籤，如: ["投資", "加密貨幣", "NFT"]

# 需要再寫的屬性
sticky: # 數值，用來調整置頂文章順序
comment: # true | false 當前文章/頁面是否開啟留言板

在網站中使用Emoji😎

用了Emoji讓整個頁面比較生動，在簡單風格的NexT主題下也多了一些色彩，但原本是沒辦法打出emoji的，透過簡單的設定就可以打出表情符號啦!

安裝hexo-filter-emoji實現Emoji功能

1
npm install hexo-filter-emoji

修改hexo目錄底下的_config.yml檔，在文件最後面加上

1
2
3
4
5
6
# hexo-filter-emoji
emoji:
  enable: true
  className: github-emoji
  styles:
  customEmojis:

儲存後就可以使用自己喜歡的emoji啦🎉，直接複製想要打的表情，貼到文章內就可以了!如果是Windows的使用者，可以透過快捷鍵 win + > 打開windows內建的表情符號對話窗，選擇想要的符號按下去就會自動輸入了，我覺得這個表情包就夠豐富了，甚至人臉的符號還可以選擇膚色👩👨🏻🧑🏼👧🏽👦🏾🧒🏿，另外也有顏文字和數學符號可以選，滿方便的，大家用起來!

滑鼠點擊特效

讓滑鼠有各種特效，我個人還沒有看到喜歡的特效，目前頁面就沒有使用了
在 themes\next\source\js\ 底下新增 cursor 資料夾，並將想要的滑鼠特效js檔丟進cursor資料夾內。

參考特效腳本:

在 themes\next\layout\ 中新增 _custom 資料夾，並新增 custom.swig 檔，有幾份腳本就寫對應的code:

1
2
3
4
5
6
7
8
9
10
11
{# 鼠标点击特效 #}
{% if theme.cursor_effect == "fireworks" %}
  <script async src="/js/cursor/fireworks.js"></script>

{% elseif theme.cursor_effect == "love" %}
  <script async src="/js/cursor/love.js"></script>

{% elseif theme.cursor_effect == "text" %}
  <script async src="/js/cursor/text.js"></script>

{% endif %}

然後在 themes\next\layout\_layout.swig 檔案最底下新增:

1
2
3
4
5
6
7
8
9
10
11
  {% include '_third-party/math/index.swig' %}
  {% include '_third-party/quicklink.swig' %}

+ {% include '_custom/custom.swig' %}

  {{- next_inject('bodyEnd') }}
  {%- if theme.pjax %}
    </div>
  {%- endif %}
</body>
</html>

設定完成後，就可以在主題的配置文件 _config.yml 中添加設定我們想要切換的特效:

1
2
# mouse click effect: fireworks | love | text
cursor_effect: fireworks

最後需要重新產生動態文件 hexo g，再開啟localhost或是部署到github上。

文字特效遇到 [jQuery is not defined] 問題而無法使用

因為text.js內有用到jQuery，若沒有先import進來就會無法正常使用，到 _layout.swig 引入jQuery即可:

1
2
3
4
5
6
<head>
  ...
  {{ partial('_third-party/analytics/index.swig', {}, {cache: theme.cache.enable}) }}
  {{ partial('_scripts/noscript.swig', {}, {cache: theme.cache.enable}) }}
+  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

如過設定完在本地端可以正常顯示特效，但deploy上去後就會出錯的話，有可能是外部資源讀取失敗導致報錯，可以將整個 jquery-1.11.3.min.js 存在本地端，使用特效時就可以直接讀取本地端的資源js檔，即可正常顯示文字特效。

Gitalk 留言板

待更
具體可以參考Ray寫的這篇: 十分鐘超詳細替 Hexo Next 開啟 Gitalk 留言版

在文章中使用Latex輸入數學式子 - Mathjax

應該不少人會需要在文章中輸入數學公式，尤其做分析或推導，在網上看到一篇寫的很詳盡的文章，我放在底下Reference了需要可以參考~ hexo雖然可以用Markdown語言編寫文章，但因為渲染器的問題並不能直接使用 $$ 來輸入數學公式，因此我們需要透過額外的渲染引擎來實現。

首先，要將hexo預設的渲染引擎 marked 替換:

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

在 <root>\node_modules\hexo-renderer-kramed\lib\renderer.js 中做修改:

1
2
3
4
5
6
// Change inline math rule
function formatText(text) {
  // Fit kramed's rule: $$ + \1 + $$
- return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
+ return text;
}

如果之前有安裝過 hexo-math 要先解除安裝，並安裝 mathjax 套件:

1
2
npm uninstall hexo-math --save
npm install hexo-renderer-mathjax --save

接著去 <root>\node_modules\hexo-renderer-mathjax\mathjax.html 更新CDN連結(應該是在最底部):

1
2
- <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

在渲染網頁的時候，hexo會默認將一些符號轉成特殊字元，像是會將 _ 轉成 <em> ，所以要去對底層的規則文件做修改，打開 <root>\node_modules\kramed\lib\rules\inline.js，並修改兩行:

1
2
3
4
5
6
7
8
9
10
11
var inline = {
- escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
+ escape: /^\\([`*\[\]()# +\-.!_>])/,
  autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
  ...
  strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
- em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
+ em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
  ...
};

最後，去主題底下的 _config.yml 將mathjax功能開啟:

1
2
3
4
5
6
7
8
9
10
11
12
# Math Formulas Render Support
math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

如果是使用next主題要注意會有兩個mathjax的區塊，要改到正確的mathjax，要不然不會生效。另外，有其他教學需要去改hexo的config，但我測試後是不需要的~ 完成以上步驟再清除暫存重新產生動態文件後( hexo cl && hexo g )，就可以看到漂亮的公式了!

Chat room

開啟個人聊天室可以直接私訊作者，雖然感覺有留言版就夠了，不過還是用來玩看看，以後不需要再關閉~
先到 NexT 底下的 _config.yml，sidebar那區將chat打開，並選擇要使用的聊天室:

1
2
3
4
chat:
  enable: true
  service: chatra
  #service: tidio

再到這區選擇要使用的聊天室服務，並輸入自己的id/key(都會是一長串的亂碼，應該滿好找的🤔):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# ---------------------------------------------------------------
# Chat Services
# See: https://theme-next.org/docs/third-party-services/chat-services
# ---------------------------------------------------------------

chatra:
  enable: true
  async: true
  id: <type id here> # Visit Dashboard to get your ChatraID
  #embed: # Unfinished experimental feature for developers. See: https://chatra.io/help/api/#injectto

tidio:
  enable: false
  key: <type key here> # Public Key, get it from dashboard. See: https://www.tidiochat.com/panel/settings/developer

這兩種聊天室都有分免費版和收費版，免費仔只有一些基本功能可以用，不過兩者差異沒有很大，可以選自己喜歡的外觀、介面去操作，tidio 有支援中文，介面客製化程度比較高，不過我比較喜歡簡潔一點的 chatra。

Reference