hexo

本文最后更新于：2023-08-09 09:57

前言

这篇文章是记录我在使用 hexo 的时候遇到的问题。有些步骤我在第一遍安装的时候没有问题，一笔而过，后来重新安装的时候，莫名出了很多问题，真是让人摸不着头脑。

本篇文章是 hexo 结合 fluid 主题来写的，对于其他主题可能有不适用的问题。

站点配置与主题配置

参考链接：

在对 hexo 进行配置的时候，两个配置文件，“站点配置“和“主题配置”，在配置的时候不要搞混了。可以参考配置指南中的覆盖配置步骤，覆盖后，只需要在覆盖的配置文件_config.fluid.yml中操作就可以了。

包的安装与卸载

hexo 依赖于 npm（Node Package Manager），npm 是世界上最大的软件注册表。准确来说是 nodejs 包管理和分发工具，类似于 Ubuntu 中的 apt 吧。hexo 很多功能都需要使用 npm 安装包进行支持，在使用这些包之前，我们不妨先学习一下这些包的安装和卸载。

安装：

1
npm install <package_name>

npm 安装包的版本依赖于package.json文件。我们可以在hexo init执行完成后的文件目录中找到该文件，如果文件中没有描述安装哪个版本，那么最新版本的包就会被安装。

我们安装的包都是“本地”包，但是我感觉叫“局部”准确一点儿。我们使用npm install命令安装的包的路径在node_modules目录下（这个目录在hexo init后也会生成），所以我们不必担心我们的操作会影响全局环境。

卸载：

1
npm uninstall <package_name>

如果要从package.json文件中添加或删除依赖，需要在命令后添加参数--save：

1
npm uninstall <package_name> --save

数学公式

参考链接：

Fluid 用户手册给出了两种使 hexo 支持 LaTeX 数学公式的方式：

  1. 使用 hexo 官方的 hexo-math 插件
  2. 使用主题内置的 LaTeX 功能（推荐）

而第二种又分为两种引擎：

  • mathjax（推荐）
  • katex

可能是 fluid 主题支持的原因，如果选择 mathjax 引擎我们不需要执行额外的操作，只需要在主题配置中进行配置：

1
2
3
4
5
post:
  math:
    enable: true
    specific: true
    engine: mathjax  # 别忘记

不像 katex 还需要进行渲染器更换。不过好像 katex 所支持的公式可以更复杂，但目前 mathjax 就够用。我尝试换过渲染器，但之后生成的内容有限瑕疵，emmm。

完成后执行hexo clean，书写公式：

1
2
3
$$
E=mc^2
$$

E=mc2E=mc^2

specific 建议开启，该参数的意思是只有在文章 format-matter 中指定math: true才会在文章页启动公式转换，不包含公式的页面可以提高加载速度。

emoji 表情

参考链接：

emoji 👿 表情，我使用的是hexo-filter-github-emojis 插件，首先安装该插件：

1
npm install hexo-filter-github-emojis --save

安装完成后，在站点配置文件中填入：

1
2
3
4
5
6
7
# hexo-filter-github-emojis
githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

流程图

参考链接：

fluid 主题是支持mermaid渲染流程图的，在主题配置文件中可手动开启该功能：

1
2
3
4
5
post:
  mermaid:
    enable: true
    specific: false
    options:

之后再在 md 文件中使用mermaid的语法编写流程图即可。

关于 specific，可以参考上面的数学公式部分。

RSS 订阅

参考链接：

给博客添加 Rss 订阅，需要用到hexo-generator-feed插件，安装：

1
npm install hexo-generator-feed --save

然后进入到站点配置文件，在下方加入：

1
2
3
4
5
# 订阅 RSS
feed:
  type: atom
  path: atom.xml
  limit: false

在 GitHub 中给出的样例配置参数有很多，其实不需要那么多，上面这些就够了。

在站点配置文件中配置完成后，我们还需要在主题配置中添加：

1
rss: /atom.xml

