由于我的博客内容涉及多个领域，难免会触及一些具有争议性的议题，可能会忤逆部分不特定读者的观念或利益。因此，我认为有必要研究如何在 Astro + Fuwari 框架下实现对特定页面的加密保护——当然，这种加密应尽量避免「掩耳盗铃」，不要干出来大家f12搜索一下就可以直接获取密码和实际全文内容的抽象事。

特别感谢我亲爱的两位 AI 开发伙伴——Claude Code 和 Roo Code 的协助。接下来，我将简要介绍这一功能的核心思路与实现路径。出于隐私与安全的考量，我目前已将博客的仓库转为私有，因此无法直接向大家展示完整的源码修改内容。但我会尽可能详细地说明与该加密功能相关的所有关键修改点，方便有类似需求的朋友参考实现。

第一节是核心思路，第二节讲解了核心文件的修改原因，第三节是页面源代码

一、核心：如何给一个静态博客实现加密功能？#

纯静态博客方便也就方便在它没有后端服务器，因此基本上不需要付出任何托管成本；但它麻烦也就麻烦在没有后端服务器，因为我们失去了传统网站中负责验证身份、分发内容的有效工具。

在动态网站（如 WordPress 或其他基于 Node_js/PHP/Java 的网站）中，加密内容的流程通常是这样的：

服务器接收到用户请求。
服务器判断该页面是否需要密码。
如果需要，服务器先向用户发送一个密码输入页面。
用户提交密码后，服务器在后端进行验证。
验证通过，服务器才从数据库或文件中读取受保护的内容，将其渲染成 HTML，再发送给用户的浏览器。整个过程中，受保护的原始内容始终安全地待在服务器上，绝不会在验证通过前泄露给客户端。

但对于我们静态博客，所有的 HTML 文件都已提前生成并部署。当用户请求一个 URL 时，托管服务（如 Vercel, Netlify, GitHub Pages）做的唯一一件事就是——把对应的 HTML 文件原封不动地发送过去。没有中间环节，没有验证逻辑。

这就引出了一个最常见，也最无效的“伪加密”方案：前端隐藏。

这种方法通常用 JavaScript 实现：页面加载后，先用 CSS 把文章内容 display: none; 藏起来，然后弹出一个密码框。用户输入密码后，JavaScript 判断输入的字符串是否等于预设的密码，如果相等，再把文章的 display 改回 block。

当然，该方法的缺陷也显而易见：文章的全部原始内容已经完整地躺在发送过来的 HTML 文件里了。任何一个稍懂技术的用户，只需在浏览器里按下 F12 打开开发者工具，或者直接右键“查看网页源代码”，就能毫不费力地找到被隐藏的全文，密码系统形同虚设，是绝对需要避免的。

那么，有没有一种方法，既能享受静态网站的便利，又能实现真正的加密呢？

答案是肯定的。核心思路是将验证和内容分发这两个本来应由服务器完成的工作，拆分到两个不同的阶段来完成。我的方案是 「构建时加密+客户端解密」。

第一步：构建时加密#

这一阶段发生服务器构建环境，在 Vercel 等平台运行 pnpm run build 命令时，Astro 作为静态站点生成器（SSG），会遍历我所有的 Markdown 文章并将其转换为 HTML。

这时，我们可以让 Astro 在处理每篇文章时，检查其 frontmatter（头部元信息）中是否包含 encrypted: true 这个标记。如果包含该标记，就触发加密流程。

我使用了 crypto-js 作为加密库，将整篇文章渲染后的 HTML 内容作为明文，用我在 frontmatter 中设置的 password 作为密钥，进行 AES 加密。加密后，原本可读的 HTML 会变成一长串毫无意义的乱码，这就是密文。

为了避免将明文密码暴露在前端，我不会直接把密码存起来。而是使用 bcryptjs 库，将原始密码进行加盐哈希，生成一个不可逆的哈希值。这个哈希值的作用是用来比对，而不是用来解密。最后，Astro 生成的最终 HTML 页面里，完全不包含原始文章内容。取而代之的是一个空壳页面，里面只存放着两样东西：文章内容的密文和密码的哈希值。

经过这一步，部署到线上的 HTML 文件本身就是“安全”的。即使被直接下载，攻击者得到的也只是一堆无法阅读的密文和一个无法反解的密码哈希。

第二步：运行时解密#

这一阶段发生在访客的浏览器里，当他们访问那个被加密的页面时：

