hexo改用图床、添加MathJax等功能

近期简介

前段时间在准备六级,然后还是凉了。考完六级后在想接下来到毕业前的安排,原本再考虑找份实习的,而现在我能找到的实习大概是两类:

  1. 大公司的工程类,比如后台、服务端之类的,只是我研究生主要搞的是算法,觉得后台再继续搞下去也本末倒置了
  2. 小公司的算法类,因为上学期春招找实习的时候,投过南京几家小公司的算法开发,也都过了,只是不知道具体的工作水不水,而且经历过了秋招,我也明白,大公司是基本不看小公司的实习经历的。

或者如果不找实习的话,应该就是用这个时间入门好机器学习和深度学习。请教了一个今年刚毕业同样也搞深度学习的厦大学长,他的建议也是让我这段时间打好基础,DL的话企业主要看的是paper。

工具准备

本来打算收了朋友的ipad air2,用来看paper和做笔记什么的,试了一下印象笔记·墨笔,应用是做得很好的,书写基本没有障碍,只是手腕放在ipad上有时还是会识别成笔迹,漂移功能很好用,不过速度一快,字就写得丑了。之后尝试调整到最佳漂移速度,字还是写得挺丑的……
加上我爸不让买ipad,高考的阴影……然后放弃用ipad了,开始寻找pc端的笔记软件,有evernote(印象笔记)、wiznote和有道云笔记等,尝试使用evernote,总体的分级结构是挺好的,可是写的是用富文本编写的,考虑到之后可能会将笔记放上博客,开始搜索有没有支持markdown的笔记软件,其实都支持,这个解决之后,其实只要在evernote写好笔记之后,复制到hexo博客里就好了。另外,在想如果印象笔记用markdown编写好之后,能不能直接看到markdown转换之后的效果,尝试了一下,是可以的。

改用图床

所以剩下的问题,之前在hexo编写的时候,图片是放在跟博客同级目录下的同名文件夹里的,考虑到之后印象笔记里这样将无法显示图片。开始研究很久之前收藏下来还没看过的如何使用七牛云做为图床?,研究了一下,感觉怪麻烦的……看到评论提到的一些神器,这里作一下记录。

Ipic

首先是MAC端的图床神奇iPic,支持的云服务很多,上传的方式也很多,用MAC的朋友可以试试。

极简图床

这个是网页端的图床,所以没法获取剪贴板的图片,需要拖拽过去,比较麻烦。

Mpic

然后是Win端的软件,Mpic

使用很方便,只是客户端界面大了一些,其实只要能对剪贴板进行上传就好了。

qimage-win

然后是一款超级便捷的软件qimage-win,截图后自动上传,另外为了避免热键冲突,设置了开启热键和关闭热键,但是我自己还是觉得太方便了,一不小心会出现很多问题。继续寻找……

img0

这个软件是在V2EX上发现的,很符合我想要的,打开后在桌面形成一个小图标,双击即会把剪贴板的图片上传,之后粘贴出来即是外链。

hexo添加MathJax

为了添加这个功能,在网上看了一下午好几篇的博客,最后才弄好的……
首先,MathJax允许你在你的网页中包含公式,无论是使用LaTeX、MathML或者AsciiMath符号,这些公式都会被javascript处理为HTML、SVG或者MathML符号。但是直接使用MathJax需要在网页设置MathJax的cdn服务器。所以网上有大神为了避免这些复杂的操作,写了hexo-math插件,看github上作者已经不使用hexo了,这个没有再维护。下面说下步骤,这里要感谢小毛驴,写的博客对我有很大帮助,虽然撞主题了……2333:

下载安装hexo-math

1
npm install hexo-math --save

不用执行

1
hexo math install

不过要卸载要执行
1
hexo math uninstall

看情况,作者是没有更新一开始的博客了。博客里说的在站点的_config.yml文件中添加:
1
2
plugins:
- hexo-math

也是不需要的。而是要按照最新github里说的在站点的_config.yml文件中添加:
1
2
3
4
5
6
7
8
9
10
11
math:
engine: 'mathjax' # or 'katex'
mathjax:
src: custom_mathjax_source
config:
# MathJax config
katex:
css: custom_css_source
js: custom_js_source # not used
config:
# KaTeX config

