🔐 Hugo 文章密码保护初次实践

---
title: "私人日记"
date: 2025-02-09
password: "5f4dcc3b5aa765d61d8327deb882cf99"  # "password" 的 MD5 哈希
---

$md5 = New-Object -TypeName System.Security.Cryptography.MD5CryptoServiceProvider
$hash = [System.BitConverter]::ToString($md5.ComputeHash([System.Text.Encoding]::UTF8.GetBytes("password"))).Replace("-", "").ToLower()
Write-Output $hash

import hashlib
print(hashlib.md5("password".encode()).hexdigest())

{{- define "main" }}

<article class="post-single">
  <header class="post-header">
    <h1 class="post-title entry-hint-parent">
      {{ .Title }}
    </h1>
  </header>

  {{- $password := .Params.password }}
  {{- if $password }}
  <div id="password-protection" style="text-align: center; padding: 20px;">
    <p style="font-size: 1.2em;">🔒 这里是 <strong>秘密基地</strong>！🚀 请输入通关暗号👇</p>
    <input type="password" id="post-password" placeholder="✨天王盖地虎✨" />
    <button id="check-button" onclick="checkPassword()">🐯 验证一下！</button>
    <p id="error-msg" style="color: #f05b72; display: none; font-size: 1em;">❌ 暗号不对！再试试吧~ 🥺</p>
  </div>

  <div id="post-content" style="display: none;">
    {{- if not (.Param "disableAnchoredHeadings") }}
      {{- partial "anchored_headings.html" .Content -}}
    {{- else }}{{ .Content }}{{ end }}
  </div>
  {{- else }}
  <div id="post-content">
    {{- if not (.Param "disableAnchoredHeadings") }}
      {{- partial "anchored_headings.html" .Content -}}
    {{- else }}{{ .Content }}{{ end }}
  </div>
  {{- end }}
</article>

<!-- 引入 MD5 计算库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
      let storedPassword = sessionStorage.getItem("blog_password_{{ .File.UniqueID }}");

      if (!storedPassword) {
          document.getElementById("password-protection").style.display = "block";
      } else {
          unlockContent();
      }
  });

  function checkPassword() {
      let inputPassword = document.getElementById("post-password").value;
      let correctHash = "{{ .Params.password }}";  // 从 Hugo 读取 MD5 哈希值
      let inputHash = CryptoJS.MD5(inputPassword).toString();  // 计算用户输入的 MD5

      let errorMsg = document.getElementById("error-msg");
      let checkButton = document.getElementById("check-button");

      // 按钮增加点击反馈
      checkButton.style.transform = "scale(0.95)";
      setTimeout(() => {
          checkButton.style.transform = "scale(1)";
      }, 100);

      if (inputHash === correctHash) {
          sessionStorage.setItem("blog_password_{{ .File.UniqueID }}", inputHash);
          unlockContent();
      } else {
          // 让错误提示抖动，并显示出来
          errorMsg.style.display = "block";
          errorMsg.classList.add("shake");
          
          setTimeout(() => {
              errorMsg.classList.remove("shake");
          }, 300);
      }
  }

  function unlockContent() {
      document.getElementById("password-protection").style.display = "none";
      document.getElementById("post-content").style.display = "block";
  }

  // 页面关闭时清空密码
  window.addEventListener("beforeunload", function() {
      sessionStorage.removeItem("blog_password_{{ .File.UniqueID }}");
  });
</script>

{{- end }}