Skip to main content

隐藏代码模块的开发

· 3 min read
Kyle
Kyle
CTO of the Ph.D. Creative Station

本篇文章介绍了如何开发和使用 ProtectedCodeBlock 组件，实现对文章内容（如代码块、文本、Markdown 等）的密码保护。通过密码哈希验证机制，只有输入正确密码的用户才能查看受保护内容，适用于教学答案、课程资料等需要有条件访问的场景。文章详细说明了组件特性、用法、哈希生成方法及实际案例，帮助开发者高效集成内容保护功能，提升文档安全性与交互体验。

用法说明​

ProtectedCodeBlock 是一个用于保护文章内容的 React 组件，通过密码验证机制来控制内容的访问权限。适用于教学场景中的习题答案、课程内容、敏感代码等需要有条件展示的内容。

组件特性​

  • 密码保护：使用哈希验证确保安全性
  • 内容隐藏：未验证时显示密码输入框，验证后显示实际内容
  • 多种内容支持：支持代码块、文本、Markdown 等各种内容格式
  • 会话记忆：在同一浏览器会话中，验证过的密码会被记住
  • 用户友好：简洁的输入界面和清晰的提示信息

基本用法​

首先需要导入组件：

import ProtectedCodeBlock from '@site/src/components/ProtectedCodeBlock';

基本语法结构：

<ProtectedCodeBlock passwordHash="哈希值">
  {/* 需要保护的内容 */}
</ProtectedCodeBlock>

密码哈希生成​

为了安全起见，组件使用密码的哈希值而非明文密码。你可以使用以下方法生成哈希值：

// 使用 crypto-js 或类似工具
import CryptoJS from 'crypto-js';
const hash = CryptoJS.MD5("你的密码").toString().substring(0, 8);

当然，用 Wolfram Mathematica 也可以生成哈希值：

Hash["1234", "CRC32", "HexString"]
(* Out[1]= "9be3e0a3" *)

常用密码的哈希值示例：

  • 密码 1234 → 哈希值 9be3e0a3

使用示例​

保护代码块的写法：

<ProtectedCodeBlock passwordHash="9be3e0a3">
// 这里是代码块内容
</ProtectedCodeBlock>

保护多行内容的写法：

<ProtectedCodeBlock passwordHash="9be3e0a3">

这里是受保护的文本内容。

- 可以包含列表
- 可以包含 **粗体** 和 *斜体*
- 可以包含各种 Markdown 格式

</ProtectedCodeBlock>

注意事项​

  1. 哈希值安全性：请妥善保管原始密码，哈希值可以公开在代码中
  2. 内容格式：组件内部支持完整的 Markdown 语法
  3. 空行要求：在 <ProtectedCodeBlock> 标签后和结束标签前需要空行
  4. 会话记忆：同一会话中验证过的密码会被记住，刷新页面后需重新输入

使用案例​

文本用于测试新开发的文章内容保护模块<ProtectedCodeBlock>。该模块允许用户通过输入密码来访问受保护的内容。

课前热身练习

请用 Python 编写一个函数，输入一个整数，返回该整数的平方。

你的解决方案如下：

def square(n):
    """返回整数的平方"""
    return n**2
print(square(5))  # 输出：25

在上述函数的基础上，打印 1 到 10 的平方。你的解决方案如下 (全文密码均为:1234)：

🔒

受保护的内容

请输入密码以查看此内容

如何用 Python 的函数式编程风格来实现这个功能？你的解决方案如下：

🔒

受保护的内容

请输入密码以查看此内容