【Hexo 实用教程】给文章添加部分内容加密，保护敏感信息又不影响阅读

在运营 Hexo 博客时，你可能会遇到这样的需求：想分享一篇文章，但其中某部分内容（如资源链接、隐私笔记、付费内容）不想公开，只给特定人群查看。这时候「部分内容加密」就比整篇加密更灵活 —— 既保留公开内容的可读性，又能保护敏感信息。

效果演示：

密码是文章发布月份（如 202509）

今天就带大家从零实现 Hexo 文章部分加密功能，支持白天 / 黑夜模式适配，新手也能跟着做！

一、为什么需要部分内容加密？

  • 场景 1：分享教程时，把「资源下载链接」加密，需要粉丝留言获取密码（提升互动）。
  • 场景 2：记录个人博客时，公开内容是技术总结，加密部分是私人踩坑笔记（避免泄露隐私）。
  • 场景 3：做会员内容时，公开章节吸引读者，加密后续内容（实现轻量级付费逻辑）。

相比整篇加密，部分加密更符合「半公开半私密」的需求，用户体验更好。

二、实现原理

通过 Hexo 「自定义短代码」功能，用标签

1
{% encrypt 密码 提示语 %}

包裹需要加密的内容，前端通过 JavaScript 验证密码：

  1. 未输入正确密码时：显示密码输入框 + 提示语，加密内容隐藏。
  2. 输入正确密码后：隐藏输入框，显示加密内容（支持 Markdown 格式）。
  3. 样式适配：随博客白天 / 黑夜模式自动切换，不突兀。

三、详细实现步骤（共 5 步）

准备工作

确保你的 Hexo 环境正常（已安装 Node.js、Hexo -cli），博客能正常运行（hexo s 可启动本地服务）。

步骤 1：创建自定义短代码脚本（核心）

短代码是 Hexo 的扩展功能，用于将自定义标签渲染成 HTML。我们需要在 Hexo 根目录创建脚本文件，注册 encrypt 标签。

操作：

  1. 在 Hexo 根目录（如 E:\网站\hexo\blog）下，新建 scripts 文件夹（若已存在则跳过）
  2. 在 scripts 文件夹中新建 partial-encrypt.js 文件，复制以下代码（含密码输入框提示语功能）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
