早上编辑矩阵时，发现本地Typora可以看到正常的矩阵，结果上传到博客上面就成这样了：

img

发现是在 Hexo 主题配置文件（如 Anzhiyu 主题的 _config.yml）中有配置没改，结果改了发现：

img

img

还是不对，搜了半天发现图片又炸了

7de7e1ce-6549-4836-84cf-ea2c68583b32

738105f3-54de-4ff5-b569-b4c261ee38c3

接下来查了发现可能是渲染器的原因

Hexo折腾系列（六）数学公式渲染优化 - 江风引雨の小po站

下面是引用

有时候我们需要在文章里插入公式，Typora编辑器提供了很好的公式渲染支持，但这只能在本地编辑器里看到效果，而Hexo默认是不支持公式渲染的，因此很多Hexo主题都自带了katex或者mathjax组件来处理渲染数学公式。以我使用的Icarus主题为例，它本身就自带了这两款公式渲染工具，但实际使用效果却不佳，有些公式会显示不正确。究其原因，公式中的_等符号会被错误的识别为markdown语法，导致公式解析错误。本文综合了网上几种方法，得出了一个最为完美的解决方案。

出错原因

为了从根源解决问题，我们首先需要分析出错的原因。Hexo默认使用”hexo-renderer-marked”引擎渲染网页，该引擎会把一些特殊的markdown符号转换为相应的html标签，比如在markdown语法中，下划线_代表斜体，会被渲染引擎处理为<em>标签。因此轮到MathJax引擎渲染的时候，其实公式原文已发生了改变。例如，xix_i在开始被渲染的时候，处理为x<em>i</em>，这样MathJax引擎就认为该公式有语法错误，所以不会渲染。

类似的语义冲突的符号还包括* { }等。

官方解决方案

👉官方文档地址

官方提供了两种结局办法：

如果要输入这样一个公式

正常情况下只要输入：

$$
\hat{x}_{k}=\hat{x}_{k}^{-}+K_{t}\left(y_{k}\right)
$$

但因为含有_歧义字符，需要转义：

$$
\hat{x}\_{k}=\hat{x}\_{k}^{-}+K\_{t}\left(y\_{k}\right)
$$

或者将整个公式用一个额外的HTML标签对包裹起来：

<div>
$$
\hat{x}_{k}=\hat{x}_{k}^{-}+K_{t}\left(y_{k}\right)
$$
</div>

但这两种方法的缺点是：其一，需要额外修改TeX\TeX代码，增添了不必要的麻烦；其二，Typora的实时渲染功能没有了。

img

最佳解决方案

更换Hexo的markdown渲染引擎，hexo-renderer-kramed引擎是在默认的渲染引擎hexo-renderer-marked的基础上修改了一些bug，两者比较接近，功能也是兼容的。

cd到hexo根目录，通过npm安装

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

更换引擎后行间公式可以正确渲染了，但是这样还没有完全解决问题，行内公式的渲染还是有问题，因为hexo-renderer-kramed引擎也有语义冲突的问题。接下来到博客根目录下，找到node_modules\kramed\lib\rules\inline.js，把第11行和第20行做如下修改：

# line 11
-  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
+  escape: /^\\([`*\[\]()#$+\-.!_>])/
# line 20
-  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
+  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

之后重启hexo，问题完美解决！要注意的是这样修改后貌似只支持MathJax渲染器，不支持katex了，注意把主题配置文件中plugins > mathjax的值设置为true。

plugins:
    mathjax: true

跟着这位大佬把渲染器换了

27c58b7d-d610-4378-b646-fc344cb92e40

但是图片还是加载不出来，不管是绝对路径还是相对路径，（同时看到了另外一篇博客）

hexo-latex折腾记 | 曹轩鸣的博客

发现还是hexo-renderer-marked@1.0.0好一点，又换回了老的

下面是引用

hexo的LaTeX可算把我给折腾死了。。。

问题：多行公式无法显示（hexo-renderer-marked，mathjax）

看到网上说是因为渲染引擎把\\渲染成\，然后才交给mathjax渲染公式

都说把hexo-renderer-marked换成hexo-renderer-kramed，然后再node_modules/kramed/lib/rules/inline.js里修改escape项，照做了，确实解决了问题，但是却出现了新的问题：复杂公式显示错乱，遂放弃。

又看到在node_modules/marked/lib/marked.js里修改escape项，失败。

后来发现那些文章都比较老，于是把hexo-renderer-marked换成了2018年的1.0.0版本，再修改escape，终于成功。

最终解决步骤：

cd blog
npm uninstall hexo-renderer-marked
npm install hexo-renderer-marked@1.0.0

编辑node_modules/marked/lib/marked.js

第539行

escape: /^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/,
改成
escape: /^\\([!"#$&'()*+,\-./:;<=>?@\[\]^_`|~])/,

