hexo博客插件安装

安装的插件

打开 git，将当前目录切换到你的博客目录。使用 npm ls -dept 0 即可查看，所有你安装的 hexo 插件。但是以防万一，我还是在下面记录了一下（主要是我自己下载的插件，hexo 自带的不算）。

插件名	版本号	状态
hexo-cli	3.1.0	必装插件
hexo-abbrlink	2.0.5	-
hexo-filter-flowchart	1.0.4	-
hexo-filter-mermaid-diagrams	1.0.5	-
hexo-generator-calendar	0.01	-
hexo-optimize	2.5.1	优化网页加载速度
hexo-renderer-kramed	-	已废弃
hexo-renderer-mathjax	0.6.0	-
hexo-renderer-pandoc	0.3.0	-
hexo-symbols-count-time	0.7.0	-
hexo-tag-echarts3	1.1.2	-
hexo-wordcount	6.0.1	已废弃

开启mathjax插件

2020.06.14 更新：注意，NexT v8 声明 hexo-renderer-kramed 已经停止维护，所以可以改用 hexo-renderer-pandoc，具体可以参考官方文档。

百度了一圈最后还是没有解决问题，因为其他的博客都说要去/node_modules/hexo-renderer-kramed/lib/renderer.js文件修改源代码，但是我压根没有这个文件，hexo-renderer-kramed这个文件夹不存在。

最后还是自己试出来了，步骤如下：

1. 安装kramed。hexo 默认的渲染引擎是 marked，但是 marked 不支持 mathjax。所以要卸载它。

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

2. 停用hexo-math，然后安装 hexo-renderer-mathjax 包。其实我也不知道怎么判断自己有没有在使用hexo-math。总而言之卸载就行了，管它存不存在。

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

3. 开启mathjax，在next主题文件夹里，具体路径：/themes/next/_config.yml，你只需要把enable属性改为true即可

   # Math Equations Render Support
   math:
     enable: true
   
     # Default(true) will load mathjax/katex script on demand
     # That is it only render those page who has `mathjax: true` in Front Matter.
     # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
     per_page: true
   
     engine: mathjax
     #engine: katex
   
     # hexo-rendering-pandoc (or hexo-renderer-kramed) needed to full MathJax support.
     mathjax:
       enable: true
       # Use 2.7.1 as default, jsdelivr as default CDN, works everywhere even in China
       cdn: //cdn.jsdelivr.net/npm/mathjax@2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML
       # For direct link to MathJax.js with CloudFlare CDN (cdnjs.cloudflare.com)
       #cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML
   
       # See: https://mhchem.github.io/MathJax-mhchem/
       #mhchem: //cdn.jsdelivr.net/npm/mathjax-mhchem@3
       #mhchem: //cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.3.0
   
     # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) needed to full Katex support.
     katex:
       # Use 0.7.1 as default, jsdelivr as default CDN, works everywhere even in China
       cdn: //cdn.jsdelivr.net/npm/katex@0.7.1/dist/katex.min.css
       # CDNJS, provided by cloudflare, maybe the best CDN, but not works in China
       #cdn: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css
   
       copy_tex:
         # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
         enable: false
         copy_tex_js: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.js
         copy_tex_css: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.css

4. 最后一步，修改/themes/next/layout/_layou.swig文件，将如下代码添加到该文件</body>标签的上面一行

   <script type="text/x-mathjax-config">
   MathJax.Hub.Config({
   	//下面的HTML-CSS和SVG用于在小屏幕上，数学公式可以自动换行，我测试过后发现无效，但是貌似有人可以。
   	"HTML-CSS": { 
   		linebreaks: { 
   			automatic: true 
   		} 
   	},SVG: {
   		linebreaks: { 
   			automatic: true 
   		}
   	},menuSettings: {
   		zoom: "None"
   	},
   	showMathMenu: false,
   	jax: ["input/TeX","output/CommonHTML"],
   	extensions: ["tex2jax.js"],
   	TeX: {
   		extensions: ["AMSmath.js","AMSsymbols.js"],
   		equationNumbers: {
   			autoNumber: "AMS"
   		}
   	},tex2jax: {
   		inlineMath: [["\\(", "\\)"]],
   		displayMath: [["\\[", "\\]"]]
   	}
   });
   </script>
   <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

1-3步参考如何在hexo中支持Mathjax，4步参考hexo-renderer-kramed

开启流程图插件

hexo 本身不支持绘制流程图，但是可以使用以下命令安装插件来实现此功能。

npm install --save hexo-filter-flowchart

插件地址，语法可以在这找到，一个简单的例子：

(\`乘3)flow
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
(\`乘3)

开启echarts插件

详见教程在 Hexo 中插入 ECharts 动态图表 由于特殊需要，要给 echarts 添加一个 id，所以需要改一下源码。 找到 node_modules/hexo-tag-echarts3/index.js。将 echartsMaps() 函数改为：

function echartsMaps(args, content) {
    var template = fs.readFileSync(filePath).toString(),
        options = {};

    if (content.length) {
        var options = content;
    }
	_id = args[0] || 'echarts' + ((Math.random() * 9999) | 0)
    return _.template(template)({
        id: _id,
        option: options,
        height: args[1] || 400,
        width: args[2] || '85%'
    });
}

然后在写代码时，只需要这样 {百分号 echarts id 400 '85%' 百分号} 写就行了。

页面加载速度优化

该插件确实可以增加不少的加载速度，但是问题也挺多。除了以下的一个问题，我还遇到了一个，就是在 next 主题中，左侧的作者信息栏悬浮的位置有问题。

在用了一天之后，还是决定不用它了。

使用 hexo-optimize 可以极大地提升页面加载速度，但是有个缺点，页面中的 icon 可能会加载失败。

解决办法可以参考 github issue。但是总的来说，目前并没有自动化的解决办法。

在使用 hexo g 等操作时，该插件会导致运行异常缓慢。此外，在本地服务器打开时修改博客，博客刷新的速度也会异常缓慢。

解决办法依旧在上面提到的 issue 中有过讨论，后来官方也给出了解决办法：设置 export NODE_ENV=development。

具体来说，在本地调试时，开启 export NODE_ENV=development 从而设置为开发环境，此时 hexo-optimize 将被禁用。注意该 NODE_ENV 是一个临时变量，如果需要部署到云端，只需要将 git 终端关闭，再重新打开即可取消开发环境的设置。

可以使用以下代码测试是否开启开发环境。

1. node 
2. console.log(process.env.NODE_ENV)

正常情况应该会输出：

development
undefined