Hexo相关基础和配置
Hexo的基本命令
- 创建制定布局的文章：
hexo new [layout] <title>，其中layout参数的默认值是post，注意如果title有空格则必须写在引号里面。
- 将草稿类布局转换为post布局：
hexo publish“草稿布局文章的标题”。
- 渲染，生成静态文件的文件夹public：
hexo generate。 - 清理缓存和原先的public文件：
hexo clean。 - 将public文件夹部署到远端：
hexo deploy。 - 本地预览草稿文件：
hexo s --draft。
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}
\min & \quad \sum c_i x_i \\
\text{s.t.} & \quad \sum a_{ij}x_j \leq b_i, && i = 1,\dots,k \\
& \quad x_j \geq 0, && j = 1,\dots,n
\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://gh.llkk.cc/https://raw.githubusercontent.com//YuanshengShe/YuanshengShe.github.io/main/images/sublime/2.png" weight='50%' height='50%'/> # 使用直链服务的国内镜像的写法
<img src="https://gh.llkk.cc/https://raw.githubusercontent.com//YuanshengShe/YuanshengShe.github.io/main/images/sublime/2.png" weight='50%' height='50%'/>除了使用直链服务加速，还可以直接通过对图片进行压缩来提速，例如将图片转换为webp格式或将默认的jsdelivr的CDN切换成国内镜像或其它CDN服务。
在Hexo中使用自定义字体
在themes/butterfly/source/下创建fonts文件夹，将想用的字体HarmonyOS_Sans_SC_Regular.ttf和JetBrainsMono-Regular.ttf放进fonts文件夹。在themes/butterfly/source/css/下创建font.css。
font.css@font-face{ font-family: 'JetBrains Mono'; font-display: swap; src: url('../fonts/JetBrainsMono-Regular.ttf') format("truetype"); } @font-face{ font-family: 'HarmonyOS Sans SC'; font-display: swap; src: url('../fonts/HarmonyOS_Sans_SC_Regular.ttf') format("truetype"); } body { font-family: 'JetBrains Mono','HarmonyOS Sans SC'; }
最后将自己的css注入。
在_config.butterfly.yml的inject下添加<link rel="stylesheet" href="/css/font.css">
给博客下方添加动漫人物
下载js库hexo-helper-live2d，和对应卡通模型。
npm install --save hexo-helper-live2d
npm install live2d-widget-model-shizukulive2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: live2d-widget-model-shizuku
display:
position: right
width: 150
height: 300
mobile:
show: true
react:
opacity: 0.7Hexo该加载动画
参考给博客添加加载动画这篇文章，就是改一下pug和styl文件。
磨砂渐变效果
新建一个css，然后输入以下内容，再把这个css注入到butterfly主题中。
磨砂渐变效果/* ===== 通用毛玻璃基础样式 ===== */ .card-widget { background: linear-gradient( -45deg, #a8d8ff33, /* 淡天蓝（约 20% 不透明） */ #77b5ff33, /* 明亮蓝（约 20% 不透明） */ #6a8dff33, /* 紫调蓝（约 20% 不透明） */ #a3b8ff33 /* 柔紫蓝（约 20% 不透明） */ ) !important; } /* ===== 动画定义 ===== */ @keyframes Gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /*主页文章列表页面卡片*/ #recent-posts > .recent-post-items .recent-post-item { background: linear-gradient( -45deg, #a8d8ff33, /* 淡天蓝（约 20% 不透明） */ #77b5ff33, /* 明亮蓝（约 20% 不透明） */ #6a8dff33, /* 紫调蓝（约 20% 不透明） */ #a3b8ff33 /* 柔紫蓝（约 20% 不透明） */ ) !important; } /*导航栏*/ .nav-fixed > #nav { background: linear-gradient( -45deg, #a8d8ff33, /* 淡天蓝（约 20% 不透明） */ #77b5ff33, /* 明亮蓝（约 20% 不透明） */ #6a8dff33, /* 紫调蓝（约 20% 不透明） */ #a3b8ff33 /* 柔紫蓝（约 20% 不透明） */ ) !important; backdrop-filter: blur(10px); } /*文章页面*/ .layout>#post { background:linear-gradient( -45deg, #a8d8ff33, /* 淡天蓝（约 20% 不透明） */ #77b5ff33, /* 明亮蓝（约 20% 不透明） */ #6a8dff33, /* 紫调蓝（约 20% 不透明） */ #a3b8ff33 /* 柔紫蓝（约 20% 不透明） */ ) }
文章链接中文编码问题
如果标题中含有中文文章链接会非常非常长，可以使用 abbrlink 插件实现链接地址转数字，使用流程如下。
npm install hexo-abbrlink --save修改_config.yml对应属性permalink: posts/:abbrlink.html # abbrlink config abbrlink: alg: crc32 # Algorithm used to calc abbrlink. Support crc16(default) and crc32 rep: hex # Representation of abbrlink in URLs. Support dec(default) and hex drafts: false # Whether to generate abbrlink for drafts. (false in default) force: false # Enable force mode. In this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had an abbrlink. (false in default) writeback: true # Whether to write changes to front-matters back to the actual markdown files. (true in default)
22端口被防火墙屏蔽
ssh: connect to host github.com port 22: Connection timed out
fatal: Could not read from remote repository.报错现实无法通过ssh连接到github，这是由于22端口被墙了，在.ssh下新建config文件，然后添加以下内容，设置ssh通过443端口连接github即可解决问题。
Host github.com
Hostname ssh.github.com
Port 443关于注释框怎么换行
注释框里面想要换行，得现在上一段行末打一些空格，然后再空一行。如果没有打空格，直接空行，会认为你是想要跳出注释框。
方案编码是什么？
方案编码是一个比较抽象的概念，它包含一个方案所需要的所有信息。例如，在切割下料问题中，每个方案都应该包含以下两个方面的信息：
- 使用什么长度的木材？
- 这个木材应该怎么切割？
也就是说每一组
在实际操作上就可以写出
参考资料
微信
.png)