Hexo相关基础和配置
Hexo的基本命令
- 创建制定布局的文章：
hexo new [layout] <title>，其中layout参数的默认值是post。
- 将草稿类布局转换为post布局：
hexo publish“草稿布局文章的标题”。
- 渲染，生成静态文件的文件夹public：
hexo generate。 - 清理缓存和原先的public文件：
hexo clean。 - 将public文件夹部署到远端：
hexo deploy。
Hexo的渲染器和Mathjax
先说结论，Hexo渲染器的作用是将Markdown转换为对应的HTML代码，而Mathjax的作用则是去解析HTML代码当中的数学公式并基于SVG或HTML+CSS将其转换为美观的数学公式。
Hexo的渲染器很多，这里就介绍hexo-renderer-pandoc。它实际上是Hexo的一个插件（用于调用Pandoc将Markdown转换为对应的html代码）。Hexo默认用的渲染器hexo-renderer-marked效果很糟糕，执行以下命令就可以将渲染器切换为hexo-renderer-pandoc。
npm uninstall hexo-renderer-marked --save # 移除默认渲染器
npm install hexo-renderer-pandoc --save # 安装 Pandoc 渲染器MathJax 是一个开源的 JavaScript 库，用于在网页中高质量地解析并可视化数学公式。与kaTex相比Mathjax除了支持Latex的完整语法，还支持相关的拓展包语法。在Hexo根目录中添加以下配置就可以自己的博客完美地显示数学公式了！
# 支持公式
pandoc:
args:
- "--mathjax" # 启用 MathJax 支持
- "--wrap=preserve" # 防止代码换行破坏公式
extensions:
- "+tex_math_dollars" # 允许 $...$ 行内公式
- "+raw_tex" # 保留原始 LaTeX 代码
mathjax:
tags: none # or 'ams' or 'all'
single_dollars: true # enable single dollar signs as in-line math delimiters
cjk_width: 0.9 # relative CJK char width
normal_width: 0.6 # relative normal (monospace) width
append_css: true # add CSS to pages rendered by MathJax
every_page: false # if true, every page will be rendered by MathJax regardless the `mathjax` setting in Front-matter
packages: # extra packages to load
extension_options: {}
# you can put your extension options here
# see http://docs.mathjax.org/en/latest/options/input/tex.html#tex-extension-options for more detail$$
\begin{align}
\sum_{j\ne i}x_{ij}=&1&,\forall i \in V\\
\sum_{i\ne j}x_{ij}=&1&,\forall j \in V
\end{align}
$$category和tag的区别
知乎用户鲁大荒对Categories和Tags的理解我感觉挺有道理：“Catagory是共性因素，Tag是个性因素；对使用者而言，前者是被动引导，后者是主动引导；前者有内部层级关系，后者没有内部层级关系；二者也有共性，可以互为转换，但catagory的量不宜过大，否则就失去了索引的意义和效果。”所以之后我的博客在categories上就计划分成五类：
- 计算机技术
- 数学建模与运筹学
- 机器学习
- 生活
- 其它
而tags就根据每篇文章的内容取一个或多个，让tags在文章所属的特定category下进一步凸显自身的特性。
Hexo中的路径问题
首先得讲一下路径分隔符/和\的区别。它俩都可以作为路径分隔符，但是在linux，macos和web和各种编程语言如python中不支持使用\作为路径分隔符，python里面其实也可以用r取消转义…所以平时写路径就最好用/作为分隔符，特别是在用hexo写博客的时候，如果不用/作为路径分隔符，你把博客deploy之后是看不到里面的图片的。
另一个需要注意的点就是public文件夹和source文件夹的结构不同，比如咱们正在写位于_posts文件夹下的subime这篇文章，然后咱想插入一张图片，一般来说咱会使用相对路径写成./images/sublime.xxx.png。但当你预览时会发现根本找不到这张图片！！！为什么？就是因为public文件夹和source文件夹结构不同。在写图片地址的时候必须得告诉浏览器怎么在public文件夹中找到对应的图片，所以正确的写法可以是。
从根路径开始找<center> <img src="/images/sublime/2.png" weight='50%' height='50%'/> Fig1. 创建项目 </center>
还是用相对路径<center> <img src="../../../../images/sublime/2.png" weight='50%' height='50%'/> Fig1. 创建项目 </center>
相对路径表示
-
.表示当前文件所处的目录 -
..表示当前文件所处目录的上一级目录 -
/表示的是根目录
例如当前目录下有一个xxx.png，那么路径可以直接写成’xxx.png’,也可以写成’./xxx.png’
text source文件夹结构D:. ├─abouts ├─archives ├─categories ├─datasets ├─images │ ├─Deap源码学习 │ ├─Hexo相关基础和配置 │ ├─sublime │ ├─子回路消除约束 │ ├─数据集 │ ├─海大的四季 │ ├─科研指南 │ └─顶部图 ├─tags ├─_data ├─_drafts └─_posts
text public文件夹结构D:. ├─2025 │ └─05 │ ├─05 │ │ └─海大的四季 │ ├─11 │ │ ├─Hexo相关基础和配置 │ │ └─Sublime │ └─17 │ ├─Deap源码学习 │ ├─子回路消除约束 │ └─科研指南 ├─abouts ├─archives │ └─2025 │ └─05 ├─categories │ ├─数学建模与运筹学 │ ├─生活 │ ├─计算机技术 │ └─论文阅读 ├─css ├─datasets ├─images │ ├─Deap源码学习 │ ├─sublime │ ├─子回路消除约束 │ ├─数据集 │ ├─海大的四季 │ ├─科研指南 │ └─顶部图 ├─img ├─js │ └─search └─tags ├─Deap ├─Hexo ├─Sublime ├─TSP ├─VRP ├─大连海事大学 ├─快捷键 ├─景象照 ├─研究生生涯规划 ├─科研方法论 └─遗传算法
Hexo部署报错
解决方法是进入先.deploy_git文件夹,执行，于是又考虑将depoly中repo的设置从https协议转换成ssh协议——目前暂时没出过报错。git config --global core.autocrlf false命令，然后在depoly就不会报错了。用这个方法还是会时不时报错
性能优化
我的博客是部署在github上的，国内访问的速度非常慢。经过检查，页面加载时间主要是耗在了图片加载上，经过一番折腾最终使用gitHub提供的原始文件直链服务解决了这个问题。基本原理就是通过raw.githubusercontent.com的国内镜像raw.gitmirror.com绕过 gitHub页面渲染，直接返回文件的原始数据。这样做能提速的原理是gitHub在全球部署了内容分发网络（CDN），raw.gitmirror.com的请求会被路由到离用户最近的边缘节点，减少物理距离带来的延迟。
<img src="/images/sublime/2.png" weight='50%' height='50%'/> # 一般写法
<img src="https://hub.gitmirror.com/https://raw.githubusercontent.com/YuanshengShe/YuanshengShe.github.io/main/images/sublime/2.png" weight='50%' height='50%'/> # 使用直链服务的国内镜像的写法除了使用直链服务加速，还可以直接通过对图片进行压缩来提速，例如将图片转换为webp格式或将默认的jsdelivr的CDN切换成国内镜像或其它CDN服务。
参考资料
微信
