#🔐 文章加密功能開發紀錄

這是一個完整的文章密碼保護功能開發紀錄。通過這個功能，你可以為任何文章添加密碼保護，只有輸入正確密碼的讀者才能訪問內容。

#🎯 功能特點

✅ 密碼保護：文章需要密碼才能訪問
✅ 美觀界面：現代化設計，支持深色/淺色主題
✅ 錯誤處理：三次錯誤後自動返回首頁
✅ 動態提示：實時顯示剩餘嘗試次數
✅ 會話記憶：同一次瀏覽器會話中不需要重複輸入
✅ 多種取消方式：按鈕、ESC鍵、點擊背景
✅ 精確遮罩：只模糊文章內容，不影響導航元素
✅ 響應式設計：在各種設備上正常顯示

#📝 使用方法

#1. 在文章的 frontmatter 中添加：

1
---
2
title: 文章標題
3
# ... 其他字段 ...
4
password: "密碼"          # 設置密碼
5
redirectUrl: "/"          # 可選，密碼錯誤時跳轉的頁面
6
---

#2. 訪問文章時會自動彈出密碼輸入框

#3. 輸入正確密碼後可以正常閱讀文章

#🔧 技術實現詳解

#核心組件：`PasswordProtection.astro`

#1. 組件結構

1
---
2
import { Icon } from "astro-icon/components";
3

4
interface Props {
5
  password: string;
6
  redirectUrl?: string;
7
  title?: string;
8
  description?: string;
9
}
10

11
const {
12
  password,
13
  redirectUrl = "/",
14
  title = "密碼保護",
15
  description = "此文章需要密碼才能訪問",
16
} = Astro.props;
17
---

#2. HTML 結構

1
<!-- 密碼保護遮罩 -->
2
<div id="password-protection" class="fixed inset-0 z-[9999] flex items-start justify-center p-4 pt-20" style="display: flex !important;">
3
  <!-- 密碼輸入模塊 -->
4
  <div class="bg-[var(--card-bg)] border border-[var(--line-divider)] rounded-2xl p-8 max-w-md w-full shadow-2xl relative z-10">
5
    <!-- 標題 -->
6
    <div class="text-center mb-6">
7
      <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--primary)]/10 flex items-center justify-center">
8
        <Icon name="material-symbols:lock-outline" class="text-2xl text-[var(--primary)]" />
9
      </div>
10
      <h2 class="text-xl font-bold text-black/90 dark:text-white/90 mb-2">{title}</h2>
11
      <p class="text-sm text-black/60 dark:text-white/60">{description}</p>
12
    </div>
13

14
    <!-- 密碼輸入表單 -->
15
    <form id="password-form" class="space-y-6">
16
      <div>
17
        <input
18
          type="password"
19
          id="password-input"
20
          placeholder="輸入密碼..."
21
          class="w-full p-4 border border-[var(--line-divider)] rounded-xl bg-[var(--card-bg)] text-black/90 dark:text-white/90 placeholder:text-black/50 dark:placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-[var(--primary)] transition-all text-base"
22
          required
23
          autocomplete="current-password"
24
        >
25
      </div>
26

27
      <div class="flex gap-4">
28
        <button
29
          type="submit"
30
          class="flex-1 bg-[var(--primary)] hover:bg-[var(--primary)]/90 text-white font-semibold px-8 py-4 rounded-xl transition-all hover:scale-105 text-base flex items-center justify-center gap-3 shadow-lg hover:shadow-xl"
31
        >
32
          <Icon name="material-symbols:login" class="text-xl" />
33
          確認進入
34
        </button>
35
        <button
36
          type="button"
37
          id="cancel-btn"
38
          class="flex-1 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 font-semibold px-8 py-4 rounded-xl transition-all hover:scale-105 text-base flex items-center justify-center gap-3 shadow-lg hover:shadow-xl"
39
        >
40
          <Icon name="material-symbols:close" class="text-xl" />
41
          返回首頁
42
        </button>
43
      </div>
44
    </form>
45

46
    <!-- 錯誤提示 -->
47
    <div id="error-message" class="hidden mt-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg">
48
      <div class="flex items-center gap-2 text-red-600 dark:text-red-400 text-sm">
49
        <Icon name="material-symbols:error-outline" class="text-lg" />
50
        <span>密碼錯誤，還剩 3 次機會</span>
51
      </div>
52
    </div>
53
  </div>
54
</div>

#3. CSS 樣式

1
<style>
2
  /* 確保文章容器有相對定位 */
3
  #post-container {
4
    position: relative !important;
5
  }
6

7
  /* 確保密碼保護容器始終可見 */
8
  #password-protection {
9
    display: flex !important;
10
    opacity: 1 !important;
11
    visibility: visible !important;
12
    z-index: 9999 !important;
13
  }
14

15
  /* 當隱藏時，覆蓋所有樣式 */
16
  #password-protection.hidden {
17
    display: none !important;
18
    opacity: 0 !important;
19
    visibility: hidden !important;
20
    z-index: -1 !important;
21
    pointer-events: none !important;
22
  }
23

24
  /* 確保遮罩正確顯示 */
25
  #post-mask {
26
    position: absolute !important;
27
    top: 0 !important;
28
    left: 0 !important;
29
    right: 0 !important;
30
    bottom: 0 !important;
31
    background: rgba(0, 0, 0, 0.5) !important;
32
    backdrop-filter: blur(4px) !important;
33
    border-radius: 1rem !important;
34
    z-index: 9990 !important;
35
    pointer-events: none !important;
36
    display: block !important;
37
    opacity: 1 !important;
38
    visibility: visible !important;
39
  }
40
</style>

#4. JavaScript 實現（完整版）

1
<script define:vars={{ password, redirectUrl }}>
2
  class PasswordProtection {
3
    constructor() {
4
      this.password = password;
5
      this.redirectUrl = redirectUrl;
6
      this.container = document.getElementById('password-protection');
7
      this.mask = null;
8
      this.form = document.getElementById('password-form');
9
      this.input = document.getElementById('password-input');
10
      this.errorMessage = document.getElementById('error-message');
11
      this.cancelBtn = document.getElementById('cancel-btn');
12
      this.errorCount = 0;
13
      this.maxErrors = 3;
14
      this.isInitialized = false;
15

16
      this.init();
17
    }
18

19
    init() {
20
      // 確保只初始化一次
21
      if (this.isInitialized) return;
22
      this.isInitialized = true;
23

24
      // 檢查是否已經通過驗證
25
      if (this.isAuthenticated()) {
26
        this.hideProtection();
27
        return;
28
      }
29

30
      // 顯示保護並創建遮罩
31
      this.showProtection();
32
      this.createAndShowMask();
33
      this.bindEvents();
34

35
      // 確保輸入框獲得焦點
36
      setTimeout(() => {
37
        if (this.input) {
38
          this.input.focus();
39
        }
40
      }, 100);
41
    }
42

43
    showProtection() {
44
      // 確保密碼保護容器可見
45
      if (this.container) {
46
        this.container.style.display = 'flex';
47
        this.container.style.opacity = '1';
48
        this.container.style.visibility = 'visible';
49
        this.container.style.zIndex = '9999';
50
      }
51
    }
52

53
    createAndShowMask() {
54
      const postContainer = document.getElementById('post-container');
55
      if (!postContainer) {
56
        console.warn('找不到 post-container 元素');
57
        return;
58
      }
59

60
      // 確保文章容器有相對定位
61
      postContainer.style.position = 'relative';
62

63
      // 移除現有的遮罩（如果存在）
64
      const existingMask = document.getElementById('post-mask');
65
      if (existingMask) {
66
        existingMask.remove();
67
      }
68

69
      // 創建新的遮罩
70
      this.mask = document.createElement('div');
71
      this.mask.id = 'post-mask';
72
      this.mask.style.cssText = `
73
        position: absolute !important;
74
        top: 0 !important;
75
        left: 0 !important;
76
        right: 0 !important;
77
        bottom: 0 !important;
78
        background: rgba(0, 0, 0, 0.5) !important;
79
        backdrop-filter: blur(4px) !important;
80
        border-radius: 1rem !important;
81
        z-index: 9990 !important;
82
        pointer-events: none !important;
83
        display: block !important;
84
        opacity: 1 !important;
85
        visibility: visible !important;
86
      `;
87

88
      // 將遮罩添加到文章容器
89
      postContainer.appendChild(this.mask);
90

91
      // 確保遮罩立即顯示
92
      setTimeout(() => {
93
        if (this.mask) {
94
          this.mask.style.opacity = '1';
95
          this.mask.style.visibility = 'visible';
96
        }
97
      }, 10);
98
    }
99

100
    bindEvents() {
101
      if (this.form) {
102
        this.form.addEventListener('submit', (e) => {
103
          e.preventDefault();
104
          this.handleSubmit();
105
        });
106
      }
107

108
      if (this.cancelBtn) {
109
        this.cancelBtn.addEventListener('click', () => {
110
          this.handleCancel();
111
        });
112
      }
113

114
      // 按 ESC 鍵取消
115
      document.addEventListener('keydown', (e) => {
116
        if (e.key === 'Escape') {
117
          this.handleCancel();
118
        }
119
      });
120

121
      // 點擊背景取消
122
      if (this.container) {
123
        this.container.addEventListener('click', (e) => {
124
          if (e.target === this.container) {
125
            this.handleCancel();
126
          }
127
        });
128
      }
129
    }
130

131
    handleSubmit() {
132
      if (!this.input) return;
133

134
      const inputPassword = this.input.value.trim();
135
      console.log('提交密碼驗證:', inputPassword === this.password ? '正確' : '錯誤');
136

137
      if (inputPassword === this.password) {
138
        console.log('密碼正確，開始隱藏保護');
139
        this.setAuthenticated();
140
        this.hideProtection();
141
        this.showSuccessMessage();
142
      } else {
143
        console.log('密碼錯誤，顯示錯誤信息');
144
        this.errorCount++;
145
        this.showError();
146
        this.input.value = '';
147
        this.input.focus();
148

149
        // 檢查是否達到最大錯誤次數
150
        if (this.errorCount >= this.maxErrors) {
151
          this.showMaxErrorWarning();
152
          setTimeout(() => {
153
            this.handleCancel();
154
          }, 2000);
155
        }
156
      }
157
    }
158

159
    handleCancel() {
160
      window.location.href = this.redirectUrl;
161
    }
162

163
    showError() {
164
      if (this.errorMessage) {
165
        this.errorMessage.classList.remove('hidden');
166
      }
167

168
      if (this.input) {
169
        this.input.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
170
      }
171

172
      // 更新錯誤信息
173
      if (this.errorMessage) {
174
        const errorText = this.errorMessage.querySelector('span');
175
        if (errorText) {
176
          const remainingAttempts = this.maxErrors - this.errorCount;
177
          errorText.textContent = `密碼錯誤，還剩 ${remainingAttempts} 次機會`;
178
        }
179
      }
180

181
      // 3秒後隱藏錯誤信息
182
      setTimeout(() => {
183
        if (this.errorMessage) {
184
          this.errorMessage.classList.add('hidden');
185
        }
186
        if (this.input) {
187
          this.input.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
188
        }
189
      }, 3000);
190
    }
191

192
    showMaxErrorWarning() {
193
      // 創建最大錯誤警告
194
      const warningDiv = document.createElement('div');
195
      warningDiv.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center gap-2';
196
      warningDiv.innerHTML = `
197
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
198
          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
199
        </svg>
200
        <span>錯誤次數過多，即將返回首頁...</span>
201
      `;
202
      document.body.appendChild(warningDiv);
203

204
      // 2秒後移除警告
205
      setTimeout(() => {
206
        warningDiv.remove();
207
      }, 2000);
208
    }
209

210
    hideProtection() {
211
      console.log('開始隱藏密碼保護');
212

213
      // 隱藏密碼保護容器
214
      if (this.container) {
215
        console.log('隱藏密碼保護容器');
216
        // 使用多重方式確保隱藏
217
        this.container.classList.add('hidden');
218
        this.container.style.display = 'none';
219
        this.container.style.opacity = '0';
220
        this.container.style.visibility = 'hidden';
221
        this.container.style.zIndex = '-1';
222
        this.container.style.pointerEvents = 'none';
223

224
        // 強制重新計算樣式
225
        this.container.offsetHeight;
226

227
        console.log('容器樣式已設置:', {
228
          display: this.container.style.display,
229
          opacity: this.container.style.opacity,
230
          visibility: this.container.style.visibility,
231
          zIndex: this.container.style.zIndex
232
        });
233
      } else {
234
        console.warn('找不到密碼保護容器');
235
      }
236

237
      // 移除遮罩
238
      if (this.mask) {
239
        console.log('移除遮罩');
240
        const postContainer = document.getElementById('post-container');
241
        if (postContainer && postContainer.contains(this.mask)) {
242
          postContainer.removeChild(this.mask);
243
        }
244
        this.mask = null;
245
      }
246

247
      // 清理任何現有的遮罩元素
248
      const existingMask = document.getElementById('post-mask');
249
      if (existingMask) {
250
        console.log('清理現有遮罩');
251
        existingMask.remove();
252
      }
253

254
      // 確保容器完全隱藏
255
      setTimeout(() => {
256
        if (this.container) {
257
          console.log('最終確認隱藏');
258
          this.container.style.display = 'none';
259
          this.container.style.opacity = '0';
260
          this.container.style.visibility = 'hidden';
261
          this.container.style.zIndex = '-1';
262
          this.container.style.pointerEvents = 'none';
263
        }
264
      }, 10);
265
    }
266

267
    showSuccessMessage() {
268
      // 創建成功提示
269
      const successDiv = document.createElement('div');
270
      successDiv.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center gap-2';
271
      successDiv.innerHTML = `
272
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
273
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
274
        </svg>
275
        <span>密碼驗證成功！</span>
276
      `;
277
      document.body.appendChild(successDiv);
278

279
      // 3秒後移除提示
280
      setTimeout(() => {
281
        successDiv.remove();
282
      }, 3000);
283
    }
284

285
    isAuthenticated() {
286
      const key = `auth_${window.location.pathname}`;
287
      const authStatus = sessionStorage.getItem(key);
288
      console.log('檢查認證狀態:', key, authStatus);
289
      return authStatus === 'true';
290
    }
291

292
    setAuthenticated() {
293
      const key = `auth_${window.location.pathname}`;
294
      sessionStorage.setItem(key, 'true');
295
      console.log('設置認證狀態:', key, 'true');
296
    }
297
  }
298

299
  // 等待 DOM 完全載入後初始化
300
  function initPasswordProtection() {
301
    // 確保所有元素都已載入
302
    if (document.getElementById('password-protection') && document.getElementById('post-container')) {
303
      new PasswordProtection();
304
    } else {
305
      // 如果元素還沒載入，稍後再試
306
      setTimeout(initPasswordProtection, 100);
307
    }
308
  }
309

310
  // 多重保險：DOMContentLoaded 和 window.load
311
  document.addEventListener('DOMContentLoaded', initPasswordProtection);
312
  window.addEventListener('load', initPasswordProtection);
313

314
  // 立即嘗試初始化
315
  initPasswordProtection();
316
</script>

#5. 頁面模板集成

在 src/pages/posts/[...slug].astro 中集成：

1
---
2
import path from "node:path";
3
import Markdown from "@components/misc/Markdown.astro";
4
import MainGridLayout from "@layouts/MainGridLayout.astro";
5
import { getSortedPosts } from "@utils/content-utils";
6
import { getDir, getPostUrlBySlug } from "@utils/url-utils";
7
import { Icon } from "astro-icon/components";
8
import ImageWrapper from "../../components/misc/ImageWrapper.astro";
9
import PasswordProtection from "../../components/PasswordProtection.astro";
10
import PostMetadata from "../../components/PostMeta.astro";
11

12
export async function getStaticPaths() {
13
  const blogEntries = await getSortedPosts();
14
  return blogEntries.map((entry) => ({
15
    params: { slug: entry.slug },
16
    props: { entry },
17
  }));
18
}
19

20
const { entry } = Astro.props;
21
const { Content, headings } = await entry.render();
22

23
const { remarkPluginFrontmatter } = await entry.render();
24

25
// 檢查是否需要密碼保護
26
const isPasswordProtected = entry.data.password;
27
const password = entry.data.password || "";
28
const redirectUrl = entry.data.redirectUrl || "/";
29
---
30

31
<MainGridLayout
32
  title={entry.data.title}
33
  description={entry.data.description || entry.data.title}
34
  setOGTypeArticle={true}
35
  headings={headings}
36
>
37
  {isPasswordProtected && (
38
    <PasswordProtection
39
      password={password}
40
      redirectUrl={redirectUrl}
41
      title="文章密碼保護"
42
      description="此文章需要密碼才能訪問，請輸入正確的密碼"
43
    />
44
  )}
45

46
  <!-- 文章內容 -->
47
  <div id="post-container" class="card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full mb-6">
48
    <!-- ... 其他文章內容 ... -->
49
  </div>
50
</MainGridLayout>

#6. 類型定義更新

在 src/types/config.ts 中添加：

1
export interface BlogPostData {
2
  // ... 其他字段 ...
3
  password?: string;
4
  redirectUrl?: string;
5
}

#7. 內容配置更新

在 src/content/config.ts 中添加：

1
import { defineCollection, z } from "astro:content";
2

3
export const postsCollection = defineCollection({
4
  schema: z.object({
5
    // ... 其他字段 ...
6
    password: z.string().optional(),
7
    redirectUrl: z.string().optional().default("/"),
8
  }),
9
});

#🚧 開發過程與問題解決

#階段一：基礎功能實現

創建密碼保護組件：實現基本的密碼輸入和驗證
集成到文章頁面：在動態頁面模板中條件性渲染
添加類型定義：更新 TypeScript 類型以支持新字段

#階段二：UI/UX 優化

模態框定位問題：
- 問題：密碼輸入框出現在文章中間
- 解決：調整 CSS 定位到頁面頂部
```
1
.fixed inset-0 z-[9999] flex items-start justify-center p-4 pt-20
```
按鈕樣式優化：
- 問題：確認和取消按鈕不夠明顯
- 解決：添加現代化按鈕樣式，包含圖標和懸停效果
錯誤處理改進：
- 問題：錯誤提示不夠清晰
- 解決：添加動態錯誤計數和剩餘嘗試次數顯示

#階段三：遮罩系統實現

遮罩範圍控制：

問題：遮罩覆蓋整個頁面，影響導航
解決：實現精確的文章內容遮罩

1
// 動態創建遮罩並附加到文章容器
2
this.mask = document.createElement('div');
3
postContainer.appendChild(this.mask);

z-index 層級管理：
- 問題：遮罩與其他元素層級衝突
- 解決：設置正確的 z-index 值
```
1
z-index: 9990 !important; /* 遮罩 */
2
z-index: 9999 !important; /* 模態框 */
```

動態遮罩管理：

問題：靜態 HTML 遮罩在刷新時出現定位問題
解決：完全動態創建和管理遮罩元素

1
// 移除靜態 HTML，改為動態創建
2
this.mask = null; // 初始化為 null
3
createAndShowMask() // 動態創建方法

#階段四：認證狀態管理

存儲機制選擇：
- 考慮：localStorage vs sessionStorage
- 決定：使用 sessionStorage，關閉瀏覽器後需要重新驗證
```
1
sessionStorage.setItem(key, 'true');
```
頁面級別隔離：
- 實現：每個頁面有獨立的認證狀態
```
1
const key = `auth_${window.location.pathname}`;
```

#階段五：問題調試與修復

刷新後遮罩重現問題：
- 問題：F5 刷新後遮罩覆蓋錯誤區域
- 解決：完全重寫遮罩創建邏輯，確保正確的 DOM 位置

密碼驗證後模塊不消失問題：