这样生成的 Rss 订阅链接就是：yourdomain.com/atom.xml 。

我想大多数人都跟我一样，只知道这是个订阅功能，不怎么重视，感觉很鸡肋。我用过之后，感觉这是一个被严重低估的功能，用了之后才知道有多香。

现在是一个信息爆炸的时代，其中有一部分原因是现在第三方平台太多了。以程序员为例：csdn、公众号、博客园、掘金等等等等。很多程序员有了一定水平之后，又想在行业上建立知名度，就需要在这些平台上发文章，获得行业的认同与关注。但是一个平台的流量总是有限的，那怎么办？由于各个平台的数据不互通，很多人的方法是在各个平台上都发，这在我看来无异于往互联网倒垃圾，结果就是搜索引擎的同质化文章太多。之后人们再使用搜索引擎时，就会浪费大量的时间，知名度没提高多少，反感度倒是增加了不少。

互联网就像是一个没有回收机制的垃圾桶一样，信息只会越填越多，越多越乱；而且在各个平台上都发相同的文章对于提高行业知名度也没有什么帮助，甚至会招致厌烦。

那怎么办呢？怎么解决呢？

我的答案是：直接把平台所有权握在自己手里，即，建立个人博客。

建立的博客就是个人据点，以据点为根基，不断丰富枝叶，最后成为个人名片。

评论

参考链接：

目前不想添加评论功能，只因我没有查看邮件的习惯，而且还有人填充垃圾信息什么的，省下这个麻烦吧。

加载视频

参考链接：

在往文章中直接插入B站视频时，会遇到插入的视频过小的问题。比如：

1
2
3
<iframe src="//player.bilibili.com/player.html?aid=8185383&bvid=BV1zs411b7zr&cid=13531695&page=1" scrolling="no"
        border="0" frameborder="no" framespacing="0" allowfullscreen="true"> 
    </iframe>

很矮，很难看（<iframe标签默认的高度为150px，不知道是不是这个的关系），很影响体验。于是在网上找了下前辈的答案，答案如下：

1
2
3
4
5
6
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
    <iframe src="//player.bilibili.com/player.html?aid=8185383&bvid=BV1zs411b7zr&cid=13531695&page=1" scrolling="no"
        border="0" frameborder="no" framespacing="0" allowfullscreen="true"
        style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;">
    </iframe>
</div>

我们来看这段代码。从B站中直接复制出来的视频是从iframe标签开始的，大佬给在外面加了一个div标签。这个 div 标签的内部样式为：

1
style="position: relative; width: 100%; height: 0; padding-bottom: 75%;"
  • posotion：relative，相对定位元素，常用来作为绝对元素的容器块
  • width：100%，宽度为 100%
  • height：0
  • padding-bottom：75%

<div>标签是一个块元素，我们利用块元素默认占据一行大小的特性，就不需要用样式来调整视频的宽度了，默认地宽度便是文章的宽度。而 div 的高度，由 padding-bottom 定义，高度为宽度的 75%。

从B站直接复制出来的iframe标签是没有style样式的，我们来看该样式：

  • position：absolute，绝对定位的元素相对于最近已定位的父元素，即 div。
  • width：100%，宽度填充
  • height：100%，高度填充
  • left：0
  • top：0

把 iframe 标签引入的视频放入到 div 标签中，然后铺满 div 标签。这里面还有其他技术细节，我分析起来吃力了，先到此为止吧。

还有个问题就是，文章中嵌入的视频默认是`360p`的，如果要提高画质，点击一下就会跳转到B站，这点有点烦，影响体验，但好像没有解决方式。。。

微信朋友圈像公众号一样分享

参考链接：

从公众号分享到微信朋友圈的时候，它是有图片和标题的，是做了优化的。

那我们从博客分享到朋友圈的话，不能只丢个链接吧。那要如何才能跟公众号的分享效果一样呢？使用下面这个链接：

