在Hugo页面中实现内容保护

<div id="protected-content-{{ .Get "id" }}" style="display: none">
   {{ if eq (.Get "isTabs") "true" }}
        {{ .Inner | safeHTML }}
    {{ else }}
        {{ .Inner | markdownify }}
    {{ end }}
</div>

  
  <div id="protected-form-{{ .Get "id" }}" class="protected-form">
    <input
      type="password"
      id="password-input-{{ .Get "id" }}"
      class="protected-input"
      placeholder="Enter the password to view the content"
    />
    <button type="button" id="submit-button-{{ .Get "id" }}" class="protected-button">
      Submit
    </button>
    <p id="error-message-{{ .Get "id" }}" class="protected-error-message">Incorrect password!</p>
  </div>
  
  <script>
    function setCookie(name, value, days) {
      var expires = "";
      if (days) {
        var date = new Date();
        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
        expires = "; expires=" + date.toUTCString();
      }
      document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }
  
    function getCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(";");
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == " ") c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
      }
      return null;
    }
  
    function checkPassword(id, correctPassword) {
      var input = document.getElementById("password-input-" + id).value;
      var savedPassword = getCookie("site_password-" + id);
  
      if (input === correctPassword || savedPassword === correctPassword) {
        setCookie("site_password-" + id, correctPassword, 1); // 设置 Cookie 有效期为 1 天
        document.getElementById("protected-content-" + id).style.display = "block";
        document.getElementById("protected-form-" + id).style.display = "none";
      } else {
        document.getElementById("error-message-" + id).style.display = "block";
      }
    }
  
    // 监听按钮点击和回车事件
    document.getElementById("submit-button-{{ .Get "id" }}").addEventListener("click", function () {
      checkPassword("{{ .Get "id" }}", "{{ .Get "password" }}");
    });
  
    document.getElementById("password-input-{{ .Get "id" }}").addEventListener("keydown", function (event) {
      if (event.key === "Enter") {
        checkPassword("{{ .Get "id" }}", "{{ .Get "password" }}");
      }
    });
  </script>

// assets/scss/_protected.scss

.protected-form {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.3); // 半透明背景
  border: 1px solid rgba(255, 255, 255, 0.6); // 半透明边框
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.protected-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
  text-align: center; // 输入的文字居中
  background-color: rgba(255, 255, 255, 0.7); // 半透明背景
  color: #333; // 输入文字颜色
}

.protected-input::placeholder {
  color: #888;
  text-align: center; // placeholder 文本居中
}

.protected-button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.protected-button:hover {
  background-color: #0056b3;
}

.protected-error-message {
  color: #dc3545;
  font-size: 14px;
  display: none;
  margin-top: 10px;
  text-align: center;
}

@media (max-width: 480px) {
  .protected-form {
    padding: 15px;
  }

  .protected-input,
  .protected-button {
    font-size: 14px;
  }
}