用户交互：访客首先看到的不是文章，而是一个密码输入界面。
客户端验证与解密：当访客输入密码并点击“解锁”后，页面内嵌的 JavaScript 脚本会执行以下操作：
- 验证密码：脚本会先用 bcryptjs 将访客输入的密码进行同样的哈希计算，然后与页面中预存的那个哈希值进行比对。如果二者匹配，证明密码正确。这是为了快速验证密码，避免用错误的密码去尝试解密，浪费计算资源。
- 解密内容：密码验证通过后，脚本会使用访客刚刚输入的明文密码（它只存在于浏览器内存中，不会被发送到任何地方）作为密钥，调用 crypto-js 来解密页面中存储的文章密文。
动态渲染：一旦密文被成功解密，脚本就会将还原出的、包含完整格式的 HTML 内容，动态地插入到页面的相应容器中。

至此，访客才能看到文章的真实内容。通过这种方式，我们成功地在没有后端的情况下，模拟出了一套安全的“验证-解密-渲染”流程，实现了对静态内容的有效保护。

二、核心文件修改#

为了实现这个功能，我们新增了两个包：bcryptjs 用于密码的哈希处理，以及 crypto-js 用于内容的对称加密。

1
{
2
  "dependencies": {
3
    "bcryptjs": "^2.4.3",
4
    "crypto-js": "^4.2.0"
5
  }
6
}

核心文件分别为页面模板和密码验证组件。

1. 构建时加密：`src/pages/posts/[...slug].astro`#

这个文件是博客文章的动态路由和页面模板。加密的核心逻辑之一在这里实现，即在网站构建时对需要加密的文章进行处理。

首先，我们在文章的 Markdown 文件头部通过 frontmatter 来控制一篇文章是否需要加密。当一篇文章需要加密时，我们添加 encrypted: true 和 password: 'your-password' 字段。

1
---
2
title: '这是一篇加密文章'
3
encrypted: true
4
password: 'your-secret-password'
5
---
6

7
这里是文章的正常内容...

在 [...slug].astro 文件中，我们通过以下步骤实现加密：

检测加密标记：在组件的脚本区域，我们首先检查文章的 frontmatter 中是否存在 entry.data.encrypted 和 entry.data.password。
密码哈希：为了安全起见，我们不希望将明文密码直接暴露在前端。因此，我们使用 bcryptjs 在构建时为密码创建一个安全的哈希值。这个哈希值将用于在客户端验证用户输入的密码是否正确。
src/pages/posts/[...slug].astro
```
1
const passwordHash = bcrypt.hashSync(entry.data.password, 10);
```
内容加密：我们直接获取文章的原始 body（即包含 frontmatter 的完整 Markdown 文本），并使用 crypto-js 对其进行加密。
src/pages/posts/[...slug].astro
```
1
const { body } = entry;
2
const encrypted = CryptoJS.AES.encrypt(body, entry.data.password).toString();
```
传递数据：最后，我们将加密后的内容 encrypted 和密码哈希 passwordHash 组合成一个对象 encryptedData，并通过 props 传递给密码保护组件 <PasswordProtection />。
src/pages/posts/[...slug].astro
```
1
encryptedData = {
2
  content: encrypted,
3
  hash: passwordHash
4
};
```

在页面的 HTML 结构中，我们使用一个三元运算符来根据 entry.data.encrypted 的值决定是显示密码保护组件还是文章的原始内容。

1
{entry.data.encrypted ? (
2
    <div>
3
        <PasswordProtection
4
          encryptedData={encryptedData}
5
          slug={entry.slug}
6
          class="mb-6 rounded-xl password-container onload-animation"
7
        />
8
        {/* 加密内容容器，内容将通过JavaScript动态解密显示 */}
9
        <div id={`article-content-${entry.slug}`} class="mb-6 markdown-content onload-animation hidden encrypted-content">
10
            {/* 内容将在验证密码后动态插入 */}
11
        </div>
12
    </div>
13
) : (
14
    <div class="mb-6 markdown-content onload-animation">
15
        <Markdown class="w-full">
16
            <Content />
17
        </Markdown>
18
    </div>
19
)}

2. 客户端解密：`src/components/PasswordProtection.astro`#

这个组件负责在客户端（用户的浏览器中）处理密码验证和内容解密。它接收从 [...slug].astro 传递过来的 encryptedData 和 slug。

它的工作流程如下：

