今天微软给我寄来了一封信：要加 Cookie 同意？！

今天的 inbox 里突然闪了一下——
微软 Clarity 发来一封长长的邮件 📩，大意是：

「小伙伴你好，从 2025 年 10 月 31 日开始，在欧洲、英国和瑞士，Clarity 要求所有网站必须明确传递 Cookie 同意信号。如果不做的话，你的录屏、漏斗之类的功能会受到限制哦～」

看完瞬间脑补出一种“学园风校规公告”既视感：

「同学，请在这里打个 √，同意我们使用 Cookie，不然成绩单（数据分析）可能就不完整啦！」

🍪 Cookie 同意的意义

说白了，这就是合规要求。在欧盟、英国这些地方，用户必须点头才行，不然数据只能匿名化。
至于我们大绵羊博客 🐑，本来就是兴趣使然的小天地，但既然要和 Clarity 玩，就得按规则来。

🔧 我做了什么？

于是，我撸了一个二次元风格（？）的 Cookie 同意插件！

• 页面底部会弹出一条提示条：
  ✨「要不要接受 Cookie 呢？同意的话可以获得更完整的冒险日志，不同意也没关系！」
• 选项按钮：
  • 💖 接受全部
  • 🔧 管理设置
  • 🙅 全部拒绝

点了之后，后台就会把你的选择告诉微软 Clarity（用的是新出的 consentv2 API），这样 Clarity 就不会闹脾气啦。

🎭 形式主义的魔法

老实说，这玩意儿在国内基本就是形式主义的魔法：

• 绝大多数访客看到弹窗，都是秒点“接受”。
• 对 Clarity 来说，却是合规的关键，不然它就罢工不给数据。

所以……插件的意义更像是「交作业 ✅」。
——就像动漫里老师要求上交“健康检查表”，大家都是匆匆在最后一秒补完 (笑)。

🚀 下一步（如果你想的话 （笑））

配好 Clarity 项目 ID
打开后台 Consent Mode
等 10 月 31 日钟声敲响前，确保我的“形式主义同意插件”能顺利运行。
就当是给网站加了一点「合规 Buff 了」🎀。

插件代码

把中文改成自己站的就OK啦 Consent Mode 需要自己配置（也可以不配置像我一样做一个形式主义）

<?php
/**
 * Plugin Name: DMY Cookie Consent
 * Description: 轻量级 Cookie 提示与偏好设置
 * Version: 1.0.0
 * Author: DMY
 * License: GPL3
 */

if (!defined('ABSPATH')) { exit; }

function dmy_cookie_privacy_url() {
  if (function_exists('get_privacy_policy_url')) {
    $url = get_privacy_policy_url();
    if ($url) return esc_url($url);
  }
  return esc_url(home_url('/privacy'));
} 

