typora和hexo格式冲突的问题汇总和解决方案

问题一：渲染图片时引用路径的冲突

问题描述

在typora里写文章时插入图片，我本来设置的是保存在与文章同级的目录里面，这是网上大部分教程推荐的做法。

比如说我放在我的hexo博客下面的文章，路径是D:\blog\my-blog01\source_posts，那么当我在这个路径里写文章插入图片时，typora会自动在这个路径里创建一个media文件夹，然后把图片放进去。

这样做本来是没问题的，但是当我把文章上传到hexo博客网站上时，问题就出现了：网站上没法显示正确的图片，只能显示图片所在的路径。

问题原因

我发现这和hexo generate的执行逻辑有关

hexo generate 执行过程（简化版）
│
├── 扫描 source/ 下所有内容
│   │
│   ├── 如果是 _posts/ 目录
│   │   ├── .md 文件 → 渲染成 HTML → 输出到 public/（保持原有目录结构）
│   │   └── 其他文件（图片、视频等）→ 直接忽略（不复制）
│   │
│   └── 如果是其他目录（images/、css/、js/ 等）
│       └── 全部原样复制到 public/（保持原有目录结构）
│
└── 生成完成，public/ 即为最终可部署的静态网站

解决方案

根据这个逻辑，之前的设置是行不通的，因为post下面的图片文件会被hexo忽略，所以我修改了我的typora偏好设置：

工具	解析基准	实际指向位置
Typora	以 source/_posts/ 为基准	./ 当前目录 → ../ 退回上级 source/ → 进入 images/ → 找到图片
Hexo	以 source/ 为基准（路径不变）	./../ 在生成后映射为 public/images/ → 找到图片

1. 我告诉它的指令

![](./../images/xxx.png)

这个路径翻译成人话就是：“从我现在的位置，先往后退一步，再进到 images 文件夹里，找到 xxx.png 这张图。”

2. Typora 是怎么听的

Typora 打开文章时，它的“现在的位置”是：D:/blog/my-blog01/source/_posts/

于是它照做：

• ./ = 我现在就在 source/_posts/
• ../ = 往后退一步，到 source/
• images/ = 进入 source/images/
• 找到 xxx.png

所以 Typora 能找到并显示图片

3.hexo是怎么做的

只要图片放在 source/ 下的任意位置（除了 _posts/ 内部），Hexo 都会把它复制到 public/ 里。我文章里写的相对路径只要能正确指向这个位置，浏览器就能加载到。

具体的例子

• 图片放在 source/images/xxx.png → Hexo 复制到 public/images/xxx.png
• 文章里写 ../images/xxx.png → 浏览器从当前位置退到上一级（source/ 对应 public/），找到 public/images/xxx.png

缺陷

这样设置有一个很明显的缺陷，就是我的typora以后想要写带图片的文章，只能在这个目录下写。

但是考虑到以后我会把我的这个hexo博客网站作为我主要的记录、输出内容的阵地，这个缺陷目前是可以接受的。

问题二：LaTex数学公式的代码无法渲染在hexo上

问题描述

我发现之前上传的洛谷P1003题解无法正确加载LaTex数学公式，显示在typora上是好的，但在hexo博客网站上不行。会显示下面的代码。

对于 $30%$ 的数据，有 $n \le 2$。

对于 $50%$ 的数据，$0 \le a, b, g, k \le 100$。

对于 $100%$ 的数据，有 $0 \le n \le 10^4$, $0 \le a, b, g, k \le {10}^5$​。

问题原因

Typora 默认支持 LaTeX 渲染，所以显示正常。但 Hexo 默认不会渲染 LaTeX，需要额外安装插件，否则 $ 符号会原样显示在网页上

解决方案

安装 LaTeX 渲染插件

在博客根目录执行：

bash

npm install hexo-filter-mathjax --save

配置插件

在 _config.yml 中添加：

mathjax:
  enable: true
  per_page: true

在文章的 Front-matter 中开启

在需要使用数学公式的文章头部添加：

yaml

---
title: 洛谷P1003题-铺地毯-题解
mathjax: true
---