友链申请卡片改挂置顶评论 + 弹窗挂 body 加毛玻璃

- 置顶评论卡片化：管理员置顶且内容含「友链自助申请」的评论，整条解析成申请入口卡片（隐藏昵称/页脚，渐变虚线卡片，点击打开申请弹窗），其余置顶评论不受影响 - 弹窗 DOM 动态挂 document.body：评论容器带 transform 动画会把 position:fixed 劫持成相对定位，导致遮罩/表单跟着容器变形—— 挂 body 彻底规避 - 遮罩加 backdrop-filter 毛玻璃（GPU 合成，不影响页面性能）
2026-10-03 13:08:14 +08:00
1 parent 5fcbd2a7b6
commit da1a77a313
@@ -11,18 +11,6 @@
      - 图标：{{ .Site.Params.message_info.icon | default .Site.Params.author.avatar }}
    </div>
  </div>
-
-  <!-- 友链自助申请入口（卡片样式与文章外链卡片一致） -->
-  {{ $rssBase := site.Params.rssapi.base | default "https://api.200181.xyz" }}
-  <a class="link-card" id="flApplyOpen" href="javascript:void(0)" style="margin:14px 0;text-decoration:none">
-    <img class="link-card-icon" src="/favicon.ico" alt="" loading="lazy"
-         onerror="this.src='{{ site.Params.author.avatar | default "/favicon.ico" }}';this.onerror=null;">
-    <span class="link-card-body">
-      <span class="link-card-title">友链自助申请</span>
-      <span style="font-size:12px;color:var(--at-color-meta,#8a94a6)">想和我交换友链？点这里填写申请，审核结果会邮件通知你</span>
-    </span>
-  </a>
-
  <hr class="uk-divider-icon">
  <div  class="comments-area">
    <!-- 评论区内容 -->
@@ -32,77 +20,93 @@

 </div>

-<!-- 友链申请弹窗 -->
-<div id="flApplyMask" hidden style="position:fixed;inset:0;z-index:9999;background:rgba(20,32,55,.45);display:flex;align-items:center;justify-content:center;padding:16px">
-  <div style="background:#fff;color:#253244;border-radius:10px;max-width:420px;width:100%;padding:22px;box-shadow:0 12px 32px rgba(20,32,55,.2);max-height:90vh;overflow:auto">
-    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
-      <b style="font-size:16px">友链自助申请</b>
-      <span id="flApplyClose" style="cursor:pointer;color:#8a94a6;font-size:20px;line-height:1" title="关闭">×</span>
-    </div>
-    <label style="display:block;margin-bottom:10px"><span style="display:block;font-size:12px;color:#8a94a6;margin-bottom:4px">站点名称 *</span>
-      <input id="flName" style="width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #e7e9ee;border-radius:6px;font-size:14px" placeholder="我的小站"></label>
-    <label style="display:block;margin-bottom:10px"><span style="display:block;font-size:12px;color:#8a94a6;margin-bottom:4px">站点链接 *</span>
-      <input id="flUrl" style="width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #e7e9ee;border-radius:6px;font-size:14px" placeholder="https://example.com"></label>
-    <label style="display:block;margin-bottom:10px"><span style="display:block;font-size:12px;color:#8a94a6;margin-bottom:4px">订阅地址（RSS/Atom）*</span>
-      <input id="flFeed" style="width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #e7e9ee;border-radius:6px;font-size:14px" placeholder="https://example.com/feed"></label>
-    <label style="display:block;margin-bottom:10px"><span style="display:block;font-size:12px;color:#8a94a6;margin-bottom:4px">邮箱 *（接收审核结果）</span>
-      <input id="flEmail" type="email" style="width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #e7e9ee;border-radius:6px;font-size:14px" placeholder="you@example.com"></label>
-    <label style="display:block;margin-bottom:14px"><span style="display:block;font-size:12px;color:#8a94a6;margin-bottom:4px">站点简介（选填）</span>
-      <textarea id="flDesc" rows="2" style="width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #e7e9ee;border-radius:6px;font-size:14px;resize:vertical"></textarea></label>
-    <div id="flMsg" hidden style="font-size:13px;margin-bottom:10px"></div>
-    <button id="flSubmit" class="uk-button uk-button-primary" style="width:100%;background:#2f9e63;border:none;color:#fff;padding:10px;border-radius:6px;font-size:14px;cursor:pointer">提交申请</button>
-  </div>
-</div>
-
 <script>
