参考：hexo-blog-encrypt

写在前面

  1. 有时候我们可能需要写一些可能是个人情感宣泄或者收费技术内容,通过密码验证的方式让人不能随意浏览。
  2. 但是hexo在这方面并不能直接实现。
  3. 为了解决这个问题,我们需要安装 hexo-blog-encrypt扩展

特性

  1. 一旦你输入了正确的密码，它就会被存储在本地浏览器的localStorage中。按个按钮，密码将会被清空。若博客中有脚本，它将被正确地执行。
    支持按标签加密。
  2. 所有的核心功能都是由原生的API所提供的。在Node.js中，我们使用Crypto。在浏览器中，我们使用Web Crypto API。
  3. PBKDF2，SHA256被用作复制密钥，AES256-CBC被用作加解密，我们还使用HMAC来验证密文的来源，并确保其纠正。
  4. 广泛地使用Promise来进行异步操作，从而确保线程不被杜塞。
  5. 过时的浏览器将无法正常显示，因此，请升级您的浏览器。

在线演示

请参阅演示页面，所有密码都是hello

实现方法

安装

npm install --save hexo-blog-encrypt或者 yarn add hexo-blog-encrypt(需要安装 Yarn)

快速开始

将 “password” 字段添加到您文章信息头就像这样.

1
2
3
4
5
---
title: Hello World
date: 2022-012-21 21:18:02
password: hello
---

再使用 hexo clean && hexo g && hexo s 在本地预览加密的文章.

设置优先级

文章信息头 > 按标签加密

小结

当然这或许并不是最优解，你也可以参考一下高级设置部分，这或许更适合你。

更实用的补充(1)

这不过是补充。

你要知道的

基础用法说明
  • password: 是该博客加密使用的密码
  • abstract: 是该博客的摘要，会显示在博客的列表页
  • message: 这个是博客查看时，密码输入框上面的描述性文字
  • wrong_pass_message: 输入错误提示
  • ···

首先在 站点配置文件 _config.yml 添加如下字段

1
2
3
4
5
6
7
8
9
10
11
12
13
# 安全
encrypt: # hexo-blog-encrypt
  abstract: 这里有东西被加密了，需要输入密码查看哦。
  message: 您好, 这里需要密码.
  tags:
  - {name: tagName, password: 密码A}
  - {name: tagName, password: 密码B}
  template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input- 
  container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"> 
  </div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div> #可以删除该 
  template部分
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

博客文章添加加密字段,修改文章头部信息如下

1
2
3
4
5
6
7
8
9
10
11
---
title: Hello World
tags:
- 加密文章tag
date: 2022-12-21 21:12:21
password: muyiio
abstract: 这里有东西被加密了，需要输入密码查看哦。
message: 您好，这里需要密码。
wrong_pass_message: 抱歉，这个密码看着不太对，请再试试。
wrong_hash_message: 抱歉，这个文章不能被纠正，不过您还是能看看解密后的内容。
---

更实用的补充(1.2)

对博文禁用 Tag 加密

只需要将博文头部的password 设置为 "" 即可取消 Tag 加密.

举个栗子：

1
2
3
4
5
6
7
8
9
---
title: Callback Test
date: 2019-12-21 21:54:07
tags:
    - A Tag should be encrypted
password: ""
---

Use a "" to diable tag encryption.

更实用的补充(配置优先级)(2)

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

关于 Callback 函数(2.1)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: Callback Test
date: 2022-12-21 21:54:07
tags:
    - Encrypted
---

This is a blog to test Callback functions. You just need to add code at the last of your post like following:

It will be called after the blog decrypted.

<script>
    // 添加一个 script tag 与代码在文章末尾.
    alert("Hello World");
</script>

对 TOC 文章进行加密(2.2)

如果您有一篇文章使用了TOC，您需要修改模板的部分代码。以landscape主题作为示例
你可以在 hexo/themes/landscape/layout/_partial/article.ejs 找到 article.ejs。
然后找到TOC 的生成代码 <% 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(2.3)

If you want to disable the logging, you can add a silent property in _config.yml and set it to true. 如果你想要禁止使用 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". 的日志.

加密主题(3)

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

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

在 站点配置文件 _config.yml 添加如下字段

1
2
3
4
5
6
7
8
9
10
# Security
encrypt: # hexo-blog-encrypt
  abstract: Here's something encrypted, password is required to continue reading.
  message: Hey, password is required here.
  tags:
  - {name: encryptAsDiary, password: passwordA}
  - {name: encryptAsTips, password: passwordB}
  theme: xray
  wrong_pass_message: Oh, this is an invalid password. Check and try again, please.
  wrong_hash_message: Oh, these decrypted content cannot be verified, but you can still have a look.

汉化：

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: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

修改文章头部信息如下

1
2
3
4
5
6
7
8
---
title: Theme test
date: 2022-12-21 21:54:07
tags:
    - A Tag should be encrypted
theme: xray
password: "hello"
---

汉化：

1
2
3
4
5
6
7
8
9
10
11
12
---
title: Theme test
tags:
    - 一个标签应该加密
date: 2022-12-21 21:54:07
password: mikemessi
abstract: 这里有东西被加密了，需要输入密码查看哦。
message: 您好, 这里需要密码.
theme: xray
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---

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

theme部分的替换
  • default
  • blink
  • shrink
  • flip
  • up
  • surge
  • wave
  • xray

效果展示

运行你的博客，访问相应的加密文章之后，会提示输入密码才能查看文章

code

写在最后

最后要明白，鱼和熊掌不可兼得，这里也是存在一些问题的。

就我目前已知的例如：

  • 如果你开启了 字数统计功能 的话，那么本文的字数显示会出现异常。

  • 加密文章内部分脚本会失效， 比如：代码复制失效······