显示密码表单：组件的核心是一个密码输入框和提交按钮，它会覆盖在原本应该显示文章内容的位置。
动态加载依赖：为了优化性能，该组件的内联脚本 (<script is:inline>) 会动态地从 CDN 加载 crypto-js 和 bcryptjs 库。这样，只有在需要加密功能的页面上，用户的浏览器才会下载这些脚本。
处理表单提交：当用户输入密码并提交时：
- 验证密码：脚本使用 bcrypt.compareSync() 函数，将用户输入的密码与从服务器（构建时）传来的 encryptedData.hash 进行比较。这个过程完全在客户端进行，不会有网络请求，保证了验证的瞬时性。
  src/components/PasswordProtection.astro
```
1
const isValidPassword = dcodeIO.bcrypt.compareSync(inputPassword, encryptedData.hash);
```
- 解密内容：如果密码验证通过，脚本会使用用户输入的正确密码作为密钥，通过 CryptoJS.AES.decrypt() 来解密 encryptedData.content。
  src/components/PasswordProtection.astro
```
1
const decryptedBytes = CryptoJS.AES.decrypt(encryptedData.content, inputPassword);
2
const decryptedContent = decryptedBytes.toString(CryptoJS.enc.Utf8);
```
- 显示内容：解密后的 HTML 内容会被动态插入到页面中预留的 div (#article-content-${slug}) 中，同时密码输入框的遮罩层会被隐藏。
本地缓存：为了提升用户体验，一旦用户成功解锁了一篇文章，脚本会使用 localStorage 将解锁状态和解密后的内容缓存起来。这样，当用户下次访问同一篇文章时，脚本会直接从缓存中读取并显示内容，无需再次输入密码。
src/components/PasswordProtection.astro
```
1
localStorage.setItem(`fuwari-unlocked-${slug}`, 'true');
2
localStorage.setItem(`fuwari-content-${slug}`, decryptedContent);
```

3.工作流程总结#

整个加密功能的流程可以总结为以下几个步骤：

构建时 (Build-Time)：
- Astro 遍历所有 Markdown 文章。
- 如果文章 frontmatter 包含 encrypted: true，则触发加密流程。
- 使用 bcryptjs 将明文密码哈希化。
- 使用 crypto-js 和明文密码加密文章内容。
- 将加密内容和密码哈希传递给前端组件。
客户端 (Client-Side)：
- 页面加载，显示密码输入框遮罩层。
- 用户输入密码。
- 浏览器中的 bcryptjs 脚本将输入密码与哈希进行比对。
- 如果匹配，浏览器中的 crypto-js 脚本使用该密码解密文章内容。
- 解密后的内容被注入到页面中，遮罩层消失。
- 解锁状态被存入 localStorage，方便用户下次访问。

通过这种方式，我们实现了一个安全且高效的静态博客页面加密方案。它将加密过程放在构建时，保证了服务器端没有动态解密的开销；同时在客户端进行验证和解密，避免了明文密码在网络中传输的风险。

三、页面源代码#

导入包之类的我这里就不放了

1.`[...slug].astro`#

1
import path from 'node:path'
2
import { getCollection } from 'astro:content'
3
import License from '@components/misc/License.astro'
4
import Markdown from '@components/misc/Markdown.astro'
5
import I18nKey from '@i18n/i18nKey'
6
import { i18n } from '@i18n/translation'
7
import MainGridLayout from '@layouts/MainGridLayout.astro'
8
import { getDir, getPostUrlBySlug } from '@utils/url-utils'
9
import { Icon } from 'astro-icon/components'
10
import { licenseConfig } from 'src/config'
11
import PostMetadata from '../../components/PostMeta.astro'
12
import ImageWrapper from '../../components/misc/ImageWrapper.astro'
13
import { profileConfig, siteConfig } from '../../config'
14
import { formatDateToYYYYMMDD } from '../../utils/date-utils'
15
import PasswordProtection from '../../components/PasswordProtection.astro'
16
import bcrypt from 'bcryptjs'
17
import CryptoJS from 'crypto-js'
18

19
export async function getStaticPaths() {
20
  const blogEntries = await getCollection('posts', ({ data }) => {
21
    return import.meta.env.PROD ? data.draft !== true : true
22
  })
23
  return blogEntries.map(entry => ({
24
    params: { slug: entry.slug },
25
    props: { entry },
26
  }))
27
}
28

29
const { entry } = Astro.props
30
const { Content, headings } = await entry.render()
31

32
const { remarkPluginFrontmatter } = await entry.render()
33

34
// 处理加密文章
35
let encryptedData = null;
36
if (entry.data.encrypted && entry.data.password) {
37
  // 生成密码哈希用于验证
38
  const passwordHash = bcrypt.hashSync(entry.data.password, 10);
39

40
  // 获取文章的原始body内容
41
  const { body } = entry;
42

43
  // 使用密码加密原始Markdown内容
44
  const encrypted = CryptoJS.AES.encrypt(body, entry.data.password).toString();
45

46
  encryptedData = {
47
    content: encrypted,
48
    hash: passwordHash
49
  };
50
}
51

52
const jsonLd = {
53
  '@context': 'https://schema.org',
54
  '@type': 'BlogPosting',
55
  headline: entry.data.title,
56
  description: entry.data.description || entry.data.title,
57
  keywords: entry.data.tags,
58
  author: {
59
    '@type': 'Person',
60
    name: profileConfig.name,
61
    url: Astro.site,
62
  },
63
  datePublished: formatDateToYYYYMMDD(entry.data.published),
64
  inLanguage: (entry.data.lang ? entry.data.lang.replace('_', '-') : siteConfig.lang.replace('_', '-')),
65
  // TODO include cover image here
66
}
67
---
68
<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true} headings={headings}>
69
    <script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
70
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
71
        <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",
72
            {}
73
        ]}>
74
            <!-- word count and reading time -->
75
            <div class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition onload-animation">
76
                <div class="flex flex-row items-center">
77
                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
78
                        <Icon name="material-symbols:notes-rounded"></Icon>
79
                    </div>
80
                    <div class="text-sm">{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
81
                </div>
82
                <div class="flex flex-row items-center">
83
                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
84
                        <Icon name="material-symbols:schedule-outline-rounded"></Icon>
85
                    </div>
86
                    <div class="text-sm">{remarkPluginFrontmatter.minutes} {" " + i18n(I18nKey.minutesCount)}</div>
87
                </div>
88
            </div>
89

90
            <!-- title -->
91
            <div class="relative onload-animation">
92
                <div
93
                    data-pagefind-body data-pagefind-weight="10" data-pagefind-meta="title"
94
                    class="transition w-full block font-bold mb-3
95
                    text-3xl md:text-[2.25rem]/[2.75rem]
96
                    text-black/90 dark:text-white/90
97
                    md:before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
98
                    before:absolute before:top-[0.75rem] before:left-[-1.125rem]
99
                ">
100
                    {entry.data.title}
101
                </div>
102
            </div>
103

104
            <!-- metadata -->
105
            <div class="onload-animation">
106
                <PostMetadata
107
                        class="mb-5"
108
                        published={entry.data.published}
109
                        updated={entry.data.updated}
110
                        tags={entry.data.tags}
111
                        category={entry.data.category}
112
                ></PostMetadata>
113
                {!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
114
            </div>
115

116
            <!-- always show cover as long as it has one -->
117

118
            {entry.data.image &&
119
                <ImageWrapper id="post-cover" src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
120
            }
121

122
            <!-- 加密文章的处理 -->
123
            {encryptedData ? (
124
                <div>
125
                    <PasswordProtection
126
                      encryptedData={encryptedData}
127
                      slug={entry.slug}
128
                      class="mb-6 rounded-xl password-container onload-animation"
129
                    />
130
                    <!-- 加密内容容器，内容将通过JavaScript动态解密显示 -->
131
                    <div id={`article-content-${entry.slug}`} class="mb-6 markdown-content onload-animation hidden encrypted-content">
132
                        <!-- 内容将在验证密码后动态插入 -->
133
                    </div>
134
                </div>
135
            ) : (
136
                <div class="mb-6 markdown-content onload-animation">
137
                    <Markdown class="w-full">
138
                        <Content />
139
                    </Markdown>
140
                </div>
141
            )}
142

143
            {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
144

145
        </div>
146
    </div>
147

148

149
    <div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
150
        <a href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}
151
           class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.nextSlug}]}>
152
            {entry.data.nextSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-start gap-4" >
153
                <Icon name="material-symbols:chevron-left-rounded" class="text-[2rem] text-[var(--primary)]" />
154
                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
155
                    {entry.data.nextTitle}
156
                </div>
157
            </div>}
158
        </a>
159

160
        <a href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
161
           class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.prevSlug}]}>
162
            {entry.data.prevSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-end gap-4">
163
                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
164
                    {entry.data.prevTitle}
165
                </div>
166
                <Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
167
            </div>}
168
        </a>
169
    </div>
170
<!-- giscus评论 -->
171
<div style="margin-top: 20px;"></div>
172
<script src="https://giscus.app/client.js"
173
        data-repo="Lapis0x0/blog-discussion"
