點擊進來的時候，有沒有發現有年齡驗證啊？請放心這篇是全年齡的網站技術文章XD

在 Hugo 網站增加年齡驗證？

這套機制的基本流程是：

在文章 front matter 加上 adult: true 來標記成人文章
Hugo 渲染時根據 .Params.adult 判斷是否嵌入 JavaScript
JS 檢查 localStorage 是否已有「成年標記」
如果沒有，就顯示彈窗，讓使用者選「是」或「否」
如果選「是」→ 儲存狀態到 localStorage，下次不再詢問
如果選「否」→ 轉跳離開
製作「重設年齡驗證」按鈕在成人文章的 Footer，清除 localStorage 重新觸發彈窗（基本上是給開發人員用）

文章標記

title: "文章標題"
adult: true

只要在文章最前面的語法位置加上 adult: true 即可

找到 single.html 加入判斷式語法

去找所使用的主題，像 Eddie 的路徑是 /blog/themes/classic/layouts/_default/single.html。

Eddie 的主題名稱叫 classic，請依照自己的主題尋找到 single.html

增加判斷式


{{ if .Params.adult }}
<script>
document.documentElement.classList.add("adult-checking");

document.addEventListener("DOMContentLoaded", function () {
  if (!localStorage.getItem("isAdult")) {
    const overlay = document.createElement("div");
    overlay.style = `
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.9); color: white; display: flex;
      flex-direction: column; justify-content: center; align-items: center;
      z-index: 9999;
    `;
    overlay.innerHTML = `
      <h2>這篇內容僅限滿 18 歲閱讀</h2>
      <p>你是否已年滿 18 歲？</p>
      <button id="yesBtn">是</button>
      <button id="noBtn">否</button>
    `;

    document.body.appendChild(overlay);
    document.body.style.visibility = "visible"; // 顯示 body

    document.getElementById("yesBtn").onclick = () => {
      localStorage.setItem("isAdult", "true");
      overlay.remove();
    };
    document.getElementById("noBtn").onclick = () => {
      window.location.href = "https://blog.gtisland.com";
    };
  } else {
    document.body.style.visibility = "visible";
  }
});
</script>
<p style="font-size: 0.8em; text-align:center; margin-top:2rem;">
  <a href="#" onclick="localStorage.removeItem('isAdult'); alert('已重設驗證，下次會再次詢問'); return false;">重設年齡驗證</a>
</p>
{{ end }}

Eddie 的位置在 blog/themes/classic/layouts/partials/header.css 也就是主題底下的 `/layouts/partials/header.css

<style>
  body.adult-checking {
    visibility: hidden;
  }
</style>

如果有看到 head_custom.html 的話，也可以加在那邊，就不用動到原始的語法。

完成以上，就可以運作了，以下是語法說明

開關

用 if .param.adult 來判斷文章開頭是否有 adult:true

{{ if .Params.adult }}
<script> ... </script>
{{ end }}

localStorage 判斷 + 彈窗邏輯（內嵌 JS）

建立一個全畫面 overlay，詢問年齡

選「是」的話，把 isAdult 記錄下來，下次不再顯示

選「否」就導去首頁

if (!localStorage.getItem("isAdult"))

預防「內容先閃現」→ CSS 隱藏 body

在 header.html 加入

body.adult-checking {
  visibility: hidden;
}

搭配 single.html 的 js

document.documentElement.classList.add("adult-checking");
// ...
document.body.style.visibility = "visible";s

不這樣的話，畫面會先顯示出內容幾百毫秒（FOUC），才彈窗

重設年齡驗證

<p style="...">
  <a href="#" onclick="localStorage.removeItem('isAdult')">重設</a>
</p>

開發人員測試使用，可以清除掉記憶

>> Home

Hugo 網站年齡驗證

2025/08/07