問題：輸入正確密碼後密碼保護模塊沒有消失
解決：使用多重隱藏機制和強制樣式重新計算

1
// 多重隱藏方式
2
this.container.classList.add('hidden');
3
this.container.style.display = 'none';
4
this.container.style.opacity = '0';
5
this.container.style.visibility = 'hidden';
6
this.container.style.zIndex = '-1';
7
this.container.style.pointerEvents = 'none';

初始化時機問題：

問題：頁面載入時組件初始化失敗
解決：添加多重保險的初始化機制

1
// 多重保險：DOMContentLoaded 和 window.load
2
document.addEventListener('DOMContentLoaded', initPasswordProtection);
3
window.addEventListener('load', initPasswordProtection);
4
initPasswordProtection(); // 立即嘗試

#🔒 安全機制詳解

#存儲機制

存儲位置：sessionStorage（會話存儲）
存儲格式：auth_${頁面路徑} = 'true'
存儲範圍：同一個瀏覽器會話期間
安全特點：關閉瀏覽器後自動清除

#驗證流程

頁面加載：檢查 sessionStorage 中是否有驗證記錄
密碼輸入：讀者輸入密碼並提交
密碼驗證：客戶端比對密碼是否正確
狀態更新：正確則設置驗證狀態並隱藏保護層
錯誤處理：錯誤則顯示錯誤信息，三次錯誤後自動返回

#安全特點

✅ 客戶端驗證：密碼不會發送到服務器
✅ 頁面級別保護：每個頁面有獨立的驗證狀態
✅ 會話級別存儲：關閉瀏覽器後需要重新驗證
✅ 錯誤次數限制：防止暴力破解
✅ 精確遮罩控制：只保護文章內容，不影響導航

#⚠️ 注意事項與最佳實踐

#1. 技術限制

靜態網站限制：由於是靜態網站，密碼存儲在客戶端
安全性考慮：不適合存儲高敏感度內容
讀者體驗：每次關閉瀏覽器後需要重新輸入密碼

#2. 實現要點

JavaScript 語法：在 Astro 的 <script> 標籤中使用純 JavaScript
組件導入：確保正確導入 PasswordProtection 組件
類型定義：更新相關的 TypeScript 類型定義
內容配置：更新 Astro 內容集合的 schema

#3. 樣式適配

主題支持：確保支持深色/淺色主題
響應式設計：在不同設備上正常顯示
品牌一致性：使用網站的 CSS 變量保持風格一致

#4. 讀者體驗

錯誤提示：提供清晰的錯誤信息和剩餘嘗試次數
多種取消方式：支持按鈕、鍵盤、背景點擊
視覺反饋：成功和失敗都有明確的視覺提示

#🚀 部署注意事項

構建測試：確保在生產環境中正常運行
緩存清理：部署後清除瀏覽器緩存測試功能
跨瀏覽器測試：在不同瀏覽器中測試功能
移動端測試：確保在移動設備上正常使用

#📚 擴展功能建議

#可選的增強功能

localStorage 支持：改為持久化存儲
密碼強度檢查：添加密碼複雜度要求
多語言支持：支持國際化
自定義樣式：允許自定義界面樣式
統計功能：記錄訪問統計（需要後端支持）

#🎯 總結

這個文章加密功能實現了以下核心目標：

簡潔易用：只需在 frontmatter 中添加兩個字段
美觀實用：現代化 UI 設計，支持主題切換
安全可靠：客戶端驗證，會話級別存儲
讀者友好：多種交互方式，清晰的錯誤提示
技術先進：使用 Astro 組件系統，TypeScript 類型安全
問題解決：完整解決了遮罩顯示、模塊隱藏等關鍵問題

通過這個完整的開發紀錄，你可以輕鬆在自己的 Astro 網站中實現類似的文章加密功能。所有技術細節都經過實際測試，確保可行。

開發日期：2025年7月31日
開發者：Illumi糖糖 + 本地部屬AI(Ollama)
技術棧：Astro + TypeScript + Tailwind CSS
測試密碼：1122

文章密碼保護