zqlit
79c9f2371c
- emoticon-recent.js: 「最近使用」从面板顶部独立栏重构为分组切换条最左侧的
同构 tab（data-index="recent"），无记录时整个 tab 隐藏；复用 Artalk 原生
.atk-grp[data-type=image] 网格样式，零自定义布局。
- artalk.js:
· 新建评论成功（res.ok）后，对当前激活的插件按钮派发 click()，收起仍展开的
表情面板（Artalk 上游只 reset 输入内容、不关面板），内部 openedPlug 状态同步复位。
· 徽章处理末尾把徽章文字镜像到 data-badge 属性，供 CSS 按名字配色。
- artalk.html: 新增 .atk-badge[data-badge="小编"] 玫红实底规则（含暗色模式），
特异性高于博主规则，两者互不覆盖。
- featured-comments.html: 走心评论 limit 8 → 20（后端上限）。
- main.css: 移除旧 .atk-recent-emoticons 相关样式。
147 lines
8.1 KiB
HTML
147 lines
8.1 KiB
HTML
{{/* 走心评论：管理员在评论区精选的评论，关于页展示。
|
||
数据走 Worker 公开接口 /api/v2/featured/comments（悄悄话评论永远不进精选列表）。
|
||
本地预览 / 接口故障时优雅降级：整块隐藏或显示占位文案。
|
||
调试参数：?featmock=1 用本地 mock 渲染（仅用于排版预览，生产无害）。 */}}
|
||
<style>
|
||
.featc-wrap { min-width: 0; }
|
||
.featc-title {
|
||
font-size: 1.35rem; font-weight: 700; color: var(--text-title-color);
|
||
line-height: 1.3; margin: 0 0 10px;
|
||
}
|
||
.featc-title .featc-count {
|
||
font-size: 0.72rem; font-weight: 600; vertical-align: super;
|
||
margin-left: 3px; color: var(--theme-main, #07c160);
|
||
}
|
||
.featc-desc { font-size: 0.86rem; line-height: 1.8; color: var(--text-desc, #777); margin: 0 0 18px; }
|
||
/* 瀑布流：CSS 多列布局，卡片高度不一时自然错落 */
|
||
.featc-grid {
|
||
columns: 3; column-gap: 14px; min-width: 0;
|
||
}
|
||
.featc-card {
|
||
break-inside: avoid; -webkit-column-break-inside: avoid;
|
||
display: inline-flex; flex-direction: column; gap: 8px; width: 100%;
|
||
margin: 0 0 14px; box-sizing: border-box;
|
||
background: var(--bg-card, #fff);
|
||
border: 1px solid var(--border-main, #eee);
|
||
border-radius: 10px; padding: 16px 16px 12px;
|
||
text-decoration: none; color: inherit; min-width: 0;
|
||
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
|
||
}
|
||
.featc-card:hover {
|
||
transform: translateY(-3px);
|
||
border-color: var(--theme-main-30, rgba(7,193,96,.3));
|
||
box-shadow: var(--shadow-popover, 0 4px 20px rgba(0,0,0,.1));
|
||
text-decoration: none; color: inherit;
|
||
}
|
||
.featc-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
|
||
.featc-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: cover; }
|
||
.featc-nick {
|
||
font-size: 0.92rem; font-weight: 700; color: var(--text-title-color, #333);
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
}
|
||
.featc-date { margin-left: auto; flex: none; font-size: 0.72rem; color: var(--text-muted, #999); }
|
||
.featc-content {
|
||
font-size: 0.88rem; line-height: 1.7; color: var(--text-main, #333);
|
||
margin: 0; word-break: break-word;
|
||
display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
|
||
}
|
||
.featc-content img { max-height: 1.2em; vertical-align: sub; }
|
||
.featc-content p { margin: 0; }
|
||
.featc-foot {
|
||
font-size: 0.72rem; color: var(--text-muted, #999); line-height: 1.6;
|
||
padding-left: 8px; border-left: 2px solid var(--border-main, #eee);
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
}
|
||
.featc-foot a { color: inherit; }
|
||
.featc-empty { font-size: 0.86rem; color: var(--text-muted, #999); padding: 8px 0; }
|
||
/* 暗色模式：主题对文字色是「按元素覆写」而不是重定义变量（--text-title-color
|
||
在暗色下仍是深色字），这里必须显式给出暗色文字色，否则标题会隐身 */
|
||
[data-theme="dark"] .featc-title,
|
||
[data-theme="dark"] .featc-nick { color: var(--text-title-dark-color, #e5e7eb); }
|
||
[data-theme="dark"] .featc-content { color: var(--text-content-dark-color, #d1d5db); }
|
||
@media (max-width: 1100px) {
|
||
.featc-grid { columns: 2; }
|
||
}
|
||
@media (max-width: 640px) {
|
||
.featc-grid { columns: 1; }
|
||
.featc-card { margin-bottom: 10px; padding: 13px 14px 10px; }
|
||
.featc-desc { margin-bottom: 14px; }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.featc-card, .featc-card:hover { transition: none; transform: none; }
|
||
}
|
||
</style>
|
||
|
||
<div class="featc-wrap">
|
||
<div class="featc-title">走心评论<span class="featc-count" id="featc-count" hidden></span></div>
|
||
<p class="featc-desc">当我看到各位在不同的时间和故事中，发出一份份走心的评论时，一份温暖之意即笼罩在我的心头。</p>
|
||
<div class="featc-grid" id="featc-grid">
|
||
<div class="featc-empty" id="featc-loading">加载中…</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
(function () {
|
||
var API = (window.artalkConfig && window.artalkConfig.server || 'https://api.200181.xyz').replace(/\/+$/, '') +
|
||
'/api/v2/featured/comments?limit=20';
|
||
var grid = document.getElementById('featc-grid');
|
||
if (!grid) return;
|
||
|
||
function esc(s) {
|
||
return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
|
||
return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c];
|
||
});
|
||
}
|
||
|
||
function render(list) {
|
||
var countEl = document.getElementById('featc-count');
|
||
if (countEl && list.length) { countEl.textContent = list.length + '个'; countEl.hidden = false; }
|
||
if (!list.length) {
|
||
grid.innerHTML = '<div class="featc-empty">还没有走心评论，去和博主聊聊吧～</div>';
|
||
return;
|
||
}
|
||
var html = '';
|
||
for (var i = 0; i < list.length; i++) {
|
||
var c = list[i];
|
||
var avatar = 'https://weavatar.com/avatar/' + esc(c.email_encrypted) + '?d=mp&s=120';
|
||
var nick = esc(c.nick);
|
||
html +=
|
||
'<a class="featc-card" href="' + esc(c.page_url) + '#atk-comment-' + esc(c.id) + '">' +
|
||
'<div class="featc-head">' +
|
||
'<img class="featc-avatar" src="' + avatar + '" alt="" loading="lazy" referrerpolicy="no-referrer">' +
|
||
'<span class="featc-nick">' + nick + '</span>' +
|
||
'<span class="featc-date">' + esc(c.date) + '</span>' +
|
||
'</div>' +
|
||
'<div class="featc-content">' + c.content_html + '</div>' +
|
||
'<div class="featc-foot">发表在 ' + esc(c.page_title || '页面') + '</div>' +
|
||
'</a>';
|
||
}
|
||
grid.innerHTML = html;
|
||
}
|
||
|
||
function load() {
|
||
// 排版预览 mock（?featmock=1）：接口未部署 / 无精选数据时也能看样式
|
||
if (/[?&]featmock=1/.test(location.search)) {
|
||
render([
|
||
{ id: 1, nick: '森屿', email_encrypted: '897defecd8ecc9ad844d86f615b967d2', link: '', date: '2026-06-27 20:57', content_html: '<p>“被记得”本身就是一件幸福的事</p>', page_url: '#', page_title: '碎碎念｜被记得 – 去青岛看一场迟到很久的海' },
|
||
{ id: 2, nick: '小十', email_encrypted: 'e08b1ed883704d10a4e4b9c05b2bf019', link: '', date: '2026-05-11 17:00', content_html: '<p>哇哦🎉，环境真的太好啦，下次我也想去！</p>', page_url: '#', page_title: '碎碎念｜“撩蝉” – 去闯进其他人的生活' },
|
||
{ id: 3, nick: '群林', email_encrypted: '897defecd8ecc9ad844d86f615b967d2', link: 'https://usj.cc', date: '2026-01-25 13:57', content_html: '<p>欢迎来做客，博客新增了留言板，有问题随时找我～</p>', page_url: '#', page_title: '留言' },
|
||
{ id: 4, nick: '小柒', email_encrypted: 'e08b1ed883704d10a4e4b9c05b2bf019', link: '', date: '2025-01-21 01:07', content_html: '<p>2025 年新的一年，一起加油，希望一切顺利！</p>', page_url: '#', page_title: '留言' },
|
||
{ id: 5, nick: '阿澜', email_encrypted: '897defecd8ecc9ad844d86f615b967d2', link: '', date: '2025-11-08 22:14', content_html: '<p>这篇文章我反反复复读了三遍。「把日子过成自己喜欢的样子」说起来简单，做起来才知道有多难。谢谢博主的文字，让我在加班的深夜里被治愈了一下，明天继续加油。</p>', page_url: '#', page_title: '碎碎念｜深夜书桌 – 与自己和解的十个瞬间' },
|
||
{ id: 6, nick: 'Momo', email_encrypted: 'e08b1ed883704d10a4e4b9c05b2bf019', link: '', date: '2025-09-30 09:42', content_html: '<p>签到打卡 ~</p>', page_url: '#', page_title: '碎碎念｜秋日漫步 – 路过巷口的桂花香' },
|
||
{ id: 7, nick: '北屿', email_encrypted: '897defecd8ecc9ad844d86f615b967d2', link: '', date: '2025-08-12 19:03', content_html: '<p>从友链跳转过来的，一口气读了五篇，博客的排版和摄影都太舒服了。已经加入 RSS 阅读器，期待更新！</p>', page_url: '#', page_title: '碎碎念｜山海之间 – 一次说走就走的旅行' }
|
||
]);
|
||
return;
|
||
}
|
||
fetch(API)
|
||
.then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
|
||
.then(function (data) { render((data && data.comments) || []); })
|
||
.catch(function () {
|
||
if (grid) grid.innerHTML = '<div class="featc-empty">还没有走心评论，去和博主聊聊吧～</div>';
|
||
});
|
||
}
|
||
|
||
load();
|
||
})();
|
||
</script>
|