// Hexo 文章部分内容加密脚本
// 注册 encrypt 短代码：{% encrypt 密码 "提示语" %}...{% endencrypt %}
hexo.extend.tag.register('encrypt', function(args, content) {
  // 解析短代码参数：args[0] = 密码，args[1] = 提示语（可选，支持中文）
  const password = args[0];
  const tipText = args[1] ? args[1].replace(/"/g, '') : '密码错误，请重试～'; // 默认提示语
  const customHint = args[2] ? args[2].replace(/"/g, '') : '输入密码即可查看加密内容'; // 输入框下方提示

  // 生成唯一 ID（避免多篇文章/多个加密块冲突）
  const uniqueId = 'encrypt-' + Math.random().toString(36).substr(2, 10);

  // 渲染 HTML 结构（含样式变量，适配白天/黑夜模式）
  return `
    <div class="partial-encrypt" id="${uniqueId}">
      <!-- 密码输入区域 -->
      <div class="encrypt-input-wrap">
        <input 
          type="password" 
          class="encrypt-pwd" 
          placeholder="请输入密码" 
          style="border: 1px solid var(--encrypt-border); background: var(--encrypt-bg); color: var(--encrypt-text);"
        >
        <button 
          class="encrypt-btn" 
          style="background: var(--encrypt-btn-bg); color: white; border: none; cursor: pointer;"
        >
          解锁
        </button>
        <!-- 输入框下方提示语 -->
        <p class="encrypt-hint" style="color: var(--encrypt-text); font-size: 0.9rem; margin: 0.5rem 0 0; opacity: 0.8;">
          ${customHint}
        </p>
        <!-- 密码错误提示 -->
        <p class="encrypt-error" style="color: #ff4d4f; font-size: 0.9rem; margin: 0.5rem 0 0; display: none;">
          ${tipText}
        </p>
      </div>

      <!-- 加密内容（默认隐藏） -->
      <div class="encrypt-content" style="display: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--encrypt-border);">
        <!-- 渲染 Markdown 内容（支持加粗、列表、链接等） -->
        ${hexo.render.renderSync({ text: content, engine: 'markdown' })}
      </div>

      <!-- 密码验证逻辑 -->
      <script>
        (function() {
          const container = document.getElementById('${uniqueId}');
          const pwdInput = container.querySelector('.encrypt-pwd');
          const btn = container.querySelector('.encrypt-btn');
          const errorMsg = container.querySelector('.encrypt-error');
          const content = container.querySelector('.encrypt-content');
          const correctPwd = '${password}';

          // 验证密码函数
          function checkPassword() {
            if (pwdInput.value.trim() === correctPwd) {
              // 密码正确：隐藏输入区，显示内容
              container.querySelector('.encrypt-input-wrap').style.display = 'none';
              content.style.display = 'block';
              errorMsg.style.display = 'none';
            } else {
              // 密码错误：显示提示
              errorMsg.style.display = 'block';
            }
          }

          // 点击按钮验证
          btn.addEventListener('click', checkPassword);
          // 按 Enter 键验证（优化用户体验）
          pwdInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') checkPassword();
          });
        })();
      </script>
    </div>
  `;
}, { ends: true }); // 标记为闭合标签，需搭配 {% endencrypt %} 使用

代码说明：

  • 支持自定义「密码错误提示语」和「输入框下方提示语」（后续会讲如何使用）。
  • 用 CSS 变量（如 --encrypt-border）适配主题模式，避免样式突兀。
  • 支持 Markdown 语法（加密内容可加加粗、列表、链接等）。

步骤 2：配置样式（适配白天 / 黑夜模式）

为了让加密区域和博客主题融合，需要在静态 CSS 文件中定义「主题模式变量」，确保切换白天 / 黑夜时样式自动调整。

操作：

  1. 在 Hexo 根目录的 source 文件夹下，找到 css 文件夹（若没有则新建）
  2. 在 css 文件夹中新建 custom.css 文件（或使用主题自带的自定义 CSS 文件，如安知鱼主题的 _custom/custom.css），复制以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/* 部分内容加密样式：适配白天/黑夜模式 */
:root {
  /* 白天模式变量（根据你的博客主题色调整） */
  --encrypt-border: #e0e0e0;    /* 边框色：浅灰 */
  --encrypt-bg: #ffffff;        /* 背景色：白色 */
  --encrypt-text: #333333;      /* 文字色：深灰 */
  --encrypt-btn-bg: #4096ff;    /* 按钮色：主题主色（如蓝色） */
}

/* 黑夜模式变量（适配主题黑夜模式类名，常见为 darkmode--activated） */
html.darkmode--activated {
  --encrypt-border: #444444;    /* 边框色：深灰 */
  --encrypt-bg: #1a1a1a;        /* 背景色：深色 */
  --encrypt-text: #eeeeee;      /* 文字色：浅灰 */
  --encrypt-btn-bg: #4dabf7;    /* 按钮色：浅色主色（如亮蓝） */
}

/* 输入框和按钮细节优化 */
.encrypt-pwd {
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
  outline: none;
  margin-right: 0.5rem;
  flex: 1;
  min-width: 180px;
}
.encrypt-pwd:focus {
  box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.2); /* 聚焦高亮 */
}
.encrypt-btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.encrypt-btn:hover {
  background-color: var(--encrypt-btn-hover, #1677ff); /* 按钮 hover 色 */
}
.encrypt-input-wrap {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 8px;
  background-color: var(--encrypt-bg);
  border: 1px solid var(--encrypt-border);
}

/* 响应式适配（移动端优化） */
@media (max-width: 768px) {
  .encrypt-input-wrap {
    padding: 0.8rem;
  }
  .encrypt-pwd {
    min-width: 100%;
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
  .encrypt-btn {
    width: 100%;
  }
}

关键提醒：

  • 若你的主题黑夜模式类名不是 darkmode--activated（如部分主题用 dark），需修改 html.darkmode--activated 为 html.dark（可通过浏览器 F12 查看主题切换时 html 标签的类名）
  • 可根据博客主色调整 --encrypt-btn-bg（如主题是红色，改为 #ff4d4f），让按钮更融入页面

步骤 3：确保 CSS 被主题加载

如果博客主题没有自动加载 custom.css，需要手动引入，否则样式不会生效。

操作（以安知鱼主题为例）：

  1. 进入主题文件夹：themes/anzhiyu/layout/_partial
  2. 找到 head.ejs 文件（或 head.njk，根据主题模板引擎而定），在 <head> 标签内添加以下代码：
1
2
<!-- 引入部分加密的自定义 CSS -->
<link rel="stylesheet" href="/css/custom.css">

或者在主题的配置文件_config.anzhiyu.yml中引入：

1
2
3
4
5
6
7
8
9
10
11
# ========================================

# 48. 注入代码配置（自定义CSS/JS）

# ========================================

inject:

  head:                        # 注入到<head>前

    - <link rel="stylesheet" href="/css/custom.css">

验证：

启动博客后（hexo s），打开浏览器 F12 → 「Elements」→ 搜索 custom.css，若能找到对应的 <link> 标签，说明加载成功

步骤 4：在文章中使用部分加密

配置完成后，在 Markdown 文章中用

1
{% encrypt %}

标签包裹需要加密的内容即可，支持自定义密码和提示语

基础用法（默认提示语）：

1
2
3
4
5
6
7
8
9
10
11
12
13
# 【教程】如何用 Hexo 搭建个人博客

这是公开内容：Hexo 是一款基于 Node.js 的静态博客框架，轻量且高效...

<!-- 加密部分：密码为 123456，默认提示语 -->
{% encrypt 123456 %}
## 隐藏内容：Hexo 插件推荐
1. hexo-deployer-git：一键部署到 GitHub Pages
2. hexo-prism-plugin：代码高亮插件
3. hexo-blog-encrypt：整篇文章加密（本文用的是部分加密）
{% endencrypt %}

这是后续公开内容：搭建完成后，记得执行 `hexo clean && hexo g && hexo s` 预览...

进阶用法（自定义提示语）：

支持自定义「密码错误提示」和「输入框下方提示」，格式为： 

1
{% encrypt 密码 "密码错误提示语" "输入框下方提示语" %}

示例：

1
2
3
4
5
{% encrypt 202509 "密码不对哦～提示：2025年9月" "密码是文章发布月份（如 202509）" %}
## 加密资源：Hexo 主题包下载
- 链接：https://pan.baidu.com/s/xxxxxx（提取码：hexo）
- 说明：包含 3 款热门主题（安知鱼、Butterfly、Matery）
{% endencrypt %}

步骤 5：测试效果并发布

  1. 清除 Hexo 缓存（必做！否则配置不生效）：
1
hexo clean
  1. 启动本地服务预览：
1
hexo s
  1. 打开浏览器访问 http://localhost:4000，查看文章：
    • 未输入密码：显示输入框 + 提示语，加密内容隐藏。
    • 输入正确密码：隐藏输入框，显示加密内容。
    • 切换主题模式：加密区域样式自动适配（边框、背景色变化）。
  2. 确认效果无误后，部署到博客平台（如 GitHub Pages）：
1
hexo d

四、常见问题 FAQ（避坑指南）

1. 提示「unknown block tag: encrypt」（标签不识别）

  • 原因：脚本文件路径错误（未放在根目录 scripts 文件夹），或脚本未被加载。
  • 解决：
    • 确认脚本路径：根目录/scripts/partial-encrypt.js（与 themes、source 同级）。
    • 执行 hexo clean 清除缓存，再重新生成。

2. 样式不生效（输入框 / 按钮很丑）

  • 原因：custom.css 未被主题加载，或 CSS 变量与主题冲突。
  • 解决：
    • 检查 head.ejs 中是否添加了 <link rel="stylesheet" href="/css/custom.css">。
    • 通过浏览器 F12 查看元素样式，确认 var(--encrypt-border) 等变量是否被正确解析。

3. 黑夜模式下样式没变化

  • 原因：主题黑夜模式的类名与 CSS 中的 html.darkmode--activated 不匹配。
  • 解决：
    • 切换到黑夜模式，按 F12 查看 html 标签的类名（如 dark）。
    • 修改 CSS 中 html.darkmode--activated 为 html.dark（或对应类名）。

4. 加密内容中的 Markdown 不渲染（显示原始语法）

  • 原因：脚本中未启用 Markdown 渲染引擎。
  • 解决：确认脚本中 hexo.render.renderSync 包含 engine: 'markdown'（代码中已默认添加）。

五、进阶优化（可选）

1. 提高密码安全性（避免明文存储）

目前脚本中密码是明文存储在 HTML 中，可通过 CryptoJS 对密码进行哈希处理（需额外引入库）：

  1. 安装 CryptoJS：npm install crypto-js --save。
  2. 在脚本中加密密码：
1
2
const CryptoJS = require('crypto-js');
const correctPwdHash = CryptoJS.MD5(password).toString(); // 加密密码
  1. 前端验证时对比哈希值：
1
2
const inputHash = CryptoJS.MD5(pwdInput.value.trim()).toString();
if (inputHash === correctPwdHash) { ... }

置统一密码

若多篇文章需要相同密码，可在 _config.yml 中配置全局密码：

1
2
3
# 根目录 _config.yml
partial_encrypt:
  default_password: 202409

然后在脚本中读取全局密码：

1
2
const defaultPwd = hexo.config.partial_encrypt.default_password;
const password = args[0] || defaultPwd;

3. 添加密码记忆功能（Cookie）

通过 Cookie 记录用户输入的正确密码，刷新页面后无需重新输入：

1
2
3
4
5
6
7
8
// 密码正确时设置 Cookie
document.cookie = `encrypt_pwd_${uniqueId}=${correctPwd}; path=/; max-age=86400`; // 有效期 1 天
// 页面加载时读取 Cookie
const cookiePwd = document.cookie.replace(/(?:(?:^|.*;\s*)encrypt_pwd_${uniqueId}\s*=\s*([^;]*).*$)|^.*$/, '$1');
if (cookiePwd === correctPwd) {
  content.style.display = 'block';
  container.querySelector('.encrypt-input-wrap').style.display = 'none';
}

六、总结

通过「自定义短代码 + CSS 变量适配」，我们实现了 Hexo 文章的部分内容加密功能，既满足了隐私保护需求，又不影响公开内容的阅读体验。整个教程从脚本创建到样式适配，再到问题解决，覆盖了新手可能遇到的所有场景，跟着步骤做就能成功。

如果你的博客也有「半公开内容」的需求，不妨试试这个方案，让博客功能更灵活～ 有问题欢迎在评论区留言讨论！

ps: 有很多地方没有完善，包括黑夜白天模式切换，短代码识别问题，浏览器兼容等等，后续慢慢完善，欢迎大家一起讨论，一起完善。