跳至主要內容

文章加密功能实现总结

2026/9/13大约 7 分钟

文章加密功能实现总结

✅ 实现完成

Demius 主题的文章加密功能已完整实现，包括全文加密和部分内容加密两种模式。

📁 文件清单

1. 核心功能文件

Shortcode

  • themes/demius/layouts/shortcodes/encrypt.html
    • 部分内容加密 shortcode
    • 支持自定义密码和提示文字
    • SHA256 哈希密码存储

CSS 样式

  • themes/demius/assets/css/_encryption.css
    • 加密界面样式
    • 全屏遮罩层样式
    • 文章卡片加密标识样式
    • 暗色模式适配
    • 移动端响应式优化

JavaScript

  • themes/demius/assets/js/_encryption.js
    • 部分加密逻辑
    • 全文加密逻辑
    • 密码验证（SHA256）
    • sessionStorage 状态管理
    • PJAX 兼容

2. 模板修改

文章详情页

  • themes/demius/layouts/_default/single.html
    • 添加全文加密的 data 属性
    • 密码、提示文字注入

文章卡片

  • themes/demius/layouts/partials/post-card.html
    • 添加加密标识显示
    • 与置顶标识对称排列
    • 全文/部分加密区分

基础模板

  • themes/demius/layouts/_default/baseof.html
    • 注入加密配置到 JavaScript
    • 全局配置传递

3. 配置文件

Hugo 配置

  • hugo.toml
    • 加密功能开关
    • 提示文字配置
    • 错误提示配置

4. 集成文件

主 CSS

  • themes/demius/assets/css/main.css
    • 引入 _encryption.css

主 JavaScript

  • themes/demius/assets/js/main.js
    • 引入 _encryption.js

PJAX

  • themes/demius/assets/js/_simple-pjax.js
    • 添加 initEncryption() 调用

5. 文档和示例

使用指南

  • encryption-guide.md
    • 完整的功能说明
    • 使用方法和示例
    • 配置说明
    • 故障排查
    • FAQ

示例文章

  • content/posts/文章加密功能使用示例.md

    • 部分加密示例
    • 多种使用场景
    • 实际应用案例

  • content/posts/全文加密示例文章.md

    • 全文加密示例
    • 密码：fulltext2025

🎯 功能特性

1. 全文加密

使用方法：

---
title: "加密文章"
password: "myPassword"
passwordHint: "自定义提示（可选）"
---

文章内容...

特点：

  • 🖼️ 全屏遮罩层
  • 🔒 整篇文章加密
  • 💬 自定义提示文字
  • 🎨 精美动画效果
  • 🏷️ 文章卡片显示"🔒 全文加密"标识

2. 部分内容加密

使用方法：

---
encrypted: true  # 显示"部分加密"标识
---

{{}}
加密内容
{{}}

特点：

  • 📦 灵活的内容加密
  • 🔐 每个加密块独立密码
  • 💡 可自定义提示文字
  • 📝 支持完整 Markdown 语法
  • 🏷️ 文章卡片显示"🔐 部分加密"标识

3. 安全机制

  • 🔐 SHA256 哈希：密码使用 SHA256 哈希存储
  • 💾 Session 存储：解锁状态仅在当前会话有效
  • 🚫 密码隐藏：密码不在网页源代码中明文显示
  • ⚡ 客户端验证：快速的密码验证响应

4. 用户体验

  • 🎨 精美界面：锁图标动画、平滑过渡
  • 💬 友好提示：清晰的密码提示和错误反馈
  • ⌨️ 键盘支持：Enter 键快速解锁
  • 📱 移动优化：完美的移动端体验
  • 🌓 暗色模式：自动适配主题

5. 文章卡片标识

  • 🏷️ 醒目标识：紫色渐变徽章
  • 📍 对称排列：与置顶标识在同一行
  • 🎯 清晰区分：全文/部分加密分别标识
  • 🎨 美观设计：锁图标 + 文字

6. PJAX 兼容

  • 🔄 自动重新初始化
  • ⚡ 无缝页面切换
  • 💾 状态保持
  • 🎯 完美适配

⚙️ 配置说明

hugo.toml

[params.encryption]
  enable = true                          # 启用加密功能
  fullHint = "🔒 此文章已加密，请输入密码查看完整内容"
  partialHint = "🔐 此部分内容已加密，请输入密码查看"
  wrongPasswordHint = "❌ 密码错误，请重试"

Front Matter（全文加密）

---
password: "yourPassword"                 # 必填：文章密码
passwordHint: "自定义提示"               # 可选：覆盖全局提示
---

Front Matter（部分加密标识）

---
encrypted: true                          # 显示"部分加密"标识
---

Shortcode（部分加密）

{{}}
内容
{{}}

🎨 样式定制

修改加密标识颜色

编辑 themes/demius/assets/css/_encryption.css：

.post-card .encryption-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

[data-theme="dark"] .post-card .encryption-badge {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
}

修改锁图标颜色

.encryption-icon {
  color: var(--liushen-theme-color);
}

修改按钮样式

.encryption-submit {
  background: var(--liushen-theme-color);
}

.encryption-submit:hover {
  background: var(--liushen-theme-color-hover);
}

📊 使用场景

1. 教育场景

  • 📚 练习题与答案分离
  • 📝 考试答案保护
  • 🎓 分级学习内容