将abnerchou.me改为文章的地址就可以了，然后访问，会让用微信扫一扫。微信“扫一扫”之后，会进入文章页，点击右上角的分享，分享到朋友圈就可以了。

但是呢，有个缺点，就是没有缩略图。。。

这个功能应该有 hexo 的插件，安装后直接在文章上就可以分享，但是我不想找了，就这样吧。

COS 部署 hexo

参考链接：

这个我在之前的博客搭建文章里提到过，使用的是腾讯云的对象存储，这个服务是要收费的，但好在价格还算便宜，一般人也负担的起，我记得一年的话应该是十来块吧。

要使用 cos 部署 hexo，在部署的时候，需要使用插件hexo-deployer-cos，使用如下命令安装：

1
npm install hexo-deployer-cos --save

然后在站点配置文件中，将deploy的内容替换：

1
2
3
4
5
6
deploy: 
  type: cos
  secretId: yourSecretId
  secretKey: yourSecretKey
  bucket: yourBucketName-yourAPPID
  region: yourRegion

上面这些要填入信息从哪获取呢？登录网页版腾讯云，在账号中心-访问管理-访问密钥- API密钥管理处获得appId，secretId，secretKey，bucket是存储桶名称，region是存储桶地域（比如 ap-beijing）。

点击扩展

在看 GitHub 上的 README 的时候，看别人写的内容可以跟下来似的，我觉得挺好的，就复制下来了。要使用下面的格式：

1
2
3
4
5
<details><summary>Click to expand</summary>
    <p>
    contents
    </p>
</details>
Click to expand

A regular 32-bit Windows binary with a typical set of mitigations (ASLR, DEP, /GS), but nothing out of the ordinary (no CFG, RFG etc.). It is a “multithreaded” evaluator of arithmetic expressions (e.g. (1+2*3)/4), which uses the Fibers Windows-specific mechanism to switch between calculations. It uses the XMM0-7 (SSE2) registers to perform the computation. It is statically linked and has a system call to make exploitation easier.

There are two bugs:

  1. Semi-continuous stack buffer overflow in converting the infix representation of the expression to the Reverse Polish Notation one. It’s in the stack frame of the main function. However, since the overflowing structures have large alignment holes, it is possible to leave the stack cookie intact, but overwrite the return address of the function.
  2. The XMM context is not switched between executions of fibers. When the src and dst addresses of memcpy have the same 16-byte alignment, the function uses the XMM registers to transfer data in memory, and then doesn’t clean them up. While std::cout zeros XMM0-XMM5, XMM6-7 keep the left-over values used by memcpy. These values can then be leaked through the calculation results of worker fibers, and may disclose information such as the image base address or stack address.

The exploitation process is as follows (see exploit.py for more details).

  1. Create a “++++++” expression, which will be later used to read the value of the XMM6 register and return it as the output (through XMM0).
  2. Create a "+"x256 expression. When its RPN representation is copied from stack to heap, and if the addresses align correctly, memcpy leaks a valid code pointer through XMM6.
  3. Run the evaluation of both expressions, which will yield the leaked pointer as the output of the 1st one (or junk bytes, in which case we have to reconnect and try again).
  4. Create an expression of "0+"x131 followed by a 64-bit double-encoded ROP chain making up system("cmd.exe"). This will keep the original value of the stack cookie, but overwrite the return-address and one dword after it.
  5. Call “quit”, which will trigger the mini-ROP and invoke a shell.

Now we can type in type flag.txt and the flag is ours. :)

文章加密

参考链接：

吐槽

这个 hexo 啊，用起来不会那么顺的，可定制化太高，需要的组件太多，最后在功能实现上面可能不尽人意。

主要的一点是，hexo 的渲染器太多了，详见，不过文章是19年的，时过境迁，内容对现在来说可能已经过时了，参考着看。

工具
#hexo
hexo
https://ahtoh.cn/2022/10/29/hexo/
作者
ahtoh
发布于
2022-10-29 16:06
许可协议