zqlit
50a906e07c
优化： - initArtalk 加节点级幂等守卫（mount.__atkInited，失败回滚）， 消除 artalk.html/mypjax 多入口导致的 4× comments + 4× pv 重复请求 - fetch 包装层对无 body 的 GET/HEAD 去掉多余 content-type， 消掉 Artalk 对 GET /comments 的 CORS 预检（按完整 URL 缓存， 每篇文章都重付一次 RTT）。实测评论列表 +1150~1565ms → +626ms 修复： - 评论列表骨架屏改注入 .atk-list-body（原骨架在 #Comments 内， 被 Artalk.init 清空），list-loaded/故障/12s 兜底移除 - 友链申请弹窗抽成 modules/friendlink.js 进 page-only bundle （原内联脚本在 #pjax-container 外，pjax 后 flApplyOpenModal 未定义） - toast 统一走本地化 Message.js/Qmsg 适配层（保留 window.Toast/showToast 旧 API） 文档： - README / 架构总览 更新；新增 评论加载优化方案.md
279 lines
12 KiB
HTML
279 lines
12 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>
|
||
|
||
{{/* 友链自助申请弹窗已抽到 assets/js/modules/friendlink.js（随 page-only.js 加载）。
|
||
原先这段内联脚本写在 #pjax-container 外面：PJAX 只换容器内容、不会重新执行它，
|
||
从首页 PJAX 进留言页时 window.flApplyOpenModal 未定义 → 「申请友链」卡片点了没反应；
|
||
直接刷新（整页加载）才正常。抽成模块后两种进入方式行为一致。 */}}
|
||
|
||
<script>
|
||
/* 人机验证（自研「一键验证」）—— 服务端见 artalk-cf/src/lib/human.ts
|
||
读者体验：默认什么都不用做（浏览器静默算一个 PoW，约 0.1~2 秒，后台完成）；
|
||
信号不足时才出现「点一下验证」小方块；再可疑才弹图形验证码。
|
||
通行证按 IP 记在服务端（KV，30 分钟），前端不传任何 token，所以不需要改 Artalk 客户端。 */
|
||
(function () {
|
||
var BASE = '{{ $rssBase := site.Params.rssapi.base | default "https://api.200181.xyz" }}{{ $rssBase }}';
|
||
var API = BASE + '/api/v2';
|
||
var DIFFICULTY = 4;
|
||
var PREFIX = new Array(DIFFICULTY + 1).join('0');
|
||
|
||
var started = Date.now();
|
||
var events = 0, honey = '', hasPass = false, busy = false, widget = null, tries = 0;
|
||
|
||
// ── 行为信号：人类随手动一下就会有，脚本环境常常一个都没有
|
||
['mousemove', 'pointerdown', 'keydown', 'keyup', 'input', 'focusin', 'scroll', 'wheel',
|
||
'touchstart', 'click'].forEach(function (ev) {
|
||
document.addEventListener(ev, function () { events++; }, { passive: true });
|
||
});
|
||
|
||
function injectCss() {
|
||
if (document.getElementById('atk-human-css')) return;
|
||
var st = document.createElement('style');
|
||
st.id = 'atk-human-css';
|
||
st.textContent =
|
||
'.atk-human-box{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:8px 12px;' +
|
||
'border:1px solid var(--border-main,#eee);border-radius:8px;background:var(--bg-card,#fff);' +
|
||
'font-size:13px;color:var(--text-main,#333);transition:border-color .2s,background .2s}' +
|
||
'.atk-human-box.is-click{cursor:pointer}' +
|
||
'.atk-human-box.is-click:hover{border-color:var(--theme-main,#07c160)}' +
|
||
'.atk-human-box.is-busy{opacity:.7;cursor:default}' +
|
||
'.atk-human-box-ic{flex:none;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;' +
|
||
'justify-content:center;font-size:12px;color:#fff;background:var(--theme-main,#07c160)}' +
|
||
'.atk-human-box.is-captcha .atk-human-box-ic{background:#d9534f}' +
|
||
'.atk-human-box-tx{flex:1;min-width:0}' +
|
||
'.atk-human-img{flex:none;height:34px;width:102px;border-radius:4px;cursor:pointer}' +
|
||
'.atk-human-inp{flex:none;width:78px;padding:4px 6px;border:1px solid var(--border-main,#ddd);' +
|
||
'border-radius:4px;font-size:13px;box-sizing:border-box;outline:none;background:transparent;color:inherit}' +
|
||
'.atk-human-btn{flex:none;padding:4px 10px;border:none;border-radius:4px;cursor:pointer;' +
|
||
'background:var(--theme-main,#07c160);color:#fff;font-size:12px}' +
|
||
'[data-theme="dark"] .atk-human-box{border-color:rgba(255,255,255,.14)}';
|
||
document.head.appendChild(st);
|
||
}
|
||
|
||
function hex(buf) {
|
||
var b = new Uint8Array(buf), out = '';
|
||
for (var i = 0; i < b.length; i++) out += ('0' + b[i].toString(16)).slice(-2);
|
||
return out;
|
||
}
|
||
function sha256(str) {
|
||
return crypto.subtle.digest('SHA-256', new TextEncoder().encode(str)).then(hex);
|
||
}
|
||
|
||
/* 找 nonce 让 sha256(challenge+nonce) 以 N 个 0 开头。
|
||
crypto.subtle 是异步的，逐次 await 的 promise 开销远大于哈希本身：
|
||
所以按 CHUNK 串一条链、每 CHUNK*YIELD_EVERY 次让出一次主线程，
|
||
页面保持流畅，总耗时压到 1 秒上下（全程后台，读者无感）。 */
|
||
var CHUNK = 512, YIELD_EVERY = 8;
|
||
function solve(challenge) {
|
||
var i = 0;
|
||
function step() {
|
||
var chain = Promise.resolve(null);
|
||
var found0 = null;
|
||
var limit = i + CHUNK * YIELD_EVERY;
|
||
while (i < limit && i < 3000000) {
|
||
(function (n) {
|
||
chain = chain.then(function () {
|
||
if (found0 !== null) return found0; // 已找到 → 后面的直接短路
|
||
return sha256(challenge + n).then(function (h) {
|
||
if (h.slice(0, DIFFICULTY) === PREFIX) { found0 = n; return n; }
|
||
return null;
|
||
});
|
||
});
|
||
})(i++);
|
||
}
|
||
return chain.then(function (found) {
|
||
if (found !== null) return found;
|
||
if (i >= 4000000) return null;
|
||
return new Promise(function (r) { setTimeout(r, 0); }).then(step);
|
||
});
|
||
}
|
||
return step();
|
||
}
|
||
|
||
function api(path, body) {
|
||
return fetch(API + path, {
|
||
method: body ? 'POST' : 'GET',
|
||
headers: body ? { 'Content-Type': 'application/json' } : undefined,
|
||
body: body ? JSON.stringify(body) : undefined,
|
||
}).then(function (r) { return r.json().catch(function () { return {}; }); });
|
||
}
|
||
|
||
// ── 控件
|
||
function editorEl() {
|
||
return document.querySelector('.atk-main-editor') || document.querySelector('.atk-comment-wrap');
|
||
}
|
||
function ensureWidget() {
|
||
if (widget && widget.isConnected) return widget;
|
||
var ed = editorEl();
|
||
if (!ed || !ed.parentNode) return null;
|
||
widget = document.createElement('div');
|
||
widget.className = 'atk-human-box';
|
||
ed.parentNode.insertBefore(widget, ed);
|
||
injectCss();
|
||
return widget;
|
||
}
|
||
function dropWidget() {
|
||
if (widget && widget.parentNode) widget.parentNode.removeChild(widget);
|
||
widget = null;
|
||
}
|
||
function ensureHoneypot() {
|
||
if (document.getElementById('atk-human-hp')) return;
|
||
var ed = editorEl();
|
||
if (!ed) return;
|
||
var i = document.createElement('input');
|
||
i.id = 'atk-human-hp'; i.type = 'text'; i.tabIndex = -1; i.autocomplete = 'off';
|
||
i.setAttribute('aria-hidden', 'true');
|
||
i.style.cssText = 'position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0';
|
||
i.addEventListener('input', function () { honey = i.value; });
|
||
ed.appendChild(i);
|
||
}
|
||
|
||
function done() {
|
||
var w = ensureWidget();
|
||
if (!w) { hasPass = true; return; }
|
||
w.className = 'atk-human-box';
|
||
w.onclick = null;
|
||
w.innerHTML = '<span class="atk-human-box-ic">✓</span><span class="atk-human-box-tx">已通过人机验证</span>';
|
||
setTimeout(dropWidget, 1600);
|
||
}
|
||
|
||
function showCaptcha() {
|
||
var w = ensureWidget();
|
||
if (!w) { if (tries++ < 20) setTimeout(showCaptcha, 800); return; }
|
||
w.className = 'atk-human-box is-captcha';
|
||
w.onclick = null;
|
||
w.innerHTML = '<span class="atk-human-box-ic">!</span>' +
|
||
'<span class="atk-human-box-tx">请输入图中的字符（点图片可换一张）</span>' +
|
||
'<img class="atk-human-img" alt="验证码"><input class="atk-human-inp" maxlength="6" autocomplete="off">' +
|
||
'<button class="atk-human-btn" type="button">确认</button>';
|
||
var img = w.querySelector('.atk-human-img');
|
||
var inp = w.querySelector('.atk-human-inp');
|
||
function refresh() {
|
||
img.style.display = '';
|
||
api('/captcha').then(function (c) {
|
||
if (c && c.img_data) { img.src = c.img_data; }
|
||
else { fail('验证码暂时取不到'); }
|
||
}).catch(function () { fail('验证码暂时取不到'); });
|
||
}
|
||
// 图形验证码取不到（接口抖动/数据库不可用）时给个可重试的提示，别留一张破图
|
||
function fail(msg) {
|
||
img.style.display = 'none';
|
||
var t = w.querySelector('.atk-human-box-tx');
|
||
if (t) { t.innerHTML = msg + '，<b style="cursor:pointer;text-decoration:underline">点这里重试</b>'; }
|
||
}
|
||
w.addEventListener('click', function (e) {
|
||
if (e.target && e.target.tagName === 'B') refresh();
|
||
});
|
||
refresh();
|
||
img.onclick = refresh;
|
||
function submit() {
|
||
var v = (inp.value || '').trim();
|
||
if (!v) return;
|
||
api('/captcha/verify', { value: v }).then(function (r) {
|
||
if (r && r.msg === 'Success') { hasPass = true; done(); }
|
||
else { inp.value = ''; refresh(); }
|
||
});
|
||
}
|
||
w.querySelector('.atk-human-btn').onclick = submit;
|
||
inp.addEventListener('keydown', function (e) { if (e.key === 'Enter') submit(); });
|
||
inp.focus();
|
||
}
|
||
|
||
function showClick() {
|
||
var w = ensureWidget();
|
||
if (!w) { if (tries++ < 20) setTimeout(showClick, 800); return; }
|
||
w.className = 'atk-human-box is-click';
|
||
w.innerHTML = '<span class="atk-human-box-ic">✓</span>' +
|
||
'<span class="atk-human-box-tx">点一下完成验证，然后就能发评论了</span>';
|
||
w.onclick = function () {
|
||
if (busy) return;
|
||
w.className = 'atk-human-box is-busy';
|
||
w.querySelector('.atk-human-box-tx').textContent = '验证中…';
|
||
run(true);
|
||
};
|
||
}
|
||
|
||
// ── 主流程
|
||
// 证明只算一次并缓存：点「点一下验证」复用同一个 nonce 重发（补上 clicked 信号），
|
||
// 所以点击是**瞬间完成**的，不会让访客再等一次算力。
|
||
var proof = null;
|
||
|
||
function ensureProof() {
|
||
if (proof && proof.exp > Date.now() + 5000) return Promise.resolve(proof);
|
||
return api('/human/challenge').then(function (ch) {
|
||
if (!ch || ch.enabled === false || ch.pass) return null;
|
||
return solve(ch.challenge).then(function (nonce) {
|
||
if (nonce === null) return null;
|
||
proof = { challenge: ch.challenge, nonce: nonce, exp: ch.exp, sig: ch.sig };
|
||
return proof;
|
||
});
|
||
});
|
||
}
|
||
|
||
function run(clicked) {
|
||
if (busy) return Promise.resolve();
|
||
if (hasPass) return Promise.resolve();
|
||
busy = true;
|
||
return api('/human/status').then(function (st) {
|
||
if (!st || st.enabled === false || st.pass) { hasPass = true; dropWidget(); return null; }
|
||
if (!window.crypto || !crypto.subtle) { showCaptcha(); return null; }
|
||
return ensureProof().then(function (pr) {
|
||
if (!pr) { showCaptcha(); return null; }
|
||
return api('/human/verify', {
|
||
challenge: pr.challenge, nonce: pr.nonce, exp: pr.exp, sig: pr.sig,
|
||
elapsedMs: Date.now() - started, events: events,
|
||
webdriver: navigator.webdriver === true, honeypot: honey, clicked: !!clicked,
|
||
}).then(function (res) {
|
||
if (res && res.pass) { hasPass = true; done(); return; }
|
||
if (res && res.need_captcha) { showCaptcha(); return; }
|
||
showClick();
|
||
});
|
||
});
|
||
}).catch(function () { /* 网络异常就不打扰读者，服务端仍有图形验证码兜底 */ })
|
||
.then(function () { busy = false; });
|
||
}
|
||
|
||
function init() {
|
||
if (!document.querySelector('.comments-area')) return; // 非评论页不打扰
|
||
started = Date.now(); events = 0; hasPass = false; busy = false; tries = 0; proof = null;
|
||
dropWidget();
|
||
ensureHoneypot();
|
||
run(false);
|
||
// 编辑器获得焦点时再确认一次（通行证 30 分钟，长了就续）
|
||
setTimeout(function () {
|
||
var ed = editorEl();
|
||
if (ed) ed.addEventListener('focusin', function () { if (!hasPass) run(false); });
|
||
}, 1500);
|
||
}
|
||
|
||
/* 调试/自测钩子（线上留着也无害，方便需要时手动触发两种控件看一眼） */
|
||
window.__humanCheck = {
|
||
state: function () { return { hasPass: hasPass, busy: busy, events: events, honey: honey }; },
|
||
run: run, showClick: showClick, showCaptcha: showCaptcha, drop: dropWidget,
|
||
};
|
||
|
||
document.addEventListener('pjax:complete', function () { setTimeout(init, 300); });
|
||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
|
||
else init();
|
||
})();
|
||
</script>
|
||
{{ end }} |