2. 内容分级

  • 📖 基础内容免费，高级内容付费
  • 🎯 会员专享内容
  • 💎 VIP 特权内容

3. 隐私保护

  • 📔 个人日记
  • 🔒 私密文章
  • 👥 团队内部文档

4. 商业应用

  • 💼 付费课程
  • 📊 数据报告
  • 🎁 限时优惠信息

🔧 技术实现

1. 密码加密流程

// 1. 用户输入密码
const password = input.value;

// 2. 计算 SHA256 哈希
const inputHash = await sha256(password);

// 3. 与存储的哈希对比
if (inputHash === storedHash) {
    // 密码正确
    showContent();
} else {
    // 密码错误
    showError();
}

2. 状态管理

// 保存解锁状态（sessionStorage）
sessionStorage.setItem(`encrypted_${id}`, 'unlocked');

// 检查解锁状态
const unlocked = sessionStorage.getItem(`encrypted_${id}`);

3. PJAX 集成

// PJAX 切换后重新初始化
if (window.initEncryption) {
    window.initEncryption();
}

📱 响应式设计

桌面端

  • 📏 最大宽度 400px 的输入框
  • 🎨 居中对齐的遮罩层
  • 💫 完整的动画效果

移动端

  • 📱 输入框和按钮纵向排列
  • 👆 更大的触摸区域
  • 📐 全宽度按钮
  • 🎨 适配小屏幕

🌓 暗色模式支持

所有组件完整支持暗色模式：

  • 🎨 加密界面背景和文字颜色
  • 🔘 按钮和输入框样式
  • 🏷️ 文章卡片标识颜色
  • 💫 动画效果适配

⚠️ 安全说明

✅ 适合用于

  • 内容分级访问
  • 防止搜索引擎索引
  • 基础的内容保护
  • 教育和娱乐场景

❌ 不适合用于

  • 高度敏感的机密信息
  • 需要服务器端验证的场景
  • 法律法规要求的数据保护
  • 金融或医疗等敏感数据

原因

  • 静态网站的客户端加密
  • 技术人员可查看哈希值
  • 无法追踪访问记录
  • 缺少服务器端验证

📚 文档资源

用户文档

  • encryption-guide.md - 完整使用指南
    • 功能介绍
    • 使用方法
    • 配置说明
    • FAQ

示例文章

  • content/posts/文章加密功能使用示例.md

    • 部分加密多种示例
    • 实际使用场景

  • content/posts/全文加密示例文章.md

    • 全文加密演示
    • 密码：fulltext2025

🎯 测试清单

功能测试

  • [x] 全文加密：密码正确解锁
  • [x] 全文加密：密码错误提示
  • [x] 全文加密：自定义提示文字
  • [x] 部分加密：密码正确解锁
  • [x] 部分加密：密码错误提示
  • [x] 部分加密：自定义提示文字
  • [x] 多个加密块：独立验证
  • [x] 文章卡片：显示加密标识
  • [x] PJAX：切换后功能正常
  • [x] sessionStorage：状态保存

样式测试

  • [x] 亮色模式：界面正常
  • [x] 暗色模式：界面正常
  • [x] 桌面端：布局正确
  • [x] 平板端：布局正确
  • [x] 移动端：布局正确
  • [x] 动画效果：平滑自然
  • [x] 卡片标识：与置顶对称

兼容性测试

  • [x] PJAX：完全兼容
  • [x] Markdown：完整支持
  • [x] 代码块：正常显示
  • [x] 图片：正常显示
  • [x] 表格：正常显示

🚀 使用建议

1. 密码管理

  • 使用强密码（8位以上）
  • 定期更换密码
  • 妥善保管密码记录

2. 提示设计

  • 适度提示，不要太明显
  • 使用 emoji 增加视觉吸引力
  • 保持简洁明了

3. 用户沟通

  • 说明密码获取方式
  • 及时响应密码请求
  • 提供良好的用户体验

📊 性能影响

文件大小

  • CSS：~4KB（压缩前）
  • JavaScript：~8KB（压缩前）
  • 总增加：~12KB

运行时性能

  • ⚡ SHA256 计算：< 1ms
  • 🔄 DOM 操作：最小化
  • 💾 存储操作：sessionStorage（快速）
  • 🎨 动画：CSS 过渡（硬件加速）

页面加载

  • 📦 模块化加载
  • ⚡ 按需初始化
  • 🎯 不影响其他功能

✅ 总结

文章加密功能已完整实现并集成到 Demius 主题中：

核心功能

✅ 全文加密
✅ 部分内容加密
✅ SHA256 安全保护
✅ 文章卡片标识

用户体验

✅ 精美界面设计
✅ 平滑动画效果
✅ 友好的错误提示
✅ 完整的移动端适配

技术特性

✅ PJAX 完全兼容
✅ 暗色模式支持
✅ 响应式设计
✅ Markdown 完整支持

文档资料

✅ 详细使用指南
✅ 完整示例文章
✅ 配置说明文档
✅ FAQ 支持

实现状态：✅ 完成
版本：v2.6.0
更新日期：2025-10-28

🎉 开始使用

  1. 全局启用

    [params.encryption]
  enable = true

  2. 全文加密

    ---
password: "yourPassword"
---

  3. 部分加密

    {{}}
内容
{{}}

享受安全的内容分享体验！🔒

最近更新: