blog/themes/Ying/layouts/page/comment.html

{{ define "main" }}
<div id="pjax-container" uk-scrollspy="target: > #szh,hr,h2,p; cls: uk-animation-slide-bottom-small; delay: 0">
  <!-- 用于 Pjax 获取当前文章 ID -->
  <div id="data-pid" style="display:none;">{{ .RelPermalink }}</div>
  <div class="post-content" itemprop="articleBody" uk-scrollspy="target: > #szh; cls: uk-animation-slide-bottom-small; delay: 0">
    {{ .Content }}
    <div id="szh" onclick="copySzhContent()" style="cursor: pointer;" title="点击复制">
      - 名称：{{ .Site.Params.message_info.name | default .Site.Params.artalk.site }}<br>
      - 简介：{{ .Site.Params.message_info.description | default .Site.Params.author.description }}<br>
      - 链接：{{ .Site.Params.message_info.url | default .Site.BaseURL }}<br>
      - 图标：{{ .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">
    <!-- 评论区内容 -->
    {{ partial "artalk.html" . }}
    <!-- 评论区内容结束 -->
  </div>

</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>
(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(); });

  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 = '提交申请';
      });
  });
})();
</script>
{{ end }}