說在前面
越小的細節,雷說不定越多
最近對這段很有感觸,偶爾會遇到預料外的雷,需要花時間 debug,這次遇到的問題,之前踩過一次並解決,但沒記錄下來,隨遺忘曲線,生疏或健忘是可能的。
遇到的問題
- Blog 文章的側邊欄導覽列 Catalog 點擊時無法跳到對應位置,會顯示 null
- Blog 站內搜尋突然失效無法使用
分析問題
新增「文章加密」功能後,誤動到原本的 code。
解決方法
導覽列問題
markdown-it 套件的 bug
安装 markdown-it-named-headings 來修復原本套件的 bug
1
$ npm install markdown-it-named-headings --save
進入 Blog 的根目錄修改 node_modules\hexo-renderer-markdown-it\lib\renderer.js
檔案,並在第 9 行後面新增如下:
1
parser.use(require('markdown-it-named-headings'))
修改後會像這樣:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 ;
module.exports = function (data, options) {
var MdIt = require('markdown-it');
var cfg = this.config.markdown;
var opt = (cfg) ? cfg : 'default';
var parser = (opt === 'default' || opt === 'commonmark' || opt === 'zero') ?
new MdIt(opt) :
new MdIt(opt.render);
parser.use(require('markdown-it-named-headings'))
if (opt.plugins) {
parser = opt.plugins.reduce(function (parser, pugs) {
return parser.use(require(pugs));
}, parser);
}
if (opt.anchors) {
parser = parser.use(require('./anchors'), opt.anchors);
}
return parser.render(data.text);
};
接著 hexo clean
及 hexo server
測試是否解決問題
若解決,則恭喜你~
尚未解決請繼續往下看
改進入 Blog 根目錄 node_modules\hexo-toc\lib\filter.js
,把 28-31 行改成:
1
2
3
4$title.attr('id', id);
// $title.children('a').remove();
// $title.html( '<span id="' + id + '">' + $title.html() + '</span>' );
// $title.removeAttr('id');
修改後,記得
hexo clean
及hexo server
,「用無痕模式測試」,確保不受暫存檔影響。
造成原因
找的 theme 已經很久沒更新了,更新後導致 hexo-toc
不相容的問題。
沒踩到此雷的可能原因:
- theme 持續更新已解決問題
- 舊版本沒更新
站內搜尋失效的問題
Algolia 服務
站內搜尋使用 Algolia 服務製作而成,註冊後享有 14 天內所有功能免費使用,到期後需「手動」選擇免費方案,否則無法繼續使用。
解決方法其實已經在描述中,到 Algolia 選擇免費方案即可。
補充紀錄 _config.yml
設定:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17# Blog 根目錄的 _config.yml
algolia:
applicationID: 5XXXXXXXR
apiKey: eXXXXXXXXXXXXXXXXXXXXXXXXXXXX5
indexName: rXXXXXXXg
chunkSize: 5000
# Blog 根目錄底下的/themes/<主題名稱>/_config.yml
algolia_search:
enable: true
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "沒有找到任何搜尋結果: ${query}"
hits_stats: "約有 ${hits} 項結果 (搜尋時間: ${time} 毫秒)"
每次新增文章後,都要做:
1
2
3
4$ hexo clean
$ export HEXO_ALGOLIA_INDEXING_KEY=eXXXXXXXXXXXXXXXXXXXXXXXXXXXX5
$ hexo algolia
$ hexo g -d
小結
透過 Duck typing 的方式,在描述問題的過程中,答案說不定就在裡面~