zqlit/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

友链申请卡片重设计(头像+昵称+徽章+主题色) + 弹窗横向滚动条/显隐bug修复
Deploy to Production / pre-check (push) Successful in 1m9s
Details
Deploy to Production / build (push) Successful in 4m9s
Details
Deploy to Production / deploy-edgeone (push) Successful in 3m46s
Details
Deploy to Production / finalize (push) Successful in 28s
Details
Deploy to Production / notify-failure (push) Skipped
Details

Browse Source
This commit is contained in:
zqlit committed 2026-10-03 14:28:50 +08:00
1 parent 79c1e51d5c
commit e84de9033d
2 files changed
+83 -35
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

themes/Ying/assets/js/modules/artalk.js
+41 -12
View File
@@ -712,29 +712,52 @@ artalk.on('comment-rendered', function(node) {
el2.style.cursor = 'pointer';
el2.title = '点击申请友链';
// 隐藏评论常规元素（昵称行/页脚操作），整条变成一张卡片
// 先取原评论的头像 / 昵称 / 官方徽章（博主），再隐藏常规元素
var avImg = el2.querySelector('.atk-avatar img');
var avatarSrc = avImg ? avImg.getAttribute('src') : '';
var nickEl2 = el2.querySelector('.atk-nick');
var sysBadge = (nickEl2 || el2).querySelector('.atk-badge-wrap');
var nickText = String(d2.nick || '博主');
// 隐藏评论常规元素（头像列/昵称行/页脚操作），整条变成一张卡片
var hd = el2.querySelector('.atk-header');
var ft = el2.querySelector('.atk-footer');
var av0 = el2.querySelector('.atk-avatar');
var meta = el2.querySelector('.atk-meta');
if (hd) hd.style.display = 'none';
if (ft) ft.style.display = 'none';
var meta = el2.querySelector('.atk-meta');
if (av0) av0.style.display = 'none';
if (meta) meta.style.display = 'none';
var main = el2.querySelector('.atk-main') || el2;
main.style.marginLeft = '0'; // 卡片占满整行，原头像列不再占位（修复错位）
var contentEl = main.querySelector('.atk-content');
var card = document.createElement('div');
card.className = 'atk-fl-apply';
card.style.cssText = 'display:flex;align-items:center;gap:12px;padding:16px 18px;margin:6px 0;' +
'background:linear-gradient(135deg,rgba(47,158,99,.08),rgba(47,158,99,.02));' +
'border:1px dashed rgba(47,158,99,.45);border-radius:10px;transition:border-color .2s,transform .2s;';
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));' +
'border-radius:10px;transition:border-color .2s,box-shadow .2s;';
card.innerHTML =
'<span style="flex:none;width:40px;height:40px;border-radius:10px;background:rgba(47,158,99,.12);' +
'display:flex;align-items:center;justify-content:center;font-size:20px">🔗</span>' +
'<img src="' + avatarSrc + '" alt="" referrerpolicy="no-referrer" style="flex:none;width:44px;height:44px;' +
'border-radius:8px;object-fit:cover;box-shadow:0 0 0 2px var(--theme-main-20,rgba(7,193,96,.2))">' +
'<span style="flex:1;min-width:0">' +
'<span style="display:block;font-size:15px;font-weight:600;color:#2f9e63">友链自助申请</span>' +
'<span style="display:block;font-size:12px;color:#8a8e98;margin-top:2px">想和我交换友链？点这里填写申请，审核结果会邮件通知你</span>' +
'<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>' +
'<span style="display:block;font-size:13px;margin-top:3px;color:var(--text-desc,#777);line-height:1.5">' +
'<b style="color:var(--theme-main,#07c160);font-weight:600">友链自助申请</b>' +
'<span style="color:var(--text-muted,#999)"> · </span>想和我交换友链？点这里填写申请，审核结果会邮件通知你' +
'</span>' +
'</span>' +
'<span style="flex:none;color:#2f9e63;font-size:18px">›</span>';
'<span style="flex:none;color:var(--theme-main,#07c160);font-size:20px;line-height:1">›</span>';
// 昵称行追加官方徽章（博主），样式与评论区徽章一致
if (sysBadge) {
var bw = sysBadge.cloneNode(true);
bw.style.marginLeft = '2px';
var nickRow = card.querySelector('span > span');
nickRow.appendChild(bw);
}
if (contentEl) {
contentEl.innerHTML = '';
contentEl.appendChild(card);
@@ -746,8 +769,14 @@ artalk.on('comment-rendered', function(node) {
el2.addEventListener('click', function () {
if (window.flApplyOpenModal) window.flApplyOpenModal();
});
el2.addEventListener('mouseenter', function () { card.style.borderColor = 'rgba(47,158,99,.8)'; });
el2.addEventListener('mouseleave', function () { card.style.borderColor = 'rgba(47,158,99,.45)'; });
el2.addEventListener('mouseenter', function () {
card.style.borderColor = 'var(--theme-main,#07c160)';
card.style.boxShadow = '0 2px 12px var(--theme-main-20,rgba(7,193,96,.2))';
});
el2.addEventListener('mouseleave', function () {
card.style.borderColor = 'var(--theme-main-30,rgba(7,193,96,.3))';
card.style.boxShadow = 'none';
});
} catch (e) { /* 卡片化失败不影响评论 */ }
});
themes/Ying/layouts/page/comment.html
+42 -23
View File
@@ -23,37 +23,56 @@
<script>
/* 友链自助申请：弹窗动态挂到 document.body（评论容器带 transform 动画，
会把 position:fixed 劫持成相对定位，导致遮罩/表单跟着容器变形——
挂 body 彻底规避），遮罩用 backdrop-filter 毛玻璃（GPU 合成，不卡页面）。 */
挂 body 彻底规避），遮罩用 backdrop-filter 毛玻璃（GPU 合成，不卡页面）。
显隐用 class 而非 hidden 属性（内联 display 会覆盖 hidden 导致关不掉）；
盒子必须 box-sizing:border-box（否则 width:100% + padding 溢出出横向滚动条）。 */
(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');
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))}' +
'#flSubmit{width:100%;background:var(--theme-main,#07c160);border:none;color:#fff;padding:10px;' +
'border-radius:6px;font-size:14px;cursor:pointer;transition:filter .2s}' +
'#flSubmit:hover{filter:brightness(1.06)}' +
'#flSubmit:disabled{opacity:.6;cursor:default}';
document.head.appendChild(style);
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 id="flApplyBox">' +
'<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>' +
'<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 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>' +
'<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">订阅地址（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" style="width:100%;background:#2f9e63;border:none;color:#fff;padding:10px;border-radius:6px;font-size:14px;cursor:pointer">提交申请</button>' +
'<button id="flSubmit">提交申请</button>' +
'</div>';
document.body.appendChild(mask);
@@ -82,7 +101,7 @@
}).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 || '申请已提交';
msg.hidden = false; msg.style.color = 'var(--theme-main,#07c160)'; msg.textContent = res.d.message || '申请已提交';
btn.textContent = '已提交 ✓';
setTimeout(close, 2200);
} else {
@@ -100,12 +119,12 @@
function close() {
var m = document.getElementById('flApplyMask');
if (m) m.setAttribute('hidden', '');
if (m) m.classList.remove('on');
}
/* 供置顶评论卡片调用（artalk.js 的 comment-rendered 里触发） */
window.flApplyOpenModal = function () {
buildModal().removeAttribute('hidden');
buildModal().classList.add('on');
};
})();
</script>