QunLIn
da1a77a313
- 置顶评论卡片化：管理员置顶且内容含「友链自助申请」的评论， 整条解析成申请入口卡片（隐藏昵称/页脚，渐变虚线卡片，点击打开 申请弹窗），其余置顶评论不受影响 - 弹窗 DOM 动态挂 document.body：评论容器带 transform 动画会把 position:fixed 劫持成相对定位，导致遮罩/表单跟着容器变形—— 挂 body 彻底规避 - 遮罩加 backdrop-filter 毛玻璃（GPU 合成，不影响页面性能）
112 lines
6.9 KiB
HTML
112 lines
6.9 KiB
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>
|
||
<hr class="uk-divider-icon">
|
||
<div class="comments-area">
|
||
<!-- 评论区内容 -->
|
||
{{ partial "artalk.html" . }}
|
||
<!-- 评论区内容结束 -->
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
/* 友链自助申请：弹窗动态挂到 document.body（评论容器带 transform 动画，
|
||
会把 position:fixed 劫持成相对定位，导致遮罩/表单跟着容器变形——
|
||
挂 body 彻底规避），遮罩用 backdrop-filter 毛玻璃（GPU 合成，不卡页面）。 */
|
||
(function () {
|
||
var BASE = '{{ $rssBase := site.Params.rssapi.base | default "https://api.200181.xyz" }}{{ $rssBase }}';
|
||
var mask = null;
|
||
|
||
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 = '提交申请';
|
||
});
|
||
});
|
||
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 }} |