探索在Hexo下使用Mathjax的经验
前言
2018-11-02
1 | 从一个角度解决了 |
2017-11-01
1 | 无论怎么学习, 原作者的github的README都是最好的参考资料 |
2017-10-31
1 | 对于在Hexo框架中插入数学公式, 可谓是山高坑大, 艰难险阻, 苦难重重 |
Let’s go !
首先贴上最终成果, 省得各位看官心急
最普通的等式
. 带下标的概率关系(katex格式)
公式块+分段函数
方案一
概述
许多人一开始尝试如何在blog中插入数学公式, 都会在某度或者某歌搜索一波, 得到的答案大多如下
于是乎, 我们顺理成章的打开这些教程, 慢慢的上了一条贼船
尝试
总结大多数人的经验, 第一次的尝试呢, 大抵是分为了以下几步
- 安装hexo-math插件, 指令为
npm install hexo-math --save其中–save 是自动把模块和版本号添加到dependencies部分, 即根目录下的package.json文件中 - 在
_config.yml中加入plugins: - hexo-math - 在你的文章的
*.md文件中开启开关mathjax: true - *查看
package.json文件, 会发现已经有了hexo-math对应的3.0.4版的插件安装好了
按照大多数人的经验介绍, 和老版本的插件特性, 操作到这里就已经算是成功了, 但是无数小白都在这里折戟沉沙, 我们可以以2017-04-19为日期分割线, 因为原作者在这里进行了一次更新, 插件进入到了3.0.0的时代, 具体发生了神马变化可以自行参考上面的传送门
其中上述第4条, 是笔者留下的一点小伏笔, 因为大家并没有讨论这件事
探索
上回书说道, 按照经验帖的教程一步一步来的插件, 对于插入公式不奏效, 通过传送门原PO写的REAMDME和各大教程的书写时间, 我意识到问题应该是出在版本更新上, 为了解决这个问题, 笔者自然而然的产生了两个思路:
1st -> 探索新版本的正确打开方式
2nd -> 切换回旧版本, 因为教程和经验多啊 (广大学习python的小白有多少是因为教程和例程只适用于2.7和放弃了研究3.x啊hhhhhh (逃 )
如果想切换回使用老版本可以进行如下操作
- 卸载一波刚刚安装的插件, npm uninstall hexo-math –save
- 按照版本号安装对应的hexo-math插件, 例如笔者选择了
1.0.8版本, 指令即为npm install hexo-math@^1.0.8 --save - 经检验,
1.0.8版本和2.0.1版本都是可以完美执行的
笔者亲测有效!!!至此首战功成
总结
第一. 由于Hexo框架已经不是时下最流行的blog框架了, 所以出现了各种bug也鲜有人出面解决, 据说各路大神都奔向hugo框架了, 笔者也考虑后续弃坑
第二. 老化了的不仅仅是Hexo框架,
hexo-math插件的作者赖以生存的插件, 也弃坑已久, 安装的时候你会看见这样一句扎心的话The author does not use Hexo any more. This plugin is no longer maintained
仔细看控制台打印出来的消息, 可以发现是在安装
hexo-math插件的时候, 他依赖于另外一个插件–hexo-renerer-inject, 而这个插件的作者已经停止维护了, 通过传送门在插件的github的问题讨论issue中, 可以看见作者有对这件的表态
方案二
概述
通过传送门在插件的github的问题讨论issue中, 有人说通过安装hexo-renderer-mathjax, 可以解决各种疑难杂症
尝试
说明:
- 做出这个尝试的前提是, 笔者还是孜孜不倦渴求使用最新版的插件
- 所以前述已经成功了的
1.0.8版本和2.0.1版本, 在这里都被卸载了, 重新安装回3.0.4版本的
这个东西操作到这里, 可以说是得心应手了, 在blog的根目录下敲入npm install hexo-renderer-mathjax --save, 顺利安装
然后我们执行hexo generatehexo server
哇!!!, 居然这么就成功了, 喜出望外, 不过先别急高兴, 部署hexo deploy
打开我自己的小站, 发现出事了(懒得截图了,大家脑补吧)
靠着这个渲染工具产生的数学公式, 虽然在本地没有问题, 但是一旦部署到服务器端, 其生成公式的脚本, 被浏览器视为不安全的, 需要手动信任, 尽管点击之后达到我们希望的效果, 但是用户交互体验极差, 相信没有哪位读者愿意每次打开一个页面, 就点击一次的, 并且其他人的blog没有这个问题
探索
由于其前缀是hexo-renderer, 是一个渲染器, 故其工作原理笔者尚未深究, 但是可以肯定的是, 渲染代码出现的时机不对, 笔者尝试过在\themes\layout文件夹中手动添加渲染脚本, 以及在执行hexo generate之后, 手动修改html文件中的<script>标签再进行部署操作, 均未奏效, 笔者认为这条路可以继续探索下去, 但是笔者对这个领域不太感兴趣, 所以放弃了使用hexo-renderer-mathjax
总结
- 如果把实现hexo-math插件作为主线任务,
hexo-renderer-mathjax给我们带来的惊喜, 犹如饮鸩止渴, 不仅没有从根本上解决原始的问题, 还引来了更多的问题, 偏离主线 hexo-renderer-mathjax插件和hexo-maht插件尽管看起来十分相似, 但是二者几乎没有耦合, 二者均可卸载另外一个而仅靠自己完成数学公式的渲染
方案三
概述
目前的情况是, 使用hexo-math最新版本的任务尚未完成, 在issue的讨论中, 本没有可以让我成功渲染出来公式的, 但是有先辈是成功了的, 于是我想求助他们
尝试
随即我点开了一个高被赞回答的大神的github主页, 抱着试试看的态度给大神发了封邮件, 很快大神回复了我
你好，
hexo-math确实有很多问题（我是在两年前使用的，现在的版本可能有改善）。我目前使用的主题是 https://github.com/tufu9441/maupassant-hexo ， 里面的数学模块是我实现的，其实很简单，查看https://github.com/tufu9441/maupassant-hexo/commit/bed3217b77e64ce06fd1a5bf3f48bc573c6fd64d 有兴趣的话，你可以在自己使用主题的加入该功能。
希望可以帮到你。
从这个回复中, 我大致get到了两点有用的信息
- 我不应该使用系统自带的主题这一基础款的东西
- 我仍然有两条路可以选择, 一个直接使用大神给的主题, 坐享其成; 另一个是探索如何
在自己使用主题的加入该功能
显然, 饥不择食的我选择了偷懒的方式
探索
使用Hexo的theme主题, 其过程还是十分简单的, 即便是不懂各种操作的小白, 在https://hexo.io/themes/ 挑选到喜欢的主题后, 依次执行复制-粘贴-回车-修改配置文件, 就可以实现换主题了
成功更换主题之后, 我第一次感觉到了体内的多巴胺迸发的感觉, 因为
- 主题好漂亮
- 本地测试成功
- 部署到服务器成功
至此, 这是探索路上第一次真真正正的实现了最新版本插件渲染出来数学公式的功能, 而且部署到远端无bug
总结
走到这一步, 还是有几句话要说的
- 笔者目前除去系统默认主题, 尝试过的主题只有两个, 一个是
maupassant, 另外一个是next - 不同主题的配置都大同小异, 但是共同点就是需要在主题的
_config.yml文件中, 实现一些功能的开启和屏蔽, 而我们的mathjax就在其中 - 遗憾的是, 笔者还没有尝试探索如何在自己使用主题的加入该功能
方案四
概述
尽管在大神给出的主题下, 使用的很嗨, 但是我还是听见了灵魂深处对自己的拷问, 那是你自己探索出来的处理方案么?
于是这一次, 我展开了真真正正的探索–在landscape主题下, 使用3.0.4版本的hexo-math
尝试
此处省略一万字
探索
其实在issue中, 一众网友给出的诸多解决方案, 例如
- 执行 hexo clean
- 安装 hexo-renderer-mathjax
- 在配置文件
_config.yml中, 修改math对应的mathjax的源文件路径为math: engine: 'mathjax' # or 'katex' mathjax: src: "//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" config: # MathJax config katex: css: #custom_css_source js: #custom_js_source # not used config: # KaTeX config
这些回答, 都有人点赞表示”哎呀按照这个办法我TM也成功了”, 但是我就是没成功!!!!!
综上所述的方案一到方案三, 实际上是以时间轴的进度展开的, 我用了大概四五天的零碎时间, 进行了大量的尝试, 终于皇天不负有心人, 图灵dalao给了我一个一瞬间的发现
我弄成了哈哈哈哈哈哈哈哈哈哈
而且, 过程并不是太复杂, 只有两步, 这两步在上面都贴过了, 我怀着激动的心情, 没有复制粘贴下来, 而是又亲手敲了一遍npm install hexo-math@^2.0.1 --savenpm install hexo-math@^3.0.4 --save
用一句话描述就是, 在安装完旧版本之后, 不卸载, 继续安装最新版本
当然了, 第二行的那句版本选择也可以省略不要
这显然是一个bug, 笔者虽然没弄清其真正的来龙去脉, 但是一个显而易见的猜测就是, 在3.0.4版本中所依赖的某些模块或者代码或者插件, 被原作者从2.x.x版本升级上来之后, 莫名其妙的丢失了, 经过先安装低版本, 再安装高版本的操作, 不仅mathjax可以大显神通, 而且新版本的新卖点–katex, 也可以通过配置_config.yml文件中的engine来实现切换了```
math:
engine: ‘mathjax’ # or ‘katex’
…
…
…
1 |
|