zqlit
e0c5ac5739
- 人机验证抽成 human.js 模块，改成 Cloudflare Turnstile 风格的「点一下验证」， 控件移到「评论一下」发送按钮左侧（不再用图形验证码那一套） - 留言页 / 文章页两段内联脚本（友链弹窗、人机验证）抽成模块随 page-only.js 加载。 原先内联 <script> 写在 #pjax-container 外，PJAX 只换容器内容不重新执行它， 从首页 PJAX 进留言页会出现「申请友链卡片点了没反应」「没有人机验证控件」 - 友链申请弹窗 #flApplyBox 隐藏滚动条（内容仍可滚，避开细滚动条 + 毛玻璃的割裂感） - 内容分割线抽成 partial divider.html，hugo.toml [params.divider] 可切 icon（原生 uk-divider-icon）/ image（本地图片），当前用 icon - 投票契约修复（后端 blog-admin）：Artalk 客户端把方向编在 target_name 后缀 （comment_up / comment_down / page_up / page_down）、路径只有两段， 而原先只注册了三段 :choice 路由 → 点赞/踩一路 404、界面点了没反应。 补 POST /votes/:target_name/:target_id，新增 parseVoteTarget() 同时兼容两套契约 （名字里与路径里方向矛盾时判非法，不静默取其一），错误文案改用实体名 - 无身份点赞不再静默失败：artalk.js 加 __atkVoteGuard， 未填昵称/邮箱时拦截并提示「填写昵称和邮箱后才能点赞」， 同时把光标送到昵称框（多个同名输入框逐个试，以 focus 真生效为判据）
137 lines
8.5 KiB
JavaScript
137 lines
8.5 KiB
JavaScript
/**
|
||
* 友链自助申请弹窗
|
||
*
|
||
* 为什么独立成模块（而不是留在 layouts/page/comment.html 的内联 <script>）：
|
||
* 那段脚本写在 #pjax-container 外面，PJAX 只换容器内容、不会重新执行它 ——
|
||
* 用户从首页 PJAX 进留言页时 window.flApplyOpenModal 根本没定义，
|
||
* 「申请友链」卡片点了没反应；直接刷新（整页加载）才正常。抽到
|
||
* page-only bundle 里随 PJAX 加载，两种进入方式行为一致。
|
||
*
|
||
* 幂等性：弹窗节点挂 document.body（跨 PJAX 存活），buildModal 二次调用直接复用；
|
||
* 事件监听只在首次构建时挂，不会重复注册。
|
||
*/
|
||
(function () {
|
||
if (window.__flApplyInit) return; // PJAX 重复执行防抖
|
||
window.__flApplyInit = true;
|
||
|
||
var BASE = (window.rssApiBase || 'https://api.200181.xyz').replace(/\/$/, '');
|
||
|
||
function buildModal() {
|
||
if (document.getElementById('flApplyMask')) return document.getElementById('flApplyMask');
|
||
var mask = null;
|
||
var style = document.createElement('style');
|
||
style.textContent =
|
||
'#flApplyMask{position:fixed;inset:0;z-index:9999;display:none;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)}' +
|
||
'#flApplyMask.on{display:flex}' +
|
||
'#flApplyBox{background:var(--bg-card,#fff);color:var(--text-main,#253244);border-radius:12px;max-width:420px;width:100%;' +
|
||
'box-sizing:border-box;padding:22px;box-shadow:0 16px 48px rgba(15,23,42,.25);max-height:88vh;overflow:auto}' +
|
||
'[data-theme="dark"] #flApplyBox{box-shadow:0 16px 48px rgba(0,0,0,.55)}' +
|
||
'#flApplyBox .fl-field{display:block;margin-bottom:10px}' +
|
||
'#flApplyBox .fl-label{display:block;font-size:12px;color:var(--text-muted,#8a94a6);margin-bottom:4px}' +
|
||
'#flApplyBox input,#flApplyBox textarea{width:100%;box-sizing:border-box;padding:8px 10px;' +
|
||
'border:1px solid var(--border-main,#e7e9ee);border-radius:6px;font-size:14px;' +
|
||
'background:var(--bg-input,#fff);color:inherit;font-family:inherit}' +
|
||
'#flApplyBox input:focus,#flApplyBox textarea:focus{outline:none;border-color:var(--theme-main,#07c160);' +
|
||
'box-shadow:0 0 0 3px var(--theme-main-20,rgba(7,193,96,.2))}' +
|
||
/* 主题 main.css 有一条全局 button 归一化规则（margin-left:23%; margin-top:10px;
|
||
border:1px solid; background:#222），会把提交按钮推右溢出弹窗 → 这里用 id 选择器压过它 */
|
||
'#flSubmit{display:block;width:100%;margin:0;background:var(--theme-main,#07c160);border:none;color:#fff;' +
|
||
'padding:11px 0;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:filter .2s}' +
|
||
'#flSubmit:hover{filter:brightness(1.06)}' +
|
||
'#flSubmit:disabled{opacity:.6;cursor:default}' +
|
||
/* 弹窗滚动条：细一点、跟随主题，别用系统那根粗滚动条 */
|
||
/* 完全隐藏滚动条（内容仍可滚）：细滚动条在内层圆角 + 毛玻璃上很割裂。
|
||
三条都写：Firefox(scrollbar-width)、IE/Edge(-ms-)、Webkit(伪元素)。 */
|
||
'#flApplyBox{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}' +
|
||
'#flApplyBox::-webkit-scrollbar{width:0;height:0;display:none}' +
|
||
'#flApplyBox::-webkit-scrollbar-track{background:transparent}' +
|
||
'#flApplyBox::-webkit-scrollbar-thumb{background:transparent}';
|
||
document.head.appendChild(style);
|
||
|
||
mask = document.createElement('div');
|
||
mask.id = 'flApplyMask';
|
||
mask.innerHTML =
|
||
'<div id="flApplyBox">' +
|
||
'<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">' +
|
||
'<b style="font-size:16px;display:flex;align-items:center;gap:8px">' +
|
||
'<span style="width:4px;height:16px;border-radius:2px;background:var(--theme-main,#07c160);display:inline-block"></span>友链自助申请</b>' +
|
||
'<span id="flApplyClose" style="cursor:pointer;color:var(--text-muted,#8a94a6);font-size:22px;line-height:1" title="关闭">×</span>' +
|
||
'</div>' +
|
||
'<label class="fl-field"><span class="fl-label">站点名称 *</span>' +
|
||
'<input id="flName" placeholder="我的小站"></label>' +
|
||
'<label class="fl-field"><span class="fl-label">站点链接 *</span>' +
|
||
'<input id="flUrl" placeholder="https://example.com"></label>' +
|
||
'<label class="fl-field"><span class="fl-label">图标链接（选填，留空自动为你抓取站点图标）</span>' +
|
||
'<input id="flIcon" placeholder="https://example.com/logo.png"></label>' +
|
||
'<label class="fl-field"><span class="fl-label">订阅地址（RSS/Atom）*</span>' +
|
||
'<input id="flFeed" placeholder="https://example.com/feed"></label>' +
|
||
'<label class="fl-field"><span class="fl-label">邮箱 *（接收审核结果）</span>' +
|
||
'<input id="flEmail" type="email" placeholder="you@example.com"></label>' +
|
||
'<label class="fl-field" style="margin-bottom:14px"><span class="fl-label">站点简介（选填）</span>' +
|
||
'<textarea id="flDesc" rows="2" style="resize:vertical"></textarea></label>' +
|
||
'<div id="flMsg" hidden style="font-size:13px;margin-bottom:10px"></div>' +
|
||
'<button id="flSubmit">提交申请</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(),
|
||
image: document.getElementById('flIcon').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 = 'var(--theme-main,#07c160)'; 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.classList.remove('on');
|
||
}
|
||
|
||
/* 供 artalk.js 的 comment-rendered（置顶评论卡片）调用 */
|
||
window.flApplyOpenModal = function () {
|
||
buildModal().classList.add('on');
|
||
};
|
||
|
||
/* 兜底：卡片节点被 PJAX/Artalk 重建后自身监听可能丢失，
|
||
这里用 document 级事件委托再接一层（打开是幂等的，重复触发无害） */
|
||
document.addEventListener('click', function (e) {
|
||
var hit = e.target && e.target.closest && e.target.closest('.atk-fl-card, .atk-fl-card-wrap');
|
||
if (hit) window.flApplyOpenModal();
|
||
});
|
||
})();
|