前言

花费了零零碎碎将近三天来搭建并美化个人博客网站，不好好写东西都对不起自己😉，本篇介绍如何优雅地写博客，主要内容分为三部分，一是如何发布博客，二是如何优雅地使用latex公式，三是如何优雅地插入图片。

发布博客

问：如何发布博客？

答：将要上传的 md 文档放入/source/_posts中，素质三连 git clean,git g,git d 即可

要上传的 md 文档前面的 front-matter 部分写上 title，categories，tags 等文章信息，具体可以写哪些信息详见上一篇。

进入源码模式，格式如下：

1
2
3
4
5
6
7
8
9
10
11
---
title: 论如何优雅地写博客
categories:
	- 使用技巧
tags: 
	- Typora
	- PicGo
	- SM.MS图床
	- hexo
	- 写博客
---

latex公式

众所周知，Typora 以其出色的即时预览功能和对 latex 公式的支持广受欢迎，虽然现在付费了，但还是可以想办法白嫖的，网上一搜一大堆，但建议支持正版。

这里推荐个自用主题：Atheme。好用记得给 star 哦😉

但是，当我将用 Typora 写的文档放入博客中时，问题出现了！里面的 latex 公式都寄了！下面讲解解决方法：

更换插件

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

更改插件文件

进入项目更目录下：node_modules\kramed\lib\rules\inline.js

修改这么两行。

1
2
3
4
- escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/
+ escape: /^\\([`*\[\]()#$+\-.!_>])/
- em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/
+ em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

分别在第 11 行和 20 行左右，减号后面是删掉的内容，加号后面是要加上的内容

配置主题文件

_config.butterfly.yml 中更改如下：

1
2
3
mathjax:
  enable: true
  per_page: true

更改部分语法

如果上述操作全部完成，还是不能成功，看看有没有语法问题。

比如，如果在公式内连续使用两个花括号，必须加上空格。

如下面的会渲染失败。

1
$$L_p  = (\sum_{i=1}^m |x_i - y_i |^{p}  )^{{\tfrac{1}{p}}}$$

在连续的花括号之间加上空格即可。

1
$$L_p  = (\sum_{i=1}^m |x_i - y_i |^{p}  )^{ {\tfrac{1} {p} } }$$

图床搭建

注意：大概在8月底时，通过picgo.app端已无法上传，推测是被墙了（哭~~刚搞好没用多久就被墙了，部署在vercel上的twikoo也被墙了，我真倒霉😭），因此，请直接在线手动上传。

个人博客不能没有图床，就像西方不能没有耶路撒冷🤣，总之一个图床工具还是非常有用的，首先是无论是 github pages 还是 gitee pages 都是有 1G 的容量限制的，图片传多了就寄了。另外，图床可以实现跨平台跨设备使用同一张图片，分享或上传 md 文档再也不用连带着图片文件夹压缩了。

本着白嫖精神，并考虑到 github 访问速度慢，gitee 禁止外链，我选择 SM.MS 图床配合 PicGo 工具。SM.MS图床免费用户有 5G 容量（再多点就好了😊)，访问速度还可以。下面介绍如何配置：

下载PicGo

网址在这，向下翻，下载 2.3.0 版本，如下图：

下载picgo

下载完成后双击即可安装。

配置SM.MS

网址在这，注册登录后点击菜单栏的 user -> DashBoard

配置smms

点击 API Token，复制 Secret Token 的内容，如果为空就点击下面的 Generate

获取key

配置PicGo

打开 PicGo，配置 token，即把刚才复制的内容放进来

注意：PicGo 双击打开可能没反应，实际在任务栏可以看到

使用key

配置Typora

文件 -> 偏好设置 -> 图像，配置如下：

配置typora

重启 Typora，即可优雅地写博客。

注意：最后的验证可能不成功，重启之后新建一个 md 文档试试，如果能上传，就不用管

另外，推荐一个截图工具 snipaste，超级好用！

优雅的分割线😎 我来更新啦！

问题解决

公式换行

如果要写多行公式，需要以\\begin{cases},\\end{cases}或者\\begin{align},\\end{align}包裹，否则换行失效。

例如：

换行无效

1
2
3
4
$$
a=b+c \\
b=c+d
$$

换行成功

1
2
3
4
\begin{align}
a=b+c \\
b=c+d
\end{align}

上下标

现有渲染器kramed不支持上下标，可以考虑替换为markdown-it，但这个插件对mathjax的支持不太好，暂时我没找到鱼和熊掌兼得的办法，所以，以后写文章上下标尽量在公式中使用吧

公式大小

在根目录中搜索mathjax.pug文件，应该有两个，改代码中scale的值即可

行距

插入行内公式后文本行距变窄，暂时没找到方法解决，逼死本强迫症了🤬，有解决办法的大佬请评论告诉我😣

优雅地分割线，我又来啦！

解决啦！

在Blog\themes\butterfly\source\css中新建一个css文件，名称随意，我这里记作mycss.css，写入如下代码：

1
2
3
4
5
/* 解决行内公式导致的间距问题 */
mjx-container[display],
.has-jax {
    line-height: inherit !important;
}

在主题配置文件_config.butterfly.yml中引入刚刚新建的css文件，如下：

1
2
3
4
5
# Inject the css and script (aplayer/meting)
inject:
  head:
    - <link rel="stylesheet" href="/css/mycss.css">
  bottom:

注意别搞错了位置，根据注释可以锁定到正确位置。