Hexo -45- 博客文章加密

本文最后更新于：2023年4月15日 晚上

用 Hexo 写技术博客三年多了，慢慢的有一些想要记录但是不想公开的内容，在此需求下产生了对博客加密的需求。

加密手段

貌似静态页面加密起来并不容易，我也不太懂，好在眼下也没什么多高级的秘密内容，随便有个好用的加密功能就可以了。

比较知名的加密插件有 Hexo-Blog-Encrypt，hexo-encrypt等，大家用的最多的是 Hexo-Blog-Encrypt ，使用方便，我也跟着用。

开源地址：https://github.com/D0n9X1n/hexo-blog-encrypt

安装插件

安装 hexo-blog-encrypt 插件

1
npm install --save hexo-blog-encrypt

或

1
yarn add hexo-blog-encrypt (需要 Yarn)

加密配置

并不是所有文章都需要加密的，因此需要配置哪些文章加密，同时会有 密码、摘要信息、提示信息、密码错误信息、加密主题信息 需要配置，主要支持两种方法 —— 文章头部信息块、站点配置文件。

文章信息头配置

在信息头配置的范围仅限于当前文章：

1
2
3
4
5
6
7
8
9
10
title:  Hexo -45- 博客文章加密
mathjax: false
date: 2023-04-11 14:02:04
password: zywvvd
tags: [Hexo, Website]
categories: [Hexo, Website]
message: 密码是 zywvvd
abstract: 有东西被加密了, 请输入密码查看 ~
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试 ~
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容 ~

这就是本文的信息头，加密后就是这篇博客的效果。

站点配置文件配置

对于 message，abstract，wrong_pass_message， wrong_hash_message 等信息可以有站点级别的默认配置，这就需要放到 _config.yml 里了：

1
2
3
4
5
6
7
8
9
# Security
encrypt: # hexo-blog-encrypt
  abstract: 有东西被加密了, 请输入密码查看.
  message: 您好, 这里需要密码.
  tags:
  - {name: tagName, password: 密码A}
  - {name: tagName, password: 密码B}
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

配置优先级

文章信息头 > _config.yml (站点根目录下的) > 默认配置

已知问题

在部分博客中, 解密后部分元素可能无法正常显示或者表现, 这属于已知问题. 目前的解决办法是通过自行查阅自己的博客中的代码, 了解到在 onload 事件发生时调用了哪些函数, 并将这些函数挑选后写入到博客内容中.

对 TOC 进行加密

如果你有一篇文章使用了 TOC，你需要修改模板的部分代码。这里用 landscape 作为例子：

  • 你可以在 hexo/themes/landscape/layout/_partial/article.ejs 找到 article.ejs。
  • 然后找到 <% post.content %> 这段代码，通常在30行左右。
  • 使用如下的代码来替代它:
1
2
3
4
5
6
7
8
9
10
11
<% if(post.toc == true){ %>
  <div id="toc-div" class="toc-article" <% if (post.encrypt == true) { %>style="display:none" <% } %>>
    <strong class="toc-title">Index</strong>
      <% if (post.encrypt == true) { %>
        <%- toc(post.origin, {list_number: true}) %>
      <% } else { %>
        <%- toc(post.content, {list_number: true}) %>
      <% } %>
  </div>
<% } %>
<%- post.content %>

禁用 Log

如果你想要禁止使用 Log, 你可以在 _config.yml 中增加一个 silent 属性, 并将其设置为 true.

1
2
3
# Security
encrypt: # hexo-blog-encrypt
  silent: true

这样就会禁止如 INFO hexo-blog-encrypt: encrypting "{Blog Name}" based on Tag: "EncryptedTag". 的日志.

加密主题

之前, 我们尝试使用 template 关键字来让用户能修改自己的主题. 后来发现真不是一个好主意. 所以我们现在引入了主题: theme 关键字.

你可以简单的使用 theme 在 _config.yml 里或者文章头, 如下:

文章信息头

1
2
3
4
5
6
7
8
9
10
11
12
---
title: Hello World
tags:
- 作为日记加密
date: 2016-03-30 21:12:21
password: mikemessi
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
theme: xray
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---

在 _config.yml

1
2
3
4
5
6
7
8
9
10
# Security
encrypt: # hexo-blog-encrypt
  abstract: 有东西被加密了, 请输入密码查看.
  message: 您好, 这里需要密码.
  tags:
  - {name: tagName, password: 密码A}
  - {name: tagName, password: 密码B}
  theme: xray
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

你可以在线挑选你喜欢的主题,并应用到你的博客中:

效果测试

图片

公式

$$ \begin{array}{c} e=mc^2 \\ e^{i \theta }=\cos \theta+i \sin \theta \end{array} $$

mermaid

graph TD
 A[start]
 B[1]
 C(2)
 D((3))
 E[end]
 A --> B 
 A -->C
 A-->D
 B --> E
  C --> E
   D --> E

需要引入 js 的 html 元素显示

该加密插件无法帮我们引入 js 文件，哪怕将html 代码写入文章都不行，但是可以通过修改主题模板的方法解决该问题。

参考资料



文章链接：
https://www.zywvvd.com/notes/hexo/website/45-blog-encrypt/blog-encrypt/

Hexo > Website
#Hexo #Website
Hexo -45- 博客文章加密
https://www.zywvvd.com/notes/hexo/website/45-blog-encrypt/blog-encrypt/
作者
Yiwei Zhang
发布于
2023年4月11日
许可协议