+/* 友链自助申请：弹窗动态挂到 document.body（评论容器带 transform 动画，
+   会把 position:fixed 劫持成相对定位，导致遮罩/表单跟着容器变形——
+   挂 body 彻底规避），遮罩用 backdrop-filter 毛玻璃（GPU 合成，不卡页面）。 */
 (function () {
-  var BASE = '{{ $rssBase }}';
-  var open = document.getElementById('flApplyOpen');
-  var mask = document.getElementById('flApplyMask');
-  if (!open || !mask) return;
-  function close() { mask.hidden = true; }
-  open.addEventListener('click', function () {
-    mask.hidden = false;
-    var msg = document.getElementById('flMsg');
-    msg.hidden = true;
-  });
-  document.getElementById('flApplyClose').addEventListener('click', close);
-  mask.addEventListener('click', function (e) { if (e.target === mask) close(); });
+  var BASE = '{{ $rssBase := site.Params.rssapi.base | default "https://api.200181.xyz" }}{{ $rssBase }}';
+  var mask = null;

-  document.getElementById('flSubmit').addEventListener('click', function () {
-    var btn = this, msg = document.getElementById('flMsg');
-    var payload = {
-      name: document.getElementById('flName').value.trim(),
-      url: document.getElementById('flUrl').value.trim(),
-      feed: document.getElementById('flFeed').value.trim(),
-      email: document.getElementById('flEmail').value.trim(),
-      description: document.getElementById('flDesc').value.trim()
-    };
-    if (!payload.name || !payload.url || !payload.feed || !payload.email) {
-      msg.hidden = false; msg.style.color = '#d75a4a'; msg.textContent = '请填写全部必填项'; return;
-    }
-    btn.disabled = true; btn.textContent = '提交中…';
-    msg.hidden = true;
-    fetch(BASE + '/api/link-apply', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(payload)
-    }).then(function (r) { return r.json().then(function (d) { return { code: r.status, d: d }; }); })
-      .then(function (res) {
-        if (res.code === 200 && res.d.ok) {
-          msg.hidden = false; msg.style.color = '#2f9e63'; msg.textContent = res.d.message || '申请已提交';
-          btn.textContent = '已提交 ✓';
-          setTimeout(close, 2200);
-        } else {
-          msg.hidden = false; msg.style.color = '#d75a4a'; msg.textContent = res.d.error || '提交失败，请稍后再试';
+  function buildModal() {
+    if (document.getElementById('flApplyMask')) return document.getElementById('flApplyMask');
+    mask = document.createElement('div');
+    mask.id = 'flApplyMask';
+    mask.setAttribute('hidden', '');
+    mask.style.cssText = 'position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;' +
+      'background:rgba(15,23,42,.35);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);';
+    mask.innerHTML =
+      '<div style="background:#fff;color:#253244;border-radius:12px;max-width:420px;width:100%;padding:22px;' +
+        'box-shadow:0 16px 48px rgba(15,23,42,.25);max-height:88vh;overflow:auto">' +
+        '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">' +
+          '<b style="font-size:16px">友链自助申请</b>' +
+          '<span id="flApplyClose" style="cursor:pointer;color:#8a94a6;font-size:22px;line-height:1" title="关闭">×</span>' +
+        '</div>' +
+        '<label style="display:block;margin-bottom:10px"><span style="display:block;font-size:12px;color:#8a94a6;margin-bottom:4px">站点名称 *</span>' +
+          '<input id="flName" style="width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #e7e9ee;border-radius:6px;font-size:14px" placeholder="我的小站"></label>' +
+        '<label style="display:block;margin-bottom:10px"><span style="display:block;font-size:12px;color:#8a94a6;margin-bottom:4px">站点链接 *</span>' +
+          '<input id="flUrl" style="width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #e7e9ee;border-radius:6px;font-size:14px" placeholder="https://example.com"></label>' +
+        '<label style="display:block;margin-bottom:10px"><span style="display:block;font-size:12px;color:#8a94a6;margin-bottom:4px">订阅地址（RSS/Atom）*</span>' +
+          '<input id="flFeed" style="width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #e7e9ee;border-radius:6px;font-size:14px" placeholder="https://example.com/feed"></label>' +
+        '<label style="display:block;margin-bottom:10px"><span style="display:block;font-size:12px;color:#8a94a6;margin-bottom:4px">邮箱 *（接收审核结果）</span>' +
+          '<input id="flEmail" type="email" style="width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #e7e9ee;border-radius:6px;font-size:14px" placeholder="you@example.com"></label>' +
+        '<label style="display:block;margin-bottom:14px"><span style="display:block;font-size:12px;color:#8a94a6;margin-bottom:4px">站点简介（选填）</span>' +
+          '<textarea id="flDesc" rows="2" style="width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #e7e9ee;border-radius:6px;font-size:14px;resize:vertical"></textarea></label>' +
+        '<div id="flMsg" hidden style="font-size:13px;margin-bottom:10px"></div>' +
+        '<button id="flSubmit" style="width:100%;background:#2f9e63;border:none;color:#fff;padding:10px;border-radius:6px;font-size:14px;cursor:pointer">提交申请</button>' +
+      '</div>';
+    document.body.appendChild(mask);
+
+    mask.addEventListener('click', function (e) { if (e.target === mask) close(); });
+    document.getElementById('flApplyClose').addEventListener('click', close);
+    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
+
+    document.getElementById('flSubmit').addEventListener('click', function () {
+      var btn = this, msg = document.getElementById('flMsg');
+      var payload = {
+        name: document.getElementById('flName').value.trim(),
+        url: document.getElementById('flUrl').value.trim(),
+        feed: document.getElementById('flFeed').value.trim(),
+        email: document.getElementById('flEmail').value.trim(),
+        description: document.getElementById('flDesc').value.trim()
+      };
+      if (!payload.name || !payload.url || !payload.feed || !payload.email) {
+        msg.hidden = false; msg.style.color = '#d75a4a'; msg.textContent = '请填写全部必填项'; return;
+      }
+      btn.disabled = true; btn.textContent = '提交中…';
+      msg.hidden = true;
+      fetch(BASE + '/api/link-apply', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      }).then(function (r) { return r.json().then(function (d) { return { code: r.status, d: d }; }); })
+        .then(function (res) {
+          if (res.code === 200 && res.d.ok) {
+            msg.hidden = false; msg.style.color = '#2f9e63'; msg.textContent = res.d.message || '申请已提交';
+            btn.textContent = '已提交 ✓';
+            setTimeout(close, 2200);
+          } else {
+            msg.hidden = false; msg.style.color = '#d75a4a'; msg.textContent = res.d.error || '提交失败，请稍后再试';
+            btn.disabled = false; btn.textContent = '提交申请';
+          }
+        })
+        .catch(function () {
+          msg.hidden = false; msg.style.color = '#d75a4a'; msg.textContent = '网络异常，请稍后再试';
          btn.disabled = false; btn.textContent = '提交申请';
-        }
-      })
-      .catch(function () {
-        msg.hidden = false; msg.style.color = '#d75a4a'; msg.textContent = '网络异常，请稍后再试';
-        btn.disabled = false; btn.textContent = '提交申请';
-      });
-  });
+        });
+    });
+    return mask;
+  }
+
+  function close() {
+    var m = document.getElementById('flApplyMask');
+    if (m) m.setAttribute('hidden', '');
+  }
+
+  /* 供置顶评论卡片调用（artalk.js 的 comment-rendered 里触发） */
+  window.flApplyOpenModal = function () {
+    buildModal().removeAttribute('hidden');
+  };
 })();
 </script>
-{{ end }}
+{{ end }}