From 0c39b1c120f87644a10b8df3a15a96af84a9472c Mon Sep 17 00:00:00 2001 From: ClovertaTheTrilobita Date: Thu, 17 Sep 2026 15:26:33 +0800 Subject: [PATCH] update comments style --- src/components/LatestComments.astro | 40 +++-- src/layouts/MarkdownPostLayout.astro | 37 +++- src/pages/[lang]/index.astro | 2 +- src/styles/latest-comments.css | 257 ++++++++++++--------------- 4 files changed, 171 insertions(+), 165 deletions(-) diff --git a/src/components/LatestComments.astro b/src/components/LatestComments.astro index 4ad0a7b..3b2566c 100644 --- a/src/components/LatestComments.astro +++ b/src/components/LatestComments.astro @@ -2,7 +2,7 @@ const { lang = "zh" } = Astro.props; const host = import.meta.env.PUBLIC_REMARK42_HOST; const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID; -const max = 10; +const max = 5; const heading = lang === "zh" ? "最新评论" : "Latest comments"; --- @@ -75,6 +75,22 @@ const heading = lang === "zh" ? "最新评论" : "Latest comments"; return item?.user?.name || (lang === "zh" ? "匿名用户" : "Anonymous"); } + function getCommentPreview(html, lang) { + const template = document.createElement("template"); + template.innerHTML = String(html || ""); + + const text = (template.content.textContent || "") + .replace(/\s+/g, " ") + .trim(); + + if (text) return escapeHtml(text); + if (template.content.querySelector("img")) { + return lang === "zh" ? "[图片]" : "[Image]"; + } + + return lang === "zh" ? "[无文字内容]" : "[No text content]"; + } + function normalizePath(url) { if (!url) return ""; @@ -207,10 +223,11 @@ const heading = lang === "zh" ? "最新评论" : "Latest comments"; item?.title || (lang === "zh" ? "未命名文章" : "Untitled post"), ); - const href = rewritePostUrl(item?.locator?.url || "", lang); + const href = escapeHtml( + rewritePostUrl(item?.locator?.url || "", lang), + ); - // Remark42 返回的 text 是处理后的 HTML，适合直接渲染 - const html = item?.text || ""; + const preview = getCommentPreview(item?.text, lang); const time = formatTime(item?.time, lang); const replyTo = escapeHtml(item?.replyToName || ""); @@ -227,7 +244,7 @@ const heading = lang === "zh" ? "最新评论" : "Latest comments"; return `
-
+
${avatarHtml}
@@ -238,13 +255,14 @@ const heading = lang === "zh" ? "最新评论" : "Latest comments"; ${time ? `${escapeHtml(time)}` : ""}
- + -
+
${preview}
+ +
+ ${lang === "zh" ? "评论于" : "On"} ${title} -
- -
${html}
+
`; @@ -259,7 +277,7 @@ const heading = lang === "zh" ? "最新评论" : "Latest comments"; const host = section.dataset.host; const siteId = section.dataset.siteId; - const max = section.dataset.max || "10"; + const max = section.dataset.max || "5"; const lang = section.dataset.lang || "zh"; const list = section.querySelector(".latest-comments-list"); diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro index 5834e07..d1cfdd6 100644 --- a/src/layouts/MarkdownPostLayout.astro +++ b/src/layouts/MarkdownPostLayout.astro @@ -12,6 +12,14 @@ import "@/styles/global.css"; const { post, frontmatter, lang, slug, postId, headings } = Astro.props; const comments = lang === "zh" ? "评论区" : "comments"; const t = getTranslations(lang); +const publishedDate = new Intl.DateTimeFormat( + lang === "zh" ? "zh-CN" : "en-US", + { + year: "numeric", + month: "long", + day: "numeric", + }, +).format(frontmatter.pubDate); --- {frontmatter.description}

-

- {t.post.publishedOn}: {frontmatter.pubDate.toLocaleDateString()} +

+ {t.post.writtenBy} {frontmatter.author} + +

-

{t.post.writtenBy}: {frontmatter.author}

{ @@ -303,13 +314,29 @@ const t = getTranslations(lang); word-break: break-word; } - .meta-line { + .post-byline { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 0.3rem 0.55rem; margin: 0.3rem 0; - line-height: 1.6; + color: #66717c; + font-family: "Noto Sans SC", system-ui, sans-serif; + font-size: 0.8rem; + font-weight: 400; + line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; } + .byline-separator { + opacity: 0.65; + } + + :global(html.dark) .post-byline { + color: #aab7c4; + } + .post-cover { width: 300px; height: auto; diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro index c8db2bb..6813465 100644 --- a/src/pages/[lang]/index.astro +++ b/src/pages/[lang]/index.astro @@ -56,7 +56,7 @@ const rssLink = lang === "zh" ? "/rss.xml" : "/en/rss.xml";
- + diff --git a/src/styles/latest-comments.css b/src/styles/latest-comments.css index 58d3548..219798e 100644 --- a/src/styles/latest-comments.css +++ b/src/styles/latest-comments.css @@ -7,14 +7,15 @@ } .loading-card { - height: 92px; - margin: 0 0 14px 0; - padding: 0.9rem 1rem; - border: 1px dashed #aeb8c2; - background: linear-gradient(90deg, - rgba(160, 175, 190, 0.06) 25%, - rgba(160, 175, 190, 0.16) 50%, - rgba(160, 175, 190, 0.06) 75%); + height: 82px; + padding: 1rem 0; + border-bottom: 1px solid rgba(110, 125, 140, 0.28); + background: linear-gradient( + 90deg, + transparent 15%, + rgba(160, 175, 190, 0.13) 50%, + transparent 85% + ); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; } @@ -34,65 +35,58 @@ } .comment-card { - display: block; - margin: 0 0 14px 0; - padding: 0.6rem 1rem; - border: 2px dashed #aeb8c2; - background-color: var(--comment-background); + padding: 1rem 0; + border-bottom: 1px solid rgba(110, 125, 140, 0.28); +} +.comment-card:first-child { + padding-top: 0.35rem; } .comment-card:last-child { - margin-bottom: 0; + padding-bottom: 0; + border-bottom: 0; } .comment-card-body { - display: grid; - grid-template-columns: minmax(0, 1fr) 320px; - grid-template-areas: - "info title" - "text title"; - gap: 0.2rem 1rem; - align-items: start; + min-width: 0; } .comment-card-info { - grid-area: info; display: flex; align-items: center; - gap: 0.7rem; + gap: 0.65rem; min-width: 0; } .comment-avatar { - width: 35px; - height: 35px; - flex-shrink: 0; + width: 32px; + height: 32px; + flex: 0 0 32px; } .comment-avatar-img, .comment-avatar-fallback { - width: 35px; - height: 35px; + width: 32px; + height: 32px; display: block; border-radius: 50%; object-fit: cover; } .comment-avatar-img { - border: 1px dashed #aeb8c2; - background: #f3f5f7; + background: rgba(160, 175, 190, 0.1); } .comment-avatar-fallback { display: flex; align-items: center; justify-content: center; - border: 1px dashed #aeb8c2; - background: rgba(160, 175, 190, 0.12); + background: rgba(160, 175, 190, 0.14); color: #5e6b77; - font-weight: 700; - font-size: 1rem; + font-family: system-ui, sans-serif; + font-size: 0.85rem; + font-weight: 600; user-select: none; } @@ -105,90 +99,68 @@ display: flex; flex-wrap: wrap; align-items: baseline; - gap: 0.6rem; + gap: 0.25rem 0.55rem; min-width: 0; - line-height: 1.3; - font-style: italic; - font-family: - system-ui, - -apple-system, - BlinkMacSystemFont, - "Segoe UI", - "PingFang SC", - "Hiragino Sans GB", - "Microsoft YaHei", - "Noto Sans CJK SC", - "Source Han Sans SC", - sans-serif; + font-family: system-ui, sans-serif; + line-height: 1.35; } -.comment-author { - font-weight: 400; - font-size: 0.8rem; - color: gray; +.comment-author, +.comment-reply-to { + color: #66717c; + font-size: 0.82rem; + font-weight: 500; overflow-wrap: anywhere; - word-break: break-word; } +.comment-reply-sep, .comment-time { - color: #7a7a7a; - font-size: 0.7rem; -} - -.comment-card-title { - grid-area: title; - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - text-align: right; - min-width: 0; -} - -.comment-title-link { - color: #6f8090; - text-decoration: none; - font-size: 1.1rem; - font-weight: 700; - line-height: 1.45; - white-space: normal; - overflow-wrap: anywhere; - word-break: break-word; -} - -.comment-title-link:hover { - text-decoration: underline; + color: #7a858f; + font-size: 0.72rem; + font-weight: 400; } .comment-card-text { - grid-area: text; - margin: 0; - color: #555; - line-height: 1.5; + display: -webkit-box; + margin: 0.6rem 0 0.5rem; + max-height: 4.65em; + overflow: hidden; + color: #3f4a54; + font-family: system-ui, sans-serif; font-size: 0.93rem; - min-width: 0; + font-weight: 400; + line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; - white-space: normal; - font-family: - system-ui, - -apple-system, - BlinkMacSystemFont, - "Segoe UI", - "PingFang SC", - "Hiragino Sans GB", - "Microsoft YaHei", - "Noto Sans CJK SC", - "Source Han Sans SC", - sans-serif; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; } -.comment-card-text :global(p), -.comment-card-text p { - margin: 0; +.comment-source { + display: flex; + align-items: baseline; + gap: 0.4rem; + min-width: 0; + color: #89939c; + font-family: system-ui, sans-serif; + font-size: 0.75rem; + line-height: 1.45; } -.comment-card-text :global(img), -.comment-card-text img { - max-width: 100%; - height: auto; +.comment-title-link { + min-width: 0; + overflow: hidden; + color: #6f8090; + font-size: 0.82rem; + font-weight: 400; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; +} + +.comment-title-link:hover, +.comment-title-link:focus-visible { + text-decoration: underline; } .latest-comments-empty { @@ -196,68 +168,57 @@ font-style: italic; } -.comment-reply-sep { - font-size: 0.8rem; - opacity: 0.7; +html.dark .comment-card, +.dark .comment-card, +html.dark .loading-card, +.dark .loading-card { + border-color: rgba(170, 183, 196, 0.25); } -.latest-comments .comment-reply-to { - font-weight: 400; - font-size: 0.8rem; - color: gray; - opacity: 0.9; - overflow-wrap: anywhere; - word-break: break-word; -} - -html.dark .latest-comments .comment-card, -.dark .latest-comments .comment-card { - border-color: #7f8c97; - background-color: #252525; -} - -html.dark .comment-title-link { - color: #c8d2dc; -} - -html.dark .comment-card-text { +html.dark .comment-card-text, +.dark .comment-card-text { color: #d3d7db; } -html.dark .comment-time { - color: #a8b0b7; +html.dark .comment-author, +.dark .comment-author, +html.dark .comment-reply-to, +.dark .comment-reply-to { + color: #b9c3cc; } -html.dark .latest-comments .comment-avatar-fallback, -.dark .latest-comments .comment-avatar-fallback { - border-color: #7f8c97; - background-color: #3a444d; - color: #dbe3ea; +html.dark .comment-time, +.dark .comment-time, +html.dark .comment-reply-sep, +.dark .comment-reply-sep, +html.dark .comment-source, +.dark .comment-source { + color: #929da7; } -:global(.dark) .comment-avatar-fallback { - background: rgba(180, 190, 200, 0.12); +html.dark .comment-title-link, +.dark .comment-title-link { + color: #aabbd0; +} + +html.dark .comment-avatar-fallback, +.dark .comment-avatar-fallback { + background: rgba(180, 190, 200, 0.14); color: #dbe3ea; } @media (max-width: 640px) { - .comment-card-body { - grid-template-columns: 1fr; - grid-template-areas: - "title" - "info" - "text"; + .comment-card { + padding-block: 0.85rem; } - .comment-card-title { - text-align: left; - margin-bottom: 0.2rem; + .comment-card-text { + margin-top: 0.5rem; } +} - .comment-title-link { - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; +@media (prefers-reduced-motion: reduce) { + .loading-card { + animation: none; } -} \ No newline at end of file +}