安安~ 今天我要來和各位推薦 10 個值得安裝的 Hexo 插件!
hexo-abbrlink2
這個插件呢可以自訂你的文章的連結 ， 為你的文章生成永久連結並會按照順序給文章的連結排序
安裝該 Hexo 插件:
npm install hexo-abbrlink2 --save修改你的 config.yml:
permalink: posts/:abbrlink/在安裝 & 使用該插件後呢你的文章連結就會大概長成以下這樣:
https://post.zz173.com/posts/1.html
https://post.zz173.com/posts/2.html
https://post.zz173.com/posts/3.htmlhexo-all-minifier
hexo-all-minifier 是一個 Hexo（靜態網站生成器）的插件 ， 主要用於優化 HTML、CSS、JS 和圖片
安裝該 Hexo 插件:
$ npm install hexo-all-minifier --save使用 / 啟動該插件:
all_minifier: true這個插件有很多可以自訂的插件 ， 可以到他的 GitHub 頁面上查看
hexo-auto-canonical
這個 Hexo 插件會自動為你的 Hexo 網站建立 canonical 連結。只需簡單地自動將 canonical 輔助函數添加到 HTML 的 區塊中
安裝該 Hexo 插件:
npm install --save hexo-auto-canonical你不需要其他設定只要安裝該插件 ， 剩下的事這個插件就會自己處理好啦
如果你想知道為什麼有些連結需要設定 canonical ， 你可以參考以下的文章:
hexo-auto-category
這個 Hexo 插件會自動為你的 Hexo 網站自動生成主題 / 分類 (Category)
為你省下要自己寫文章屬於哪個分類的時間
安裝該 Hexo 插件:
$ npm install hexo-auto-category --save使用 / 啟用該插件:
auto_category:
enable: true
multiple: false
depth: hexo-bridge
一個 Hexo 檔案編輯器
安裝 & 使用該 Hexo 插件:
npm i --save hexo-bridge
hexo server
open http://localhost:4000/bridge/這個插件有以下這些功能:
- 編輯文章和頁面
- 檔案管理
- 編輯網站設定
- 主題和插件管理
一些這個插件做成的編輯器畫面預覽:
hexo-clean-css
這個插件提供的功能很簡單 ， 就是縮小 CSS 檔案的大小
安裝該 Hexo 插件:
$ npm install hexo-clean-css --savehexo-content-blocks
這個插件可以讓你在文章或是頁面中加入好看的內容區塊
預覽圖:
安裝該 Hexo 插件:
$ npm install hexo-content-blocks --save在標籤布局文件中加入以下代碼:
{%- if config.content_blocks.enable %}
<style type="text/css">{{ content_blocks_css() }}</style>
{%- endif %}範例: 如果你使用的是NexT 主題的話那你就要修改這個檔案: themes/next/layout/_partials/head/head.njk
在 config.yml 加入以下代碼:
# Content blocks
## Docs: https://github.com/Sukwants/hexo-content-blocks
content_blocks:
enable: true
open_button: fa fa-chevron-down
types:
note: "#448aff || fa fa-pen"
abstract: "#00b0ff || fa fa-clipboard-list"
info: "#00b8d4 || fa fa-circle-info"
tip: "#00bfa5 || fa fa-fire"
success: "#00c853 || fa fa-check"
question: "#64dd17 || fa fa-circle-question"
warning: "#ff9100 || fa fa-triangle-exclamation"
failure: "#ff5252 || fa fa-xmark"
danger: "#ff1744 || fa fa-bolt"
bug: "#f50057 || fa fa-bug"
example: "#7c4dff || fa fa-vial"
quote: "#9e9e9e || fa fa-quote-right"使用內容塊:
要使用時就寫上 hexo 標籤並把要放在內容塊裡面的內容包在裡面就行了
{% contentblock 標題文字 type:Note %}
Content...
{% endcontentblock %}hexo-draft-tags
另一個好用 ， 值得安裝的 Hexo 插件 ， 用於添加草稿標籤 ， 以分隔文章中應被視為「草稿」的 Markdown 文字
安裝該 Hexo 插件:
npm i hexo-draft-tags使用該 Hexo 插件:
{% draft %}
This text should only be shown in --draft mode.
{% enddraft %}hexo-easy-tags-plugin
這是一個自動修正標籤名稱的 Hexo 插件
可以幫助你把不同大小寫的標籤歸類為同一個標籤或是如果標籤差別只有在特殊符號時
範例: foo-bar 和 foo_bar 和 foo bar -> 最後都會被自動歸類為 foo-bar
安裝該 Hexo 插件:
npm install hexo-easy-tags-pluginhexo-filter-optimize
這是一個可以幫助你優化頁面載入速度的 Hexo 插件
這個插件會自動過濾 HTML 檔案，找到區塊並將其替換成 JavaScript 來優化 CSS 。也可以將 main.css 內嵌到 HTML 頁面中
但是呢有些已知的問題: 可能會導致 Font Awesome 和 PJAX 載入失敗
所以如果你有使用 Font Awesome 或 PJAX 的話使用前最好再考慮一下
安裝該 Hexo 插件:
npm install hexo-filter-optimize在 config.yml 加入以下代碼:
filter_optimize:
enable: true
# remove the surrounding comments in each of the bundled files
remove_comments: false
css:
# minify all css files
minify: true
# bundle loaded css files into one
bundle: true
# use a script block to load css elements dynamically
delivery: true
# make specific css content inline into the html page
# - only support the full path
# - default is ['css/main.css']
inlines:
excludes:
js:
# minify all js files
minify: true
# bundle loaded js files into one
bundle: true
excludes:
# set the priority of this plugin,
# lower means it will be executed first, default of Hexo is 10
priority: 12以上就是這期的 Hexo 插件盤點 ~ 下次會繼續推薦一些好用的 hexo 插件搭!
