diff --git a/blog-admin/src/index.ts b/blog-admin/src/index.ts index 80e5b464..d684bd5d 100644 --- a/blog-admin/src/index.ts +++ b/blog-admin/src/index.ts @@ -39,7 +39,12 @@ router.put('/comments/:id', C.updateComment); router.del('/comments/:id', C.deleteComment); // ---------------------------------------------------------------- 投票 / 浏览量 +// ★ 投票：Artalk 客户端把「方向」编进 target_name（comment_up / comment_down / +// page_up / page_down），路径只有两段 → `POST /votes/:target_name/:target_id`。 +// 早期这里只注册了三段形式（:choice），与客户端对不上，导致点赞点了 404 没反应。 +// 现在两段（客户端契约）与三段（旧形式）都收。 router.get('/votes/:target_name/:target_id', P.voteGet); +router.post('/votes/:target_name/:target_id', P.voteCreate); router.post('/votes/:target_name/:target_id/:choice', P.voteCreate); router.post('/votes/sync', P.voteSync); router.post('/pages/pv', P.pagePV); diff --git a/blog-admin/src/routes/public.ts b/blog-admin/src/routes/public.ts index 4afca0f1..61834bd8 100644 --- a/blog-admin/src/routes/public.ts +++ b/blog-admin/src/routes/public.ts @@ -205,15 +205,51 @@ export async function verifyCaptcha(ctx: Ctx): Promise { // ==================================================================== 投票 +type VoteType = 'comment' | 'page'; +type VoteChoice = 'up' | 'down'; + +/** + * 解析投票目标，同时兼容两套契约（★ 2026-10-04 修正）： + * + * 1) **Artalk 客户端实际发的**：target_name 里已经编了方向 —— + * `comment_up` / `comment_down` / `page_up` / `page_down`，路径只有两段。 + * （客户端源码：`vote(`comment_${dir}`, id, userFields)` + * → `POST /votes/:target_name/:target_id`） + * 2) 本项目早期注册的三段形式：target_name = `comment`/`page` + 单独的 `:choice` 段。 + * + * 之前只认第 2 种，而客户端的请求打的是第 1 种形状 → 点赞/踩一路 404， + * 界面上点了没任何反应。返回 null 表示目标名非法。 + */ +function parseVoteTarget( + targetName: string, + choiceParam?: string, +): { type: VoteType; choice?: VoteChoice } | null { + const m = /^(comment|page)(?:_(up|down))?$/.exec(targetName || ''); + if (!m) return null; + + const type = m[1] as VoteType; + const embedded = m[2] as VoteChoice | undefined; + + if (choiceParam) { + if (choiceParam !== 'up' && choiceParam !== 'down') return null; + // 名字里和路径里都写了方向却不一致 → 判非法，别静默按其中一个处理 + if (embedded && embedded !== choiceParam) return null; + return { type, choice: choiceParam }; + } + return { type, choice: embedded }; +} + export async function voteGet(ctx: Ctx): Promise { const targetName = ctx.params.target_name; const targetId = parseInt(ctx.params.target_id, 10); - const type = targetName === 'comment' ? 'comment' : targetName === 'page' ? 'page' : ''; - if (!type) return fail(404, 'unknown vote target name'); + // 查询只关心「是评论还是页面」，方向忽略（up/down 一起返回） + const parsed = parseVoteTarget(targetName, ctx.params.choice); + if (!parsed) return fail(404, 'unknown vote target name'); + const type = parsed.type; if (!Number.isFinite(targetId)) return fail(400, 'invalid vote target id'); const row = await voteTotals(ctx.env, type, targetId); - if (!row) return fail(404, `${targetName} not found`); + if (!row) return fail(404, `${type} not found`); let isUp = false; let isDown = false; @@ -252,17 +288,19 @@ async function voteTotals( export async function voteCreate(ctx: Ctx): Promise { const targetName = ctx.params.target_name; const targetId = parseInt(ctx.params.target_id, 10); - const choice = ctx.params.choice; - const type = targetName === 'comment' ? 'comment' : targetName === 'page' ? 'page' : ''; - if (!type) return fail(404, 'unknown vote target name'); - if (choice !== 'up' && choice !== 'down') return fail(404, 'unknown vote choice'); + // 方向可能来自名字后缀（comment_up，Artalk 客户端），也可能来自三段路径的 :choice + const parsed = parseVoteTarget(targetName, ctx.params.choice); + if (!parsed) return fail(404, 'unknown vote target name'); + const type = parsed.type; + const choice = parsed.choice; + if (!choice) return fail(404, 'unknown vote choice'); if (!Number.isFinite(targetId)) return fail(400, 'invalid vote target id'); const ip = getClientIP(ctx.req); if (!(await rateLimit(ctx.env, `vote:${ip}`, 30, 60))) return fail(429, 'Too many requests'); const totals = await voteTotals(ctx.env, type, targetId); - if (!totals) return fail(404, `${targetName} not found`); + if (!totals) return fail(404, `${type} not found`); const body = await readBody(ctx.req); let voter = ctx.user; diff --git a/hugo.toml b/hugo.toml index 90f65b1a..41968a6c 100644 --- a/hugo.toml +++ b/hugo.toml @@ -105,6 +105,17 @@ hasCJKLanguage = true { title = "Rss订阅", url = "/rss.xml", icon = "ri-rss-fill" } ] + # ---------------------------------------------------------------------------- + # 内容分割线 (Post Divider) + # style = "icon" → 原生 uk-divider-icon（圆圈 + 两侧细线） + # = "image" → 用本地图片（图片请放 static/ 下，勿引外链） + # height 仅 image 样式生效：图片高度保护上限（正常宽度下达不到，图片铺满整行） + # ---------------------------------------------------------------------------- + [params.divider] + style = "icon" + image = "/image/footer-animal.webp" + height = "140px" + # ---------------------------------------------------------------------------- # 移动端配置 (Mobile Configuration) # ---------------------------------------------------------------------------- diff --git a/static/image/footer-animal.webp b/static/image/footer-animal.webp new file mode 100644 index 00000000..1b30c3bd Binary files /dev/null and b/static/image/footer-animal.webp differ diff --git a/themes/Ying/assets/css/main.css b/themes/Ying/assets/css/main.css index 02c4a0a8..885c690c 100644 --- a/themes/Ying/assets/css/main.css +++ b/themes/Ying/assets/css/main.css @@ -172,6 +172,42 @@ hr { padding: 0; } +/* ── 内容分割线：图片样式（由 hugo.toml 的 [params.divider].style 切换） ── */ +.post-divider-image { + display: flex; + justify-content: center; + align-items: center; + margin: 1.6rem 0; + line-height: 0; +} + +.post-divider-image img { + display: block; + width: 100%; + height: auto; + max-width: 100%; + /* --divider-max-h 仅作保护上限：正常内容宽度下高度远达不到， + 不会触发收缩，图片始终铺满整行 */ + max-height: var(--divider-max-h, 140px); + object-fit: contain; + opacity: 0.92; + transition: opacity 0.3s ease; +} + +.post-divider-image img:hover { + opacity: 1; +} + +@media screen and (max-width: 480px) { + .post-divider-image { + margin: 1.2rem 0; + } + + .post-divider-image img { + max-width: 100%; + } +} + [data-theme="dark"] hr { border-top-color: rgba(255, 255, 255, 0.2); } diff --git a/themes/Ying/assets/js/modules/artalk.js b/themes/Ying/assets/js/modules/artalk.js index eac49d29..9cf9d877 100644 --- a/themes/Ying/assets/js/modules/artalk.js +++ b/themes/Ying/assets/js/modules/artalk.js @@ -168,7 +168,7 @@ '.atk-svc-down .atk-main-editor{opacity:.55!important;filter:grayscale(1)!important}' + '.atk-svc-down .atk-copyright{display:none!important}' + '.atk-svc-down .atk-main-editor *{pointer-events:none}' + - '.atk-svc-down .atk-human-box{display:none}' + + '.atk-svc-down .atk-human-tf{display:none}' + '.atk-svc-down .atk-list-body{min-height:0!important}' + '.atk-editor-off-bar{display:flex;align-items:center;gap:8px;margin:12px 0 10px;padding:9px 14px;border-radius:8px;' + 'background:rgba(7,193,96,.06);border:1px solid rgba(7,193,96,.22);font-size:13px;line-height:1.6;color:var(--text-main,#333)}' + @@ -1384,3 +1384,74 @@ artalk.on('list-loaded', function() { listSkeletonHide(); } }; + +// ============================================================================ +// 投票前的身份提示 —— 别让读者点了「赞同」却毫无反应 +// +// 服务端（artalk-cf）的投票语义和 Artalk 原生一致：**票必须挂在身份上**， +// 未登录时要求 body 带 name + email，否则返回 400。而客户端只在 +// `userInfo.name && userInfo.email` 都齐了才会带上身份（见 Artalk.js 的 +// getUserFields）——没填过的读者点下去就是一个静默失败： +// 请求打到服务端、报错、界面上的数字纹丝不动，读者只会觉得「点坏了」。 +// +// 这里在 capture 阶段把这类点击拦下来（拦在 Artalk 自己的 handler 之前）， +// 给一句人话提示并把光标送到昵称输入框。填过身份的直接放行，不干扰。 +// ============================================================================ +(function () { + if (window.__atkVoteGuard) return; // PJAX 会重复执行本文件，只装一次 + window.__atkVoteGuard = true; + + var USER_KEY = 'ArtalkUser'; // Artalk 的用户存储键（nick / email / link / token） + + function readUser() { + try { + var raw = localStorage.getItem(USER_KEY); + return raw ? JSON.parse(raw) : null; + } catch (e) { + return null; + } + } + + // 已登录（有 token）服务端认 Authorization；游客必须昵称 + 邮箱 + function hasIdentity(u) { + if (!u) return false; + if (u.token) return true; + return !!(u.nick && u.email); + } + + document.addEventListener('click', function (e) { + var el = e.target; + var btn = el && el.closest ? el.closest('.atk-common-action-btn') : null; + if (!btn) return; + if (!/赞同|反对|顶|踩/.test(btn.textContent || '')) return; + if (hasIdentity(readUser())) return; + + // 拦在 Artalk 之前：不发那个注定 400 的请求，也不让数字假装动一下 + e.preventDefault(); + e.stopPropagation(); + + if (window.showToast) window.showToast('填写昵称和邮箱后才能点赞', 'warning'); + else if (window.Toast && window.Toast.warning) window.Toast.warning('填写昵称和邮箱后才能点赞'); + + // 把光标送到昵称输入框。 + // ⚠️ 不能只 querySelector 第一个：Artalk 的 DOM 里存在**不止一个** nick 输入框 + // （隐藏模板、未激活的回复框也算），第一个匹配到的往往不可焦点， + // 对它 focus() 会被浏览器静默忽略 —— activeElement 一点不变，很容易误判成"生效了"。 + // 所以逐个候选试，并以「focus 真的落到它身上」为唯一判据。 + function focusFirstUsable(sel) { + var list = document.querySelectorAll(sel); + for (var i = 0; i < list.length; i++) { + var el = list[i]; + if (!(el.offsetWidth || el.offsetHeight || el.getClientRects().length)) continue; + try { el.focus({ preventScroll: true }); } catch (err) { try { el.focus(); } catch (e2) { continue; } } + if (document.activeElement === el) return el; + } + return null; + } + + var nick = focusFirstUsable('.atk-header [name="nick"]') || focusFirstUsable('[name="nick"]'); + if (nick) { + try { nick.scrollIntoView({ block: 'center', behavior: 'smooth' }); } catch (err) { /* 老浏览器忽略 */ } + } + }, true); +})(); diff --git a/themes/Ying/assets/js/modules/friendlink.js b/themes/Ying/assets/js/modules/friendlink.js index fa364f88..3fd5be9e 100644 --- a/themes/Ying/assets/js/modules/friendlink.js +++ b/themes/Ying/assets/js/modules/friendlink.js @@ -41,12 +41,12 @@ '#flSubmit:hover{filter:brightness(1.06)}' + '#flSubmit:disabled{opacity:.6;cursor:default}' + /* 弹窗滚动条：细一点、跟随主题，别用系统那根粗滚动条 */ - '#flApplyBox{overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(140,150,160,.45) transparent}' + - '#flApplyBox::-webkit-scrollbar{width:6px;height:6px}' + + /* 完全隐藏滚动条（内容仍可滚）：细滚动条在内层圆角 + 毛玻璃上很割裂。 + 三条都写：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:rgba(140,150,160,.45);border-radius:3px}' + - '[data-theme="dark"] #flApplyBox{scrollbar-color:rgba(200,205,212,.35) transparent}' + - '[data-theme="dark"] #flApplyBox::-webkit-scrollbar-thumb{background:rgba(200,205,212,.35)}'; + '#flApplyBox::-webkit-scrollbar-thumb{background:transparent}'; document.head.appendChild(style); mask = document.createElement('div'); diff --git a/themes/Ying/assets/js/modules/human.js b/themes/Ying/assets/js/modules/human.js new file mode 100644 index 00000000..946c375c --- /dev/null +++ b/themes/Ying/assets/js/modules/human.js @@ -0,0 +1,301 @@ +/* 人机验证（自研「一键验证」）—— 服务端见 blog-admin/src/lib/human.ts + * + * 交互仿 Cloudflare Turnstile：编辑器底部、`.atk-send-btn`（评论一下）左侧一个 + * 方形勾选框。读者大多数时候无感 —— 浏览器在后台静默算一个 PoW，够了就直接打勾； + * 信号不足时方框保持可点，用户点一下就通过。 + * + * 为什么不再用「图形验证码」：用户明确不要「输字符」那种交互。前端已移除图形 + * 验证码入口；服务端 humanGate 的 captcha 兜底仍然保留（不影响），遇到 + * need_captcha 时前端展示可重试的失败态。 + * + * 通行证按 IP 记在服务端 KV（30 分钟），前端不传任何 token， + * 所以不需要改 Artalk 客户端。文章页 / 留言页共用本模块。 + * + * 历史：本逻辑原先内联在 layouts/page/comment.html 里 —— 只有留言页有， + * 而文章页评论同样走服务端 humanGate → 新访客在文章页会 403。抽成模块 + * 进 page-only bundle 后两处一致。 + */ +(function () { + var BASE = window.rssApiBase || + (window.artalkConfig && window.artalkConfig.server) || + 'https://api.200181.xyz'; + BASE = String(BASE).replace(/\/+$/, ''); + var API = BASE + '/api/v2'; + + var DIFFICULTY = 4; + var PREFIX = new Array(DIFFICULTY + 1).join('0'); + var CHECK_SVG = ''; + + var started = Date.now(); + var events = 0, honey = '', busy = false; + var state = 'idle'; // idle | busy | pass | fail + var failMsg = ''; + var proof = null, autoTried = false; + + // ── 行为信号：人类随手动一下就会有，脚本环境常常一个都没有 + ['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-send-btn 同高 30px，紧贴其左侧 */ + '.atk-human-tf{display:inline-flex;align-items:center;gap:7px;height:30px;box-sizing:border-box;' + + 'margin-right:8px;padding:0 10px;border:1px solid var(--border-main,#e5e7eb);border-radius:4px;' + + 'background:var(--bg-card,#fafafa);font-size:12px;line-height:1;color:var(--text-main,#4b5563);' + + 'cursor:pointer;user-select:none;white-space:nowrap;flex:none;' + + 'transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}' + + '.atk-human-tf.is-idle:hover{border-color:var(--theme-main,#07c160);' + + 'box-shadow:0 0 0 3px var(--theme-main-20,rgba(7,193,96,.15))}' + + '.atk-human-tf.is-busy{cursor:default;opacity:.85}' + + '.atk-human-tf.is-pass{cursor:default;border-color:var(--theme-main,#07c160);' + + 'background:var(--theme-main-10,rgba(7,193,96,.08))}' + + '.atk-human-tf.is-fail{cursor:pointer;border-color:#e05a5a;background:rgba(224,90,90,.08);color:#c0392b}' + + /* 左侧方形勾选框 */ + '.atk-human-tf-box{flex:none;width:18px;height:18px;border-radius:3px;box-sizing:border-box;' + + 'border:1.5px solid #c8ccd4;background:#fff;display:flex;align-items:center;justify-content:center;' + + 'transition:background .2s ease,border-color .2s ease}' + + '.atk-human-tf.is-pass .atk-human-tf-box{background:var(--theme-main,#07c160);' + + 'border-color:var(--theme-main,#07c160)}' + + '.atk-human-tf.is-fail .atk-human-tf-box{background:#e05a5a;border-color:#e05a5a;color:#fff;' + + 'font-weight:700;font-size:12px;line-height:1}' + + '.atk-human-tf-box svg{width:12px;height:12px;display:block}' + + '.atk-human-tf-box svg path{stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}' + + '.atk-human-tf-spin{width:12px;height:12px;border-radius:50%;box-sizing:border-box;' + + 'border:2px solid var(--theme-main-30,rgba(7,193,96,.3));border-top-color:var(--theme-main,#07c160);' + + 'animation:atkHumanSpin .7s linear infinite}' + + '@keyframes atkHumanSpin{to{transform:rotate(360deg)}}' + + '.atk-human-tf-tx{white-space:nowrap}' + + '[data-theme="dark"] .atk-human-tf{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}' + + '[data-theme="dark"] .atk-human-tf-box{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}' + + '@media (max-width:640px){.atk-human-tf{padding:0 8px;margin-right:6px}.atk-human-tf-tx{font-size:11px}}' + + '@media (prefers-reduced-motion:reduce){.atk-human-tf-spin{animation-duration:2s}}'; + 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 sendBtn() { + return document.querySelector('.atk-bottom .atk-send-btn') || + document.querySelector('.atk-send-btn'); + } + function editorEl() { + return document.querySelector('.atk-main-editor'); + } + + /** 把控件插到「评论一下」按钮左侧（同一个 .atk-item 内，天然左邻） */ + function ensureWidget() { + var btn = sendBtn(); + if (!btn || !btn.parentElement) return null; + var host = btn.parentElement; + var w = null; + for (var i = 0; i < host.children.length; i++) { + if (host.children[i].classList && host.children[i].classList.contains('atk-human-tf')) { + w = host.children[i]; break; + } + } + if (!w) { + w = document.createElement('div'); + w.className = 'atk-human-tf is-idle'; + w.setAttribute('role', 'button'); + w.setAttribute('tabindex', '0'); + w.setAttribute('title', '人机验证'); + w.addEventListener('click', onWidgetClick); + w.addEventListener('keydown', function (e) { + if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onWidgetClick(); } + }); + host.insertBefore(w, btn); + injectCss(); + } + render(w); + if (!autoTried) { autoTried = true; setTimeout(function () { run(false); }, 60); } + return w; + } + + function onWidgetClick() { + if (busy || state === 'busy' || state === 'pass') return; + run(true); // 点击本身就是强人类信号（服务端 clicked 直接放行） + } + + function render(w) { + w = w || ensureWidget(); + if (!w) return; + var key = state + '|' + failMsg; + if (w.dataset.hk === key) return; // 状态没变就别重建 DOM（避免转圈动画被重置） + w.dataset.hk = key; + w.className = 'atk-human-tf is-' + state; + if (state === 'pass') { + w.innerHTML = '' + CHECK_SVG + '' + + '已通过验证'; + } else if (state === 'busy') { + w.innerHTML = '' + + '验证中…'; + } else if (state === 'fail') { + w.innerHTML = '!' + + '' + (failMsg || '验证失败，点击重试') + ''; + } else { + w.innerHTML = '' + + '点击验证'; + } + } + + function setState(s, msg) { + state = s; + if (s === 'fail') failMsg = msg || ''; + render(); + } + + 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); + } + + // ── 主流程 + // 证明只算一次并缓存：点「点击验证」复用同一个 nonce 重发（补上 clicked 信号）， + // 所以点击是**瞬间完成**的，不会让访客再等一次算力。 + 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 || state === 'pass') return Promise.resolve(); + busy = true; + setState('busy'); + return api('/human/status').then(function (st) { + if (!st || st.enabled === false || st.pass) { setState('pass'); return null; } + if (!window.crypto || !crypto.subtle) { + setState('fail', '浏览器不支持验证'); + return null; + } + return ensureProof().then(function (pr) { + if (!pr) { setState('fail', '验证服务不可用'); 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) { setState('pass'); return; } + // need_captcha（高风险：蜜罐被填 / webdriver）不再弹图形验证码，给可重试的失败态 + if (res && res.need_captcha) { setState('fail', '未通过验证，点击重试'); return; } + // need_click：只是还缺人类信号 —— 这不是错误，回到可点的未验证态即可 + setState('idle'); + }); + }); + }).catch(function () { + /* 网络异常不打扰读者：回到可点状态，服务端提交时仍有门禁兜底 */ + setState('idle'); + }).then(function () { busy = false; }); + } + + // ── 编辑器会被 Artalk 反复重建（pjax / 回复模式 / 提交后），用 observer 补挂 + var mo = null, moTimer = null; + function watch() { + if (mo || typeof MutationObserver === 'undefined' || !document.body) return; + mo = new MutationObserver(function () { + if (moTimer) return; + moTimer = setTimeout(function () { + moTimer = null; + var btn = sendBtn(); + if (!btn || !btn.parentElement) return; + var w = null; + for (var i = 0; i < btn.parentElement.children.length; i++) { + if (btn.parentElement.children[i].classList && + btn.parentElement.children[i].classList.contains('atk-human-tf')) { w = btn.parentElement.children[i]; break; } + } + // 控件丢了 / 挂错位置 / 不在按钮左侧 → 重新挂 + if (!w || w.nextElementSibling !== btn) ensureWidget(); + }, 200); + }); + mo.observe(document.body, { childList: true, subtree: true }); + } + + function init() { + // 评论页才有意义；文章页/留言页都有 .comments-area + if (!document.querySelector('.comments-area')) return; + started = Date.now(); events = 0; busy = false; proof = null; failMsg = ''; + autoTried = false; + if (state !== 'pass') state = 'idle'; + ensureHoneypot(); + ensureWidget(); // 挂上即触发一次静默验证（见 ensureWidget 里的 autoTried） + watch(); + } + + /* 调试/自测钩子（线上留着也无害） */ + window.__humanCheck = { + state: function () { + return { state: state, busy: busy, events: events, honey: honey, hasPass: state === 'pass' }; + }, + run: run, + widget: function () { return document.querySelector('.atk-human-tf'); }, + }; + + document.addEventListener('pjax:complete', function () { setTimeout(init, 300); }); + if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init); + else init(); +})(); diff --git a/themes/Ying/layouts/_default/single.html b/themes/Ying/layouts/_default/single.html index 67ff7c98..a0b6f462 100644 --- a/themes/Ying/layouts/_default/single.html +++ b/themes/Ying/layouts/_default/single.html @@ -78,7 +78,7 @@ -
+ {{ partial "divider.html" . }} {{ if .Site.Params.reward.enable }} diff --git a/themes/Ying/layouts/page/comment.html b/themes/Ying/layouts/page/comment.html index 62d421d9..ed3f4970 100644 --- a/themes/Ying/layouts/page/comment.html +++ b/themes/Ying/layouts/page/comment.html @@ -11,7 +11,7 @@ - 图标：{{ .Site.Params.message_info.icon | default .Site.Params.author.avatar }} -
+ {{ partial "divider.html" . }}
{{ partial "artalk.html" . }} @@ -20,260 +20,13 @@
-{{/* 友链自助申请弹窗已抽到 assets/js/modules/friendlink.js（随 page-only.js 加载）。 - 原先这段内联脚本写在 #pjax-container 外面：PJAX 只换容器内容、不会重新执行它， - 从首页 PJAX 进留言页时 window.flApplyOpenModal 未定义 → 「申请友链」卡片点了没反应； - 直接刷新（整页加载）才正常。抽成模块后两种进入方式行为一致。 */}} +{{/* 本页原先的两段内联脚本都已抽成模块（随 page-only.js 加载）。 + 抽出的原因：内联 -{{ end }} \ No newline at end of file + · 友链自助申请弹窗 → assets/js/modules/friendlink.js + · 人机验证控件 → assets/js/modules/human.js + （文章页与留言页共用：文章页评论同样走服务端 humanGate， + 而验证脚本原先只在本页，新访客在文章页会 403） */}} +{{ end }} diff --git a/themes/Ying/layouts/partials/divider.html b/themes/Ying/layouts/partials/divider.html new file mode 100644 index 00000000..d779a7b5 --- /dev/null +++ b/themes/Ying/layouts/partials/divider.html @@ -0,0 +1,20 @@ +{{/* 内容分割线。样式在 hugo.toml 的 [params.divider] 里切换： + + [params.divider] + style = "icon" # icon = 主题原生 uk-divider-icon（圆圈 + 两侧细线） + # image = 使用本地图片 + image = "/image/footer-animal.webp" # image 样式生效；图片放 static/ 下 + height = "110px" # image 样式生效；图片最大高度 + + 图片必须本地化（放 static/），不要直接引外链。 */}} +{{- $d := site.Params.divider | default dict -}} +{{- $style := $d.style | default "icon" -}} +{{- if eq $style "image" -}} + {{- $src := $d.image | default "/image/footer-animal.webp" -}} + {{- $h := $d.height | default "110px" -}} + +{{- else -}} +
+{{- end -}} diff --git a/themes/Ying/layouts/partials/footer.html b/themes/Ying/layouts/partials/footer.html index 5032b390..83d737cc 100644 --- a/themes/Ying/layouts/partials/footer.html +++ b/themes/Ying/layouts/partials/footer.html @@ -142,10 +142,12 @@ {{/* 友链申请弹窗放最前：artalk.js 渲染申请卡片时会调 window.flApplyOpenModal */}} {{ $friendlink := resources.Get "js/modules/friendlink.js" }} {{ $artalkModule := resources.Get "js/modules/artalk.js" }} + {{/* 人机验证控件（Turnstile 风格），文章页与留言页共用 */}} + {{ $human := resources.Get "js/modules/human.js" }} {{ $paragraphComments := resources.Get "js/modules/paragraph-comments.js" }} {{ $reward := resources.Get "js/modules/reward.js" }} - {{ $pageScripts := slice $friendlink $artalkModule $paragraphComments $reward | resources.Concat "js/page-only.js" | resources.Minify | resources.Fingerprint }} + {{ $pageScripts := slice $friendlink $artalkModule $human $paragraphComments $reward | resources.Concat "js/page-only.js" | resources.Minify | resources.Fingerprint }} @@ -153,10 +155,12 @@ {{/* 非文章页面：仍然计算URL，但不加载，用于PJAX动态加载 */}} {{ $friendlink := resources.Get "js/modules/friendlink.js" }} {{ $artalkModule := resources.Get "js/modules/artalk.js" }} + {{/* 人机验证控件（Turnstile 风格），文章页与留言页共用 */}} + {{ $human := resources.Get "js/modules/human.js" }} {{ $paragraphComments := resources.Get "js/modules/paragraph-comments.js" }} {{ $reward := resources.Get "js/modules/reward.js" }} - {{ $pageScripts := slice $friendlink $artalkModule $paragraphComments $reward | resources.Concat "js/page-only.js" | resources.Minify | resources.Fingerprint }} + {{ $pageScripts := slice $friendlink $artalkModule $human $paragraphComments $reward | resources.Concat "js/page-only.js" | resources.Minify | resources.Fingerprint }} {{ end }}