在Hugo靜態網頁加入一個年齡驗證對話框

很多國家法律規定，成人內容的網頁應該要加入年齡驗證的對話框/彈窗。

就是問「你是否已經成年？」的那個玩意。

Pornhub的提醒

儘管我們知道這一點屁用都沒有，網路沒有驗證身份證的機制很容易就繞過去了，防君子不防小人，不過起碼還是有盡到最基本的提醒責任

台灣法院的見解是說，針對未成年人接觸淫穢物品，需要有基本隔離措施，很多時候對話框是基本的。

所以我就這麼做了，針對本站的一些成人內容，還有一些讓玻璃心破碎的政治內容，我都會加上年齡驗證。

1. 預期目標
#

具體效果可以點選本站NSFW - Ivon的部落格分類看看，在你檢視好康的內容前，必須同意才能繼續。

純使用HTML + JS製作一個的對話框。

使用最簡方案，不依賴任何外部套件製作。

在網頁載入前顯示，背景全黑，使用者點選同意前，都不可以往下滑。

在點選「我成年」之後，在使用者的瀏覽器放置一個cookie，幾天內都不需要再按一次對話框。

如果使用者很誠實地點了「我未成年」那麼將會獲得一個獎勵。

2. 實作
#

在Hugo網站根目錄新增一個檔案layouts/shortcodes/age-verification.html。這裡我用的是shortcode，這樣能在任意網頁的Markdown插入年齡驗證對話框。如果你希望整個網站全域自動套用，請把它弄成layouts/partials/然後放到網站的基本layout裡面。
找一個大大的「R18禁止」的素材圖片，放到網站根目錄/images/R-18_icon.svg
填入以下內容。用CSS定義樣式，JavaScript禁止往下滑與處理通過後的邏輯。

<style>
  .form-name-popup {
    color: white;
    text-align: center;
    position: fixed;
    z-index: 9;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    overflow: scroll;
  }

  .form-name-popup-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 50px;
    overflow: scroll;
  }

  .form-name-popup-close {
    position: absolute;
    z-index: 999;
    top: 5px;
    right: 10px;
    color: #fff;
  }

  .r18button {
    width: 100px;
    height: auto;
  }

  .r18icon {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
</style>

<script>

	/* 主選單內容*/
  var formhtml = `
<div id="popwindow" class="form-name-popup">
  <div class="form-name-popup">
    <p>
      <b>金、暴力、SEX！年齡驗證</b>
    </p>
    <p>
      本頁面含有成人、暴力、血腥內容，請問您是否已成年？
      若您尚未成年，請點選「否」離開本頁面。
    </p>
    <p>
      <b>Kane, Bouryoku, Sex! You must be 18+ years old to view this.</b>
    </p>
    <p>
      This page contains adult, violent, and gory content. Are you an adult?
      If you are underage, please click "No" to leave this page.
    </p>
    <img src="/images/R-18_icon.svg" class="r18icon" alt="R-18 Icon" width="200">
    <div>
      <button onclick="pass()" class="r18button">是 Yes</button>
      <button onclick="notpass()" class="r18button">否 No</button>
    </div>
  </div>
</div>
`;

	/* 讀取cookie並判斷*/
  document.addEventListener("DOMContentLoaded", function () {
    if (document.cookie.includes("isadult=yes")) {
      pass();
    } else {
      let newDivpopupwindow = document.createElement("div");
      newDivpopupwindow.innerHTML = formhtml;
      document.body.appendChild(newDivpopupwindow);
      window.onscroll = function () {
        window.scrollTo(0, 0);
      };
    }
  });

  /* 按按鈕之後的行為 */
  function pass() {
    const popup = document.getElementById("popwindow");
    if (popup) {
      popup.style.display = "none";
    }
    window.onscroll = function () { };
    document.cookie = "isadult=yes; path=/; max-age=86400;";
  }
  function notpass() {
    window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
  }

</script>