174
        data-repo-id="R_kgDONda6_g"
175
        data-category="Announcements"
176
        data-category-id="DIC_kwDONda6_s4ClN0D"
177
        data-mapping="pathname"
178
        data-strict="0"
179
        data-reactions-enabled="1"
180
        data-emit-metadata="0"
181
        data-input-position="bottom"
182
        data-theme="preferred_color_scheme"
183
        data-lang="zh-CN"
184
        crossorigin="anonymous"
185
        async>
186
</script>
187
</MainGridLayout>

2.PasswordProtection.astro#

1
/**
2
 * 文章密码保护组件
3
 * 使用构建时加密的内容和密码哈希验证
4
 */
5
interface Props {
6
  slug: string;
7
  encryptedData?: {
8
    content: string;
9
    hash: string;
10
  };
11
  class?: string;
12
}
13

14
const { slug, encryptedData, class: className = '' } = Astro.props;
15
const formId = `password-form-${slug}`;
16
const contentId = `article-content-${slug}`;
17
const overlayId = `overlay-${slug}`;
18
---
19

20
<div id={overlayId} class={`password-protection-overlay ${className}`}>
21
  <div class="password-container card-base rounded-xl p-6 md:p-8 max-w-md w-full">
22
    <h3 class="font-bold text-xl mb-4 text-black/90 dark:text-white/90">🔒 此文章已加密</h3>
23
    <p class="mb-6 text-black/70 dark:text-white/70">本文章内容可能忤逆部分读者所持的思潮立场、年龄背景或兴趣偏好。请输入密码以查看完整内容，若您不清楚密码，请联系博主获取。</p>
24
    <form id={formId} class="flex flex-col">
25
      <input
26
        type="password"
27
        class="form-input mb-4 p-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white/90 dark:bg-[#1a1a1a] text-black/90 dark:text-white/90 w-full focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
28
        placeholder="请输入密码"
29
        required
30
      />
31
      <button
32
        type="submit"
33
        class="bg-[var(--primary)] hover:bg-[var(--primary-dark)] rounded-md py-2 px-4 text-white font-medium transition-colors"
34
      >
35
        解锁内容
36
      </button>
37
      <p id="error-message" class="text-red-500 mt-2 text-sm hidden">密码错误，请重试</p>
38
    </form>
39
  </div>
40
</div>
41

42
<style>
43
.password-protection-overlay {
44
  position: absolute;
45
  top: 0;
46
  left: 0;
47
  right: 0;
48
  bottom: 0;
49
  background-color: var(--card-bg);
50
  display: flex;
51
  justify-content: center;
52
  align-items: center;
53
  z-index: 20;
54
  backdrop-filter: blur(5px);
55
}
56

57
.password-container {
58
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
59
}
60

61
.hidden-overlay {
62
  animation: fadeOut 0.3s forwards;
63
}
64

65
@keyframes fadeOut {
66
  from { opacity: 1; }
67
  to { opacity: 0; visibility: hidden; }
68
}
69

70
/* 确保加密内容在页面源码中不可见 */
71
.encrypted-content {
72
  display: none !important;
73
}
74

75
.encrypted-content.unlocked {
76
  display: block !important;
77
}
78
</style>
79

