很多博主都有這樣的困擾：一些文章不希望所有人都能直接看到，而是想設置一個“問題驗證”，答對才能解鎖。但如果你用的是純靜態博客，想實現這個功能卻發現困難重重——文章內容在 HTML 裏早就暴露了，CSS 或 JS 根本藏不住。

最近我在用 Astro 做博客時，嘗試用 SSR（服務端渲染） 來解決這個問題。本文不講具體代碼，而是分享原理和思路，讓你理解為什麼 SSR 可以安全地保護文章內容，同時還能方便地控制訪問權限。如果你對具體實現感興趣，我會在文末提供鏈接去查看完整教程。

靜態博客的加密侷限

靜態博客的內容在構建時就已經寫進 HTML 文件裏。即便你用 CSS 或 JavaScript 把文字“隱藏”起來，打開瀏覽器開發者工具就能輕鬆看到原文。

一些人會嘗試在前端加密內容，然後在瀏覽器裏解密顯示。問題是——加密密鑰也在前端，這意味着別人仍然可以破解。

所以，如果想做真正安全的加密，核心在於：驗證和解密邏輯必須在服務器端完成，前端只負責展示和交互。

SSR：給靜態博客加上“動態大腦”

服務端渲染（SSR, Server-Side Rendering）允許博客在用户訪問時動態生成頁面，而不是把文章內容提前打包到 HTML 裏。這樣做的好處：

• 文章內容不會提前暴露在前端
• 可以在服務器端驗證訪問條件
• 訪問控制邏輯更清晰，可擴展性強

簡單來説，用 SSR + 接口驗證，就可以實現比較安全的文章加密。

實現思路概覽

整個流程可以分為幾個核心部分（以下為原理説明）：

1. 從靜態輸出改為 SSR

   • 靜態博客在構建階段生成所有頁面，內容固定在 HTML 文件裏。
   • SSR 模式下，頁面在訪問時生成，文章內容不會提前暴露。
   • 部署方式可選擇 serverless（如 Vercel）或 standalone Node 服務，都可以滿足加密需求。

2. 在文章 metadata 中增加“問題/答案”字段

   • 在每篇文章的 frontmatter 或配置裏記錄訪問問題和答案。
   • SSR 在渲染文章時會檢查訪問權限，未通過驗證的用户無法看到內容。

3. 前端交互

   • 頁面顯示問題，用户輸入答案後通過接口發送給服務器驗證。
   • 驗證通過後，服務器返回文章內容，前端渲染顯示；驗證失敗則提示錯誤。
   • 這種方式可以使用任何前端框架（如 Vue、React）實現，核心邏輯在服務端。

4. 模板調整

   • 在文章模板裏增加邏輯：檢查文章是否加密、cookie 是否有效、是否顯示加密組件等。
   • SSR + 接口驗證結合前端交互，實現安全的文章展示。

核心總結

• 靜態博客加密的本質問題：內容已經在前端暴露。
• SSR 的優勢：文章內容只在服務器存在，前端無法直接獲取。
• 前端角色：只做交互展示，真正的驗證邏輯由服務端完成。

對於想在博客裏實現文章加密的朋友來説，這種 SSR + 接口驗證 的方式，在安全性和實現複雜度之間，是一個比較理想的平衡點。

如果你對具體實現細節感興趣，包括配置文件和組件示例，可以直接訪問我的博客查看完整教程：點我查看