友链申请入口改URL评论触发+卡片原生风格化; 博主/头衔徽章改浅底描边风格与友链友圈官职统一
Deploy to Production / pre-check (push) Successful in 39s
Deploy to Production / build (push) Successful in 4m55s
Deploy to Production / deploy-edgeone (push) Successful in 4m1s
Deploy to Production / finalize (push) Successful in 25s
Deploy to Production / notify-failure (push) Skipped

This commit is contained in:
zqlit committed 2026-10-03 15:16:00 +08:00
1 parent e84de9033d
commit 36e74d46f4
2 files changed
+50 -24

No files matched your search

+18 -20
View File
@@ -677,9 +677,9 @@ artalk.on('comment-rendered', function(node) {
var badgeWrap = el.querySelector('.atk-badge-wrap'); var badgeWrap = el.querySelector('.atk-badge-wrap');
if (badgeWrap && badgeWrap.parentNode !== nickEl) nickEl.appendChild(badgeWrap); if (badgeWrap && badgeWrap.parentNode !== nickEl) nickEl.appendChild(badgeWrap);
// 1) 头衔徽章(金色,管理员在后台手动设置,仅次于系统徽章) // 1) 头衔徽章(金色,管理员在后台手动设置,仅次于系统徽章;配色走 .atk-title-badge 类)
if (data.title_name && !nickEl.querySelector('.atk-title-badge')) { if (data.title_name && !nickEl.querySelector('.atk-title-badge')) {
injectBadge(nickEl, 'atk-title-badge', data.title_name, '头衔: ' + data.title_name, '#b8860b', 'rgba(197,136,27,.16)'); injectBadge(nickEl, 'atk-title-badge', data.title_name, '头衔: ' + data.title_name);
} }
// 2) 友链 // 2) 友链
if (linkMatch) injectBadge(nickEl, 'atk-link-badge', '友链', '友链: ' + linkMatch); if (linkMatch) injectBadge(nickEl, 'atk-link-badge', '友链', '友链: ' + linkMatch);
@@ -693,8 +693,8 @@ artalk.on('comment-rendered', function(node) {
} }
} catch (e) { /* 徽章注入失败不影响评论 */ } } catch (e) { /* 徽章注入失败不影响评论 */ }
// ── 置顶评论卡片化:管理员置顶且内容含「友链自助申请」的评论, // ── 友链申请入口卡片:评论内容就是约定 URL(https://usj.cc/link-apply)时,
// 整条解析成申请入口卡片(点击打开申请弹窗),其余置顶评论不受影响。 // 整条评论解析成申请入口卡片(点击打开申请弹窗),其余评论不受影响。
try { try {
var d2 = null; var d2 = null;
if (node && typeof node.getData === 'function') d2 = node.getData(); if (node && typeof node.getData === 'function') d2 = node.getData();
@@ -703,9 +703,9 @@ artalk.on('comment-rendered', function(node) {
var el2 = null; var el2 = null;
if (node && node.$el) el2 = node.$el; if (node && node.$el) el2 = node.$el;
else if (node && typeof node.getEl === 'function') el2 = node.getEl(); else if (node && typeof node.getEl === 'function') el2 = node.getEl();
if (!d2 || !d2.is_pinned || !el2) return; if (!d2 || !el2) return;
var content = String(d2.content || ''); var content = String(d2.content || '').trim().replace(/\/+$/, '').toLowerCase();
if (content.indexOf('友链自助申请') === -1) return; if (content !== 'https://usj.cc/link-apply') return;
if (el2.querySelector('.atk-fl-apply')) return; if (el2.querySelector('.atk-fl-apply')) return;
el2.classList.add('atk-fl-apply'); el2.classList.add('atk-fl-apply');
@@ -735,22 +735,21 @@ artalk.on('comment-rendered', function(node) {
var contentEl = main.querySelector('.atk-content'); var contentEl = main.querySelector('.atk-content');
var card = document.createElement('div'); var card = document.createElement('div');
card.className = 'atk-fl-apply'; card.className = 'atk-fl-apply';
card.style.cssText = 'display:flex;align-items:center;gap:12px;padding:14px 16px;margin:6px 0 2px;' + // 跟随评论列表原生观感:白底 + 细边框,只有按钮带主题色
'background:var(--bg-card,#fff);border:1px solid var(--theme-main-30,rgba(7,193,96,.3));' + card.style.cssText = 'display:flex;align-items:center;gap:12px;padding:12px 14px;margin:2px 0;' +
'border-radius:10px;transition:border-color .2s,box-shadow .2s;'; 'background:var(--bg-card,#fff);border:1px solid var(--border-main,#eeeeee);' +
'border-radius:10px;transition:border-color .2s,background .2s;';
card.innerHTML = card.innerHTML =
'<img src="' + avatarSrc + '" alt="" referrerpolicy="no-referrer" style="flex:none;width:44px;height:44px;' + '<img src="' + avatarSrc + '" alt="" referrerpolicy="no-referrer" style="flex:none;width:40px;height:40px;' +
'border-radius:8px;object-fit:cover;box-shadow:0 0 0 2px var(--theme-main-20,rgba(7,193,96,.2))">' + 'border-radius:6px;object-fit:cover">' +
'<span style="flex:1;min-width:0">' + '<span style="flex:1;min-width:0">' +
'<span style="display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text-main,#333)">' + '<span style="display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text-main,#333)">' +
'<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + nickText.replace(/</g, '&lt;') + '</span>' + '<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + nickText.replace(/</g, '&lt;') + '</span>' +
'</span>' + '</span>' +
'<span style="display:block;font-size:13px;margin-top:3px;color:var(--text-desc,#777);line-height:1.5">' + '<span style="display:block;font-size:13px;margin-top:2px;color:var(--text-desc,#777);line-height:1.5">想和我交换友链?点击申请,审核结果会邮件通知你</span>' +
'<b style="color:var(--theme-main,#07c160);font-weight:600">友链自助申请</b>' +
'<span style="color:var(--text-muted,#999)"> · </span>想和我交换友链?点这里填写申请,审核结果会邮件通知你' +
'</span>' +
'</span>' + '</span>' +
'<span style="flex:none;color:var(--theme-main,#07c160);font-size:20px;line-height:1">›</span>'; '<span style="flex:none;background:var(--theme-main-20,rgba(7,193,96,.2));color:var(--theme-main,#07c160);' +
'font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;white-space:nowrap">申请友链</span>';
// 昵称行追加官方徽章(博主),样式与评论区徽章一致 // 昵称行追加官方徽章(博主),样式与评论区徽章一致
if (sysBadge) { if (sysBadge) {
var bw = sysBadge.cloneNode(true); var bw = sysBadge.cloneNode(true);
@@ -771,11 +770,10 @@ artalk.on('comment-rendered', function(node) {
}); });
el2.addEventListener('mouseenter', function () { el2.addEventListener('mouseenter', function () {
card.style.borderColor = 'var(--theme-main,#07c160)'; card.style.borderColor = 'var(--theme-main,#07c160)';
card.style.boxShadow = '0 2px 12px var(--theme-main-20,rgba(7,193,96,.2))'; card.style.background = 'var(--bg-card,#fff)';
}); });
el2.addEventListener('mouseleave', function () { el2.addEventListener('mouseleave', function () {
card.style.borderColor = 'var(--theme-main-30,rgba(7,193,96,.3))'; card.style.borderColor = 'var(--border-main,#eeeeee)';
card.style.boxShadow = 'none';
}); });
} catch (e) { /* 卡片化失败不影响评论 */ } } catch (e) { /* 卡片化失败不影响评论 */ }
}); });
+32 -4
View File
@@ -56,6 +56,22 @@
border: 1px solid rgba(107,114,128,0.15); border: 1px solid rgba(107,114,128,0.15);
font-weight: 600; font-weight: 600;
} }
/* 头衔徽章(金色)——与友链/友圈/官职同风格:浅底彩字描边 */
.atk-title-badge {
display: inline-block;
margin-left: 4px;
padding: 0 6px;
font-size: 12px;
font-weight: 600;
border-radius: 3px;
line-height: 18px;
vertical-align: middle;
pointer-events: none;
white-space: nowrap;
color: #b8860b;
background: rgba(184,134,11,0.08);
border: 1px solid rgba(184,134,11,0.22);
}
[data-theme="dark"] .atk-link-badge { [data-theme="dark"] .atk-link-badge {
color: #34d399; color: #34d399;
background: rgba(52,211,153,0.12); background: rgba(52,211,153,0.12);
@@ -71,17 +87,29 @@
background: rgba(148,163,184,0.1); background: rgba(148,163,184,0.1);
border-color: rgba(148,163,184,0.18); border-color: rgba(148,163,184,0.18);
} }
[data-theme="dark"] .atk-title-badge {
color: #fbbf24;
background: rgba(251,191,36,0.12);
border-color: rgba(251,191,36,0.2);
}
/* 覆盖 Artalk 原版 .atk-badge(博主)/ .atk-pinned-badge(置顶)尺寸 */ /* 覆盖 Artalk 原版 .atk-badge(博主)尺寸/配色 —— 改成与友链/友圈/官职
同风格的浅底描边款(原版黑底白字过于突兀),黑字保留博主辨识度 */
.atk-comment>.atk-main>.atk-header .atk-badge { .atk-comment>.atk-main>.atk-header .atk-badge {
font-size: 12px; font-size: 12px;
padding: 0 6px; padding: 0 6px;
font-weight: 500; font-weight: 600;
line-height: 18px; line-height: 18px;
border-radius: 3px; border-radius: 3px;
vertical-align: middle; vertical-align: middle;
color: #fff !important; color: #374151 !important;
background: #1a1a1a !important; background: rgba(55,65,81,0.06) !important;
border: 1px solid rgba(55,65,81,0.18);
}
[data-theme="dark"] .atk-comment>.atk-main>.atk-header .atk-badge {
color: #e5e7eb !important;
background: rgba(229,231,235,0.08) !important;
border-color: rgba(229,231,235,0.2);
} }
.atk-comment>.atk-main>.atk-header .atk-pinned-badge { .atk-comment>.atk-main>.atk-header .atk-pinned-badge {
font-size: 12px; font-size: 12px;