更换渲染机制

这个更换的原因,我倒是没有亲身经历过。引用一下网上的:

Hexo默认使用”hexo-renderer-marked”引擎渲染网页,该引擎会把一些特殊的markdown符号转换为相应的html标签,比如在markdown语法中,下划线’_’代表斜体,会被渲染引擎处理为\标签。
因为类Latex格式书写的数学公式下划线 ‘_’ 表示下标,有特殊的含义,如果被强制转换为\标签,那么MathJax引擎在渲染数学公式的时候就会出错。例如,$x_i$在开始被渲染的时候,处理为`$xi$`,这样MathJax引擎就认为该公式有语法错误,因为不会渲染。
类似的语义冲突的符号还包括’*’, ‘{‘, ‘}’, ‘\\’等。

更换Hexo的markdown渲染引擎,hexo-renderer-kramed引擎是在默认的渲染引擎hexo-renderer-marked的基础上修改了一些bug,两者比较接近,也比较轻量级。

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

执行上面的命令即可,先卸载原来的渲染引擎,再安装新的。

然后,跟换引擎后行间公式可以正确渲染了,但是这样还没有完全解决问题,行内公式的渲染还是有问题,因为hexo-renderer-kramed引擎也有语义冲突的问题。

接下来到博客根目录下,找到node_modules\kramed\lib\rules\inline.js,把第11行的escape变量的值做相应的修改:

1
2
//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/,

这一步是在原基础上取消了对\\,\{,\}的转义(escape)。
同时把第20行的em变量也要做相应的修改。
1
2
//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

theme里开启MathJax

我用的主题是next,在主题文件夹里的_config.yml,开启MathJax

文章Front-matter打开MathJax

最后一步,文章的Front-matter里打开mathjax开关:

1
2
3
4
5
6
7
---
title: hexo改用图床、添加MathJax等功能
date: 2017-12-19 21:35:50
categories: hexo
tags: hexo
mathjax: true
---

这样之后就可以使用MathJax了

MathJax语法

1 行内公式与行间公式

行内公式用前后各一个美元符号包括,表示成$ q \in R $
行间公式用前后各两个美元符号包括,表示成

2 上下标

上标使用^,下标使用_,比如x_i^2
默认情况下,上下标符号只对一个字符起作用,比如10^10
而使用分组符号10^{10}

3 希腊字母

4 括号

  • 小括号与中括号:使用(), []
  • 大括号:因为大括号有时被用来分组,所以需要转义使用,比如\{ \},也可以使用\lbrace, \rbrace
  • 尖括号:\langle,\rangle,如\langle x \rangle
  • 上取整:\lceil,\rceil,如\lceil x \rceil
  • 下取整:\lfloor,\rfloor,如\lfloor x \rfloor

5 求和与积分

  • \sum是用来表示求和符合的,其下标表示下限,上标表示上限,比如:\sum_1^n
  • \int用来表示积分符号,同样地,其上下标表示积分的上下限,比如:\int_1^\infty
  • 与此类似的符号还有,\prod:,\bigcup:,\bigcap:,\iint:

6 分式与根式

  • \frac {a}{b}作用于其后的两个分组a,b
  • \sqrt[4]{\frac {x}{y}}

7 字体

  • \mathbb显示黑板粗字体 ,比如\mathbb {CHAN}

8 分段函数

格式为f(x)=\begin{cases}语句1\\语句2\\...\end{cases}
\text{文字}中仍可以使用行内公式去插入其他公式,所以可以将其结合分段函数一起使用。
例子1:

例子2:

例子3:

9 删除线

使用删除线功能必须使用行间公式,删除线分为片段删除线和整段删除线,样式比较多,在这里只列举一种比较常用的水平删除线,它属于整段删除线的一种。

整段删除线使用\require{enclose}来显示,声明整段删除线后,使用\enclose{删除线效果}{字符}来实现删除线效果,而水平删除线效果用关键字horizontalstrike

10等号对齐

1
2
3
4
\begin{align*}
f(x) &= (x+a)(x+b) \\
&= x^2 + (a+b)x + ab
\end{align*}

最后

搞好以上的准备,之后的学习就开始了。

一分一毛,也是心意。