第564行

inline._escapes = /\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/g;
改成
inline._escapes = /\\([!"#$&'()*+,\-./:;<=>?@\[\]^_`|~])/g;

漂亮的解决了矩阵的问题

image-20251009220101059

花了点时间找解决办法，发现图片可以用外链导入，有阿里云图床可以用，完美。正好我有账号，何不就此搞一个

手把手教你搭建阿里云图床(PicGo+Typora+阿里云OSS)，新手小白一看就会-阿里云开发者社区

下面是引用

手把手教你搭建阿里云图床(PicGo+Typora+阿里云OSS)，新手小白一看就会

2024-03-229246发布于江苏

版权

简介： 本文详细介绍了怎样帮助新手小白从注册，购买阿里云OSS，到一步一步配置OSS做为图床，和PicGo、Typora软件连接，配置好关联之后，在使用Typora写文章时，如果需要插入图片，只需要将图片复制粘贴到Typora的编辑区域，就会自动通过PicGo上传到指定图床，自动复制外网能访问的URL并展示，简直不要太方便，极大的解决了编辑文章时复制处理图片链接的痛点。

为什么要搭建图床？

经常在博客写文章或者搭建自己的网站时，肯定需要往里面加图片对吧。有人可能会想，我直接把图片保存在电脑上不就行了？其实这样也不是不可以，但问题来了，如果你想把你的文章转载到别的地方，那些在本地的图片别人是看不到的，你得一个个去复制粘贴，真是够呛！

这时候，如果用阿里云OSS或者腾讯云COS来搭建一个图床，问题就迎刃而解了。用这些服务，处理图片简直高效到不行。说到国内用得多的，腾讯云和阿里云绝对是排前面的，速度快，就是要花点钱。至于GitHub的gitee，那是免费的，但是最近被封了，很多小伙伴都都已经深受其好，而且速度超慢。

之前一直在薅mdnice的免费图床羊毛，这两天发现网站上的图片无法显示了，桑心，只能自己动手来搭建图床，找了一圈，Typora+PicGo+阿里云OSS/腾讯云COS的组合较多，接下来跟着我这个手残党一起来一步一步搭建图床吧，我选择的是阿里云作为例子，这里并不是对腾讯云有什么偏见哦，腾讯云也非常棒，大家自己选择。

阿里云OSS搭建图床

1. 注册登录阿里云

打开阿里云官方网站https://www.aliyun.com/product/oss，点击右上角的登录/注册

image.png

直接打开手机支付宝的扫一扫，扫描页面上的二维码，然后授权登录即可。

image.png

2. 开通OSS服务

如果你还没有开通对象存储服务OSS，那么点击立即开通，现在新人可以免费试用三个月，存储包 20 GB。

image.png

再点击立即开通

image.png

勾选服务协议后，点击立即开通

image.png

3. 创建OSS Bucket

开通成功后，点击管理控制台

image.png

进入控制台之后，点击红框的立即创建或者创建Bucket，都可以创建Bucket

image.png

接下来填一些必填的信息：

  • Bucket 名称：必须全局唯一，和你在游戏中取的名字一样，不能和别人的重名，一旦创建不可更改。
  • 地域：选择“有地域属性”，然后选择一个离自己位置近的地域。
    存储类型：选择“标准存储”即可。
  • 存储冗余类型：推荐选择“本地冗余存储”，“同城冗余存储”更贵，如果网站有较高的并发流量可以选择这个。
  • 读写权限：一定要选择“公共读”，否则平台无法通过公网访问 Bucket 中的内容。
  • 其他选择默认，无需修改。

image.png

点击下面的确认按钮，然后点弹出框的我知道了，确认创建。

image.png

创建成功，点击进入Bucket

image.png

4. 记下Bucket信息

点击概览

image.png

进入概览页面，这里可以看到bucket的整体信息。
用文本软件记下红框画起来的几个信息，等会儿配置PicGo要用：

  • Bucket名称：aitechshare-com
  • Endpoint（地域节点）：xxxx
  • Bucket域名（外网地址）：xxxx

image.png

5. 创建AccessKey

在页面右上角，鼠标放在头像处，在弹出的框里选择AccessKey管理

image.png

在弹出的选项框里，选择继续使用AccessKey。

image.png

点击创建AccessKey，在弹出的安全验证窗口中，选择一个方式来通过安全验证。

image.png

把图中的资料下载成csv，或者复制下来保存好，这个类似于你的密码，一定不要泄露。

image.png

6. 创建子账户用来配置PicGo

重要！上面生成的AccessKey是主账户的，它也可以用来配置picgo，但是如果我们只是需要使用OSS，强烈建议使用子账号来访问这个Bucket，这样可以规避主账户AccessKey或者密码泄露导致的问题。步骤如下：
点击创建 AccessKey，再点击开始使用子用户 AccessKey

image.png

点击创建用户

image.png

填写好登录名称，显示名称，勾选控制台访问，OpenAPI调用访问，其他选择默认就好，点击确认，在弹出的安全验证中选择一种方式完成验证。

image.png

将红框中的AccessKey Id和AccessKey secret复制出来保存好，配置PicGo时要用到。

image.png

7. 配置子账户OSS权限

勾选中用户，点击添加权限，再点击下面两项权限，加到已选择框中。

选择这两项：

  • AliyunOSSFullAccess——管理对象存储服务（OSS）权限
  • AliyunOSSReadOnlyAccess——只读访问对象存储服务（OSS）的权限

image.png

点击确定，授权成功了，这时阿里云相关的配置就弄好了。 之前让保存的信息要记好哦，后面还会用到。

image.png

如果后面不需要使用该账号，点击用户后面的删除选项即可。

配置PicGo

1. 安装PicGo

PicGo是一款功能非常强大的图床工具，支持SM.MS、腾讯COS、GitHub图床、七牛云图床、Imgur图床、阿里云OSS、gitee等多种图床平台。

下载地址：https://github.com/Molunerfinn/PicGo/releases
下载正式版或者测试版都可以，正式版会稳定一些，测试版有一些尝鲜功能，用国内可下载链接进行下载会快一些，我这里选择的是PicGo-Setup-2.4.0-beta.6-x64.exe这个测试版。

image.png

安装好了之后，打开界面是这样的。

image.png

2. PicGo配置阿里云OSS

点击图床设置，阿里云OSS，点击画笔修改。

image.png

填上前面记录好的值即可

  • AccessKey ID（账号）：xxxxxxxxxx
  • AccessKey Secret（密钥）：xxxxxxxxxx
  • 设定Bucket：刚刚在阿里云OSS中创建的Bucket名称
  • 设定存储区域：地域节点中的第一个字段

划重点！这里一定要注意，设定存储区域里要填的是之前记下来的地域节点里面的第一个字段，比如你的地域节点值是oss-cn-shanghai.aliyuncs.com，那么这里只需要填oss-cn-shanghai，切记，否则配置失败无法上传图片。

  • 设定存储路径：自定义，以/结尾（相当于文件夹），例如 img/

填完了记得拉到下面点击确认保存。

image.png

点击设为默认图床

image.png

3. PicGo其他配置

你可以根据喜好来设置文件以时间戳格式命名 和 上传后自动复制URL：

image.png

上传图片，测试成功！

image.png

到这里PicGo就配置完成了

配置Typora

Typora是一款简洁而强大的Markdown编辑器。它提供实时预览功能，让用户可以即时查看文档的渲染效果。Typora采用所见即所得的编辑模式，没有繁杂的标记符号，用户可以专注于写作而不必分心处理格式。此外，Typora还支持数学公式、表格、图像等丰富的Markdown语法和扩展功能。总之，Typora是一款易用且功能丰富的Markdown编辑器，适用于撰写各种类型的文档。

1. 下载安装Typora

登录Typora官网https://typora.io，拉到最下面下载Typora.

image.png

目前Typora已经收费，不过我们还可以考虑用其他办法来使用它，比如这个https://github.com/shuhongfan/TyporaCrack

2. 配置Typora连接PicGo

打开Typora之后，页面非常简洁。
点击左上角文件-偏好设置-图像，插入图片时选择上传图片，上传服务选择PicGo(app)，PicGo 路径选择你安装到本机的PicGo的目录，选中PicGo.exe。
都填好了，不要忘记点击验证图片上传选项来验证一下。

作者提示，可以把这两个都勾上

image-20251009221357724

image.png

验证成功!

image.png

这时候你再打开Picgo，可以看到Typora自动上传了测试图片到Picgo，表示已经连通。

image.png

好了，所有的配置都完成了，你也赶快去试一试吧~

总结

PicGo最大的特点是，可以和阿里云，腾讯云等各大图床软件连接，又可以和Typora结合使用，配置好关联之后，在使用Typora写文章时，如果需要插入图片，只需要将图片复制粘贴到Typora的编辑区域，就会自动通过PicGo上传到指定图床，自动复制外网能访问的URL并展示，简直不要太方便，极大的解决了编辑文章时复制处理图片链接的痛点。

相关链接：
阿里云官网网站
阿里云OSS

成功了！需要注意的是

image-20251009220546064

现在的阿里云读写权限先是只能私有，需要在创建后，进入Bucket这里设置

image-20251009221058240

做完所有现在只需要复制图片进入就可以存到阿里云图床里面啦，非常方便