Hexo 新增自定義標籤外掛

本篇紀錄 Hexo 新增自定義標籤外掛的方法,Hexo 本身有很多標籤外掛可以使用,例如:codeblockpost_link等等,這邊要來新增我們自定義的標籤。

自定義的標籤路徑在哪裡?

每個 Hexo 的主題都有自己自定義的標籤,可以在下列路徑找到,

1
themes/<theme>/scripts/xxx.js

已內建的 landscape 主題為例,fancybox.js 就是一個自定義的標籤外掛,

1
themes/landscape/scripts/fancybox.js

新增自定義的標籤

以下就示範簡單的自定義的標籤方法,假設我要新增一個標籤叫做 {% link %},在文章內使用時都能轉換成 <a href="https://xxx">,對應的 js 如下,

1
2
3
4
5
6
7
8
function mylink(args) {
var html = [
'<a href="https://xxx">'
];
return html;
}

hexo.extend.tag.register('link', mylink);

這個 js 放在 themes/<theme>/scripts/mylink.js 下,接下來在 md 文章中可以寫 {% link %} 就會自動轉換成我們設定的 <a href="https://xxx"> 文字了!

其他參考
javascript - How to render fetched data in Hexo using custom tag plugin? - Stack Overflow
https://stackoverflow.com/questions/57206064/how-to-render-fetched-data-in-hexo-using-custom-tag-plugin
Insert common used data with a custom tag plugin in hexo blog engine | Nonostante Games
https://www.nonostante.io/devblog/2016-10-06-insert-common-used-data-with-a-custom-tag-plugin-in-hexo-blog-engine.html
Hexo 添加自定义的内置标签
https://my.oschina.net/u/4406323/blog/3894378
在 Hugo 文章中新增 Adsense 廣告單元_River’s Site - MdEditor
https://www.mdeditor.tw/pl/21kI/zh-tw

相關文章
Hexo 使用 Google Analytics 進行網站流量分析
Hexo 本機測試時如何關閉 Google Analytics
Hexo codeblock 插入程式碼區塊與各種程式語言預覽
升級更新 Hexo upgrade
Ubuntu 安裝 Hexo
Mac OS 安裝 Hexo