/** 样式 */
add_action('wp_head', function () {
  ?>
  <style>
    .dmy-cookie-banner {
      position: fixed; left: 0; right: 0; bottom: 0;
      z-index: 99999; background: #fffaf5; border-top: 1px solid #f2dede;
      padding: 12px 16px; box-shadow: 0 -6px 16px rgba(0,0,0,.06); display:none;
      font-family: "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      animation: dmy-cookie-fadeIn .4s ease-in-out;
    }
    .dmy-cookie-inner { display: flex;gap: 12px;align-items: center;justify-content: space-between;flex-wrap: wrap;}
    .dmy-cookie-message {
      font-size: 14px; line-height: 1.6; color:#333; margin: 0;
    }
    .dmy-cookie-message a {     color: #ff5473; text-decoration: none; font-weight:700; }
    .dmy-cookie-actions { display:flex; gap:10px; flex-wrap:wrap; }
    .dmy-cookie-btn {
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #7d97f9;
    background: #e4e8f77a;
    }
    .dmy-cookie-btn:hover { background: rgb(77 130 249 / 21%); }
    .dmy-cookie-btn-primary {     background: rgba(255, 111, 6, 0.1);
    color: #ff6f06; }
    .dmy-cookie-btn-primary:hover { opacity:.95; background: rgb(255 111 6 / 22%); }

    /* 管理弹窗 */
    .dmy-cookie-modal-backdrop {
      position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100000; display:none;
    }
    .dmy-cookie-modal {
      position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
      width: min(92vw, 520px); background:#fff; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.18); padding: 16px;
    }
    .dmy-cookie-modal h3 { margin: 0 0 8px; font-size: 18px; }
    .dmy-cookie-modal p { margin: 0 0 12px; color:#555; }
    .dmy-cookie-field { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px dashed #eee; }
    .dmy-cookie-field:first-of-type { border-top:none; }
    .dmy-cookie-field label { font-weight: 600; }
    .dmy-cookie-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top: 14px; }
    .dmy-cookie-link { color:#ff6f61; text-decoration:none; font-weight:700; }
    @keyframes dmy-cookie-fadeIn { from { opacity:0; transform: translateY(10px);} to{opacity:1; transform: translateY(0);} }

    @media (max-width: 640px) {
      .dmy-cookie-message { font-size: 12px; line-height:1.5; width:100%; text-align:left; }
      .dmy-cookie-actions { width:100%; justify-content:flex-start; }
      .dmy-cookie-btn { font-size:12px; padding:7px 12px; }
    }
  </style>
  <?php
});

/** HTML + JS */
add_action('wp_footer', function () {
  $privacy_url = dmy_cookie_privacy_url();
  ?>
  <div class="dmy-cookie-banner" role="region" aria-label="Cookie 提示" id="dmyCookieBanner">
    <div class="dmy-cookie-inner wrapper">
      <p class="dmy-cookie-message">
        🐑 大绵羊博客使用 Cookie 以改进你的浏览体验与内容个性化。你可以接受全部，或在“管理设置”中自定义同意项。
        详情请查看我们的 <a class="dmy-cookie-link" href="<?php echo $privacy_url; ?>" target="_blank" rel="nofollow noopener">隐私政策</a>。
      </p>
      <div class="dmy-cookie-actions">
        <button class="dmy-cookie-btn" id="dmyCookieManageBtn" type="button">管理设置</button>
        <button class="dmy-cookie-btn dmy-cookie-btn-primary" id="dmyCookieAcceptAllBtn" type="button">接受全部</button>
      </div>
    </div>
  </div>

  <!-- 管理设置弹窗 -->
  <div class="dmy-cookie-modal-backdrop" id="dmyCookieModalBackdrop" aria-hidden="true">
    <div class="dmy-cookie-modal" role="dialog" aria-modal="true" aria-labelledby="dmyCookieModalTitle">
      <h3 id="dmyCookieModalTitle">Cookie 偏好设置</h3>
      <p>必要 Cookie 始终启用。你可以根据需要开启/关闭其他类别。</p>
      <div class="dmy-cookie-field">
        <input type="checkbox" id="dmyCookieAnalytics">
        <label for="dmyCookieAnalytics">分析统计（Analytics）</label>
      </div>
      <div class="dmy-cookie-field">
        <input type="checkbox" id="dmyCookieAds">
        <label for="dmyCookieAds">广告与个性化（Ads）</label>
      </div>
      <div class="dmy-cookie-modal-actions">
        <button class="dmy-cookie-btn" id="dmyCookieRejectAllBtn" type="button">全部拒绝</button>
        <button class="dmy-cookie-btn dmy-cookie-btn-primary" id="dmyCookieSaveBtn" type="button">保存设置</button>
      </div>
    </div>
  </div>

<script>
(function () {
  const KEY = 'dmy_cookie_consent_v1';
  let banner = document.getElementById('dmyCookieBanner');
  let manageBtn = document.getElementById('dmyCookieManageBtn');
  let acceptAllBtn = document.getElementById('dmyCookieAcceptAllBtn');
  let modal = document.getElementById('dmyCookieModalBackdrop');
  let saveBtn = document.getElementById('dmyCookieSaveBtn');
  let rejectAllBtn = document.getElementById('dmyCookieRejectAllBtn');
  let fieldAnalytics = document.getElementById('dmyCookieAnalytics');
  let fieldAds = document.getElementById('dmyCookieAds');

  function readConsent() {
    try { return JSON.parse(localStorage.getItem(KEY) || 'null'); } catch(e) { return null; }
  }
  function writeConsent(obj) {
    localStorage.setItem(KEY, JSON.stringify(obj));
    let expires = new Date(Date.now() + 180*24*60*60*1000).toUTCString();
    document.cookie = 'dmy_cookie_mark=1; path=/; expires=' + expires + '; SameSite=Lax';
  }
  function showBanner() { banner.style.display = 'block'; }
  function hideBanner() { banner.style.display = 'none'; }
  function openModal() {
    modal.style.display = 'block';
    modal.setAttribute('aria-hidden','false');
  }
  function closeModal() {
    modal.style.display = 'none';
    modal.setAttribute('aria-hidden','true');
  }

  // 初始化
  let stored = readConsent();
  if (!stored) {
    showBanner();
  } else {
    // if (stored.analytics) { /* load GA */ }
    // if (stored.ads) { /* load ads */ }
  }

  // 事件
  acceptAllBtn.addEventListener('click', function () {
    let consent = { necessary: true, analytics: true, ads: true, ts: Date.now() };
    writeConsent(consent);
    hideBanner();
    closeModal();
  });

  manageBtn.addEventListener('click', function () {
    let c = readConsent() || { necessary: true, analytics: false, ads: false };
    fieldAnalytics.checked = !!c.analytics;
    fieldAds.checked = !!c.ads;
    openModal();
  });

  saveBtn.addEventListener('click', function () {
    let consent = { necessary: true, analytics: fieldAnalytics.checked, ads: fieldAds.checked, ts: Date.now() };
    writeConsent(consent);
    hideBanner();
    closeModal();
  });

  rejectAllBtn.addEventListener('click', function () {
    let consent = { necessary: true, analytics: false, ads: false, ts: Date.now() };
    writeConsent(consent);
    hideBanner();
    closeModal();
  });

  modal.addEventListener('click', function (e) {
    if (e.target === modal) closeModal();
  });

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeModal();
  });
})();
</script>

  <?php
});