blog/themes/Ying/layouts/partials/featured-comments.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 { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[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>