80
<script define:vars={{ slug, encryptedData, formId, contentId, overlayId }} is:inline>
81
(function() {
82
  // 动态加载所需的库
83
  function loadLibraries() {
84
    return new Promise((resolve, reject) => {
85
      let loadedCount = 0;
86
      const totalLibs = 2;
87

88
      function checkComplete() {
89
        loadedCount++;
90
        if (loadedCount === totalLibs) {
91
          resolve();
92
        }
93
      }
94

95
      // 加载 crypto-js
96
      if (typeof CryptoJS === 'undefined') {
97
        const cryptoScript = document.createElement('script');
98
        cryptoScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js';
99
        cryptoScript.onload = checkComplete;
100
        cryptoScript.onerror = () => reject(new Error('Failed to load crypto-js'));
101
        document.head.appendChild(cryptoScript);
102
      } else {
103
        checkComplete();
104
      }
105

106
      // 加载 bcryptjs
107
      if (typeof dcodeIO === 'undefined') {
108
        const bcryptScript = document.createElement('script');
109
        bcryptScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/bcryptjs/2.4.3/bcrypt.min.js';
110
        bcryptScript.onload = checkComplete;
111
        bcryptScript.onerror = () => reject(new Error('Failed to load bcryptjs'));
112
        document.head.appendChild(bcryptScript);
113
      } else {
114
        checkComplete();
115
      }
116
    });
117
  }
118

119
  function initEncryption() {
120
    // 检查是否已解锁
121
    const storageKey = `fuwari-unlocked-${slug}`;
122
    const isUnlocked = localStorage.getItem(storageKey) === 'true';
123

124
    if (isUnlocked) {
125
      // 如果已解锁，尝试从缓存获取内容
126
      const cachedContent = localStorage.getItem(`fuwari-content-${slug}`);
127
      if (cachedContent) {
128
        const contentElement = document.getElementById(contentId);
129
        if (contentElement) {
130
          renderMarkdownContent(cachedContent, contentElement);
131
          document.getElementById(overlayId).classList.add('hidden-overlay');
132
        }
133
      }
134
    }
135

136
    // 表单提交处理
137
    const form = document.getElementById(formId);
138
    if (form && encryptedData) {
139
      form.addEventListener('submit', function(e) {
140
        e.preventDefault();
141

142
        const inputPassword = e.target.querySelector('input[type="password"]').value;
143
        const errorElement = document.getElementById('error-message');
144
        const submitButton = e.target.querySelector('button[type="submit"]');
145

146
        // 显示加载状态
147
        const originalText = submitButton.textContent;
148
        submitButton.textContent = '验证中...';
149
        submitButton.disabled = true;
150

151
        try {
152
          // 使用bcrypt验证密码哈希
153
          const isValidPassword = dcodeIO.bcrypt.compareSync(inputPassword, encryptedData.hash);
154

155
          if (isValidPassword) {
156
            // 密码正确，解密内容
157
            const decryptedBytes = CryptoJS.AES.decrypt(encryptedData.content, inputPassword);
158
            const decryptedMarkdown = decryptedBytes.toString(CryptoJS.enc.Utf8);
159

160
            if (decryptedMarkdown) {
161
              // 解密成功，渲染Markdown内容
162
              localStorage.setItem(storageKey, 'true');
163
              localStorage.setItem(`fuwari-content-${slug}`, decryptedMarkdown);
164

165
              const contentElement = document.getElementById(contentId);
166
              if (contentElement) {
167
                renderMarkdownContent(decryptedMarkdown, contentElement);
168
                document.getElementById(overlayId).classList.add('hidden-overlay');
169
              }
170

171
              errorElement.classList.add('hidden');
172
            } else {
173
              throw new Error('解密失败');
174
            }
175
          } else {
176
            // 密码错误
177
            errorElement.classList.remove('hidden');
178
            e.target.querySelector('input[type="password"]').value = '';
179
          }
180
        } catch (error) {
181
          console.error('验证失败:', error);
182
          errorElement.classList.remove('hidden');
183
          e.target.querySelector('input[type="password"]').value = '';
184
        } finally {
185
          // 恢复按钮状态
186
          submitButton.textContent = originalText;
187
          submitButton.disabled = false;
188
        }
189
      });
190
    }
191
  }
192

193
  // 渲染Markdown内容为HTML
194
  function renderMarkdownContent(markdown, targetElement) {
195
    // 动态加载marked库来解析Markdown
196
    if (typeof marked === 'undefined') {
197
      const markedScript = document.createElement('script');
198
      markedScript.src = 'https://cdn.jsdelivr.net/npm/marked@12.0.0/lib/marked.umd.js';
199
      markedScript.onload = function() {
200
        const html = marked.parse(markdown);
201
        targetElement.innerHTML = `<div class="w-full !max-w-none custom-md dark:prose-invert prose prose-base" data-pagefind-body>${html}</div>`;
202
        targetElement.classList.remove('hidden');
203
        targetElement.classList.add('unlocked');
204
      };
205
      document.head.appendChild(markedScript);
206
    } else {
207
      const html = marked.parse(markdown);
208
      targetElement.innerHTML = `<div class="w-full !max-w-none custom-md dark:prose-invert prose prose-base" data-pagefind-body>${html}</div>`;
209
      targetElement.classList.remove('hidden');
210
      targetElement.classList.add('unlocked');
211
    }
212
  }
213

214
  // 页面加载完成后初始化
215
  if (document.readyState === 'loading') {
216
    document.addEventListener('DOMContentLoaded', function() {
217
      loadLibraries().then(initEncryption).catch(console.error);
218
    });
219
  } else {
220
    loadLibraries().then(initEncryption).catch(console.error);
221
  }
222
})();
223
</script>