Ubuntu上使用hexo遇到的坑

1. 环境部署阶段

Hexo使用的主题是Next。本人在Ubuntu上是用命令行clash进行代理设置，所以这个阶段碰到了很多坑（本人在Mac上没有遇到的）。

1.1 软件的选取

选取软件主要是考虑文本编辑器，代理，图床管理这几个。

• Vscode - 文本编辑器，好处是速度快，扩展多
• Atom - 文本编辑器，理由同上 （这个感觉运行较慢）
• Typora - 文本编辑器，所见即所得，我的最终选择
• Clash - 代理软件，用来给PicGo设置代理（有些图床被墙）
• PicGo - 图床，用来管理markdown的图片
  • imgur 图床服务：免费，非常赞，速度很快，但是有墙。优点是部署非常简单，找到token粘贴一下就完事了。
  • github 图床服务：免费，还可以刷commit，简单易用，很多人的选择，但是有墙。
• Flameshot - 截图用
• Mathpix Snipping Tool - 把论文里面常用的公式保存

最终本人的任务栏大致是这样：

使用上就是Flameshot+PicGo上传图片到图床，Typora直接粘贴链接贴图，然后Mathpix Snipping Tool 辅助自己写Latex数学公式，最后再配合Git上传自己Hexo的源码和deploy到公有库，整个写博客的流程就是这样。关于hexo的数学公式渲染引擎选用的是Pandoc，这也是Next主题官方推荐用的渲染器。

图床的服务本人主要用github和imgur，因为部署过程非常轻松，而且本人不担心墙的问题，因此是本人的首选。

如果平常有写实验报告等的需求，这里推荐可以搜集一些markdown+ccs的平常的论文和报告的模板，比latex轻便而且容易转移和部署。

1.2 代理的设置

这里本人遇到了一个非常坑的问题，就是图片在Vscode和Atom里面无论如何都加载不出来，加上本人图床是用Github+imgur的，这两个站点估计在国内都被墙了，Vscode和Atom设置代理后依然无法加载图片，因此放弃了。

最终在typora内设置socks代理后完美加载图片，因此最终在Ubuntu下选用typora来进行文本编辑

注意，打开typora设置下的高级设置就可以了。估计如果Vscode和Atom也走socks代理的话应该可以顺利把图床的图片加载出来。

2. 文章编写阶段

编写阶段也是遇到了不少坑，目前遇到的坑记录在下面，大家可以参考，自己也可以作为回顾。特别是那些本地编辑器预览没问题，上传以后文本粘在一起一塌糊涂的时候，着实让本人有点头大。

这个标题下会记录这种经典的 “本地预览没问题，部署后出问题”的情况。

2.1 列表无法识别

列表就是我们平常会用到的

• 123
• 456
  …

但是本人发现Next当中是不可以直接换行后写列表的！这点非常坑，因为在本地的编辑器上没有发现问题，但是上传后才发现了。

举个例子，在本地：

源代码是这样，这里"are:"后面有没有空格结果都是一样的，我这里是加了空格

预览起来一切正常，但是部署后就粘在一起了。

类似的情况有包括其他类型的列表，例如：

“- 123”
“- 456”
…

这种列表也会出错，因此最好的办法就是这种列表的上下都要空一行。

部署后如下图所示，就正常了。

2.2 换行和分段的纠结

Markdown的换行通常教程都是说用<br>或者用句末加2-3个空格再回车。分段的教程一般都是让你空行。

但是实际上在Hexo换行是不需要这么麻烦的，hexo可以支持直接回车键换行 （查到的资料是这么说，有待进一步验证）。

2.3 Latex公式无法识别

需要在标题打开Mathjax，并且确认全局的配置文件配置正常（印象中打开了这里就可以，但是网上的说还要改全局配置文件那些，本人没有留意）

注意Next主题里面如果要用Latex公式是需要卸载原本的一个渲染引擎然后安装Pandoc渲染引擎（和本机本身也需要安装Pandoc这个软件）来进行渲染的。

另外在Typora编辑的时候需要设置里面把行内公式打开（默认是支持Latex行间公式显示，但是默认关闭行内公式的支持），不然行内公式例如在表格或者一句话当中的那种就显示不出来的（只显示源码）。

2.4 Pandoc的版本问题

注意ubuntu通过apt安装的pandoc版本一般都是低于2的，和hexo里面的pandoc渲染器版本要求不符合，会出现npm install以后进行渲染过程中报错的情况，因此需要参考一些教程去安装最新版本的pandoc才可以正常渲染。

Mac 10.13的话应该是已经不能用brew安装pandoc了（今年6月更新了某个依赖以后就不可以了），只能用mac ports进行安装（不得不说10.13的话Mac ports真的比brew好用太多，之前安装qemu也是半天brew都安装不上去，ports一下就装上了）。Mac ports，mac钉子户心目中yyds。

2.5 谨慎的插入图片

和列表问题类似，图片插入也最好上下空行，这样可以避免产生不必要的问题（虽然我已经没印象是否因为这样出错过了）

CSDN里面似乎也是需要这样的，图片下面不空行字体就会黏在图片后面。

2.6 标题后空行的迷思

第一个二级标题下没有空行，第二个二级标题有空行，但是预览结果和部署结果是一样的。因此不要吝啬你的空行，空行不会让部署后的结果不好看，反而可以避免很多问题。

2.7 不要吝啬空行

可以把行间公式，列表，正文都看作水火不相融的冤家，给他们之间空行可以解决很多问题，之前就是这里不小心没有空行，后面部署上去以后就粘在一起了。

图像，和表格也同理，虽然图像似乎不太注重和文本之间空行，但是表格是会受到是否空行的影响的。建议如下图一样把表格上下也留出空行，不然表格可能不能被正确识别

关于空行，其实我还有一个想法待验证，就是是不是hexo会自动把无意义的空行去除，保留有意义的空行呢？例如下面这样：

你好
\n
我很好

这种中间的空行是有意义的，但是下面这样：

你好
\n
\n
\n
\n
我不好

这样中间四行其实都没意义，那是不是hexo会自动处理成只空一行的情况呢？如果我的猜想正确的话，markdown的确是鼓励空行的，把正文和正文，正文和图片，正文和表格 （这些两两组合的集合）中间都留出一个空行，不要担心不好看，反而可以防止文本粘在一起的情况发生。

2.8 <!-- more --> 并不是空行

Hexo使用这个 “阅读更多”的功能的时候，这个图示的情况是等于上面那段话和Background标题黏在一起的。

本地预览一切正常，但是部署后会出现下面这样的问题：

但是如果空行，类似下面情况的话：

预览后就一切正常。

2.9 Mermaid的错误

在本地的typora同样预览正常，但是上传到github page以后就变成这样显示不全。

猜测是因为hexo的Next主题不支持圆角，改成[]以后应该会好一点，另外发现少了几个分号在句末。结果还是显示不正常：

最后重装了hexo下npm的一个mermaid渲染模块，另外在Next的主题配置文件中把，mermaid的主题forest改成default以后恢复正常了。