cloverta/SanYeCao-blog
1
0
Fork 0
mirror of https://github.com/ClovertaTheTrilobita/SanYeCao-blog.git synced 2026-10-25 13:33:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update comments style

Browse source
This commit is contained in:
ClovertaTheTrilobita 2026-09-17 15:26:33 +08:00
parent 43154122e3
commit 0c39b1c120
4 changed files with 171 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/components/LatestComments.astro
View file

@ -2,7 +2,7 @@
const { lang = "zh" } = Astro.props; const { lang = "zh" } = Astro.props;
const host = import.meta.env.PUBLIC_REMARK42_HOST; const host = import.meta.env.PUBLIC_REMARK42_HOST;
const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID; const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
const max = 10; const max = 5;
const heading = lang === "zh" ? "最新评论" : "Latest comments"; const heading = lang === "zh" ? "最新评论" : "Latest comments";
--- ---
@ -75,6 +75,22 @@ const heading = lang === "zh" ? "最新评论" : "Latest comments";
return item?.user?.name || (lang === "zh" ? "匿名用户" : "Anonymous"); 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) { function normalizePath(url) {
if (!url) return ""; if (!url) return "";
@ -207,10 +223,11 @@ const heading = lang === "zh" ? "最新评论" : "Latest comments";
item?.title || item?.title ||
(lang === "zh" ? "未命名文章" : "Untitled post"), (lang === "zh" ? "未命名文章" : "Untitled post"),
); );
const href = rewritePostUrl(item?.locator?.url || "", lang); const href = escapeHtml(
rewritePostUrl(item?.locator?.url || "", lang),
);
// Remark42 返回的 text 是处理后的 HTML，适合直接渲染 const preview = getCommentPreview(item?.text, lang);
const html = item?.text || "";
const time = formatTime(item?.time, lang); const time = formatTime(item?.time, lang);
const replyTo = escapeHtml(item?.replyToName || ""); const replyTo = escapeHtml(item?.replyToName || "");
@ -227,7 +244,7 @@ const heading = lang === "zh" ? "最新评论" : "Latest comments";
return ` return `
<article class="comment-card"> <article class="comment-card">
<div class="comment-card-body"> <div class="comment-card-body">
<div class="comment-card-info"> <header class="comment-card-info">
<div class="comment-avatar"> <div class="comment-avatar">
${avatarHtml} ${avatarHtml}
</div> </div>
@ -238,13 +255,14 @@ const heading = lang === "zh" ? "最新评论" : "Latest comments";
${time ? `<span class="comment-time">${escapeHtml(time)}</span>` : ""} ${time ? `<span class="comment-time">${escapeHtml(time)}</span>` : ""}
</div> </div>
</div> </div>
</div> </header>
<div class="comment-card-title"> <div class="comment-card-text">${preview}</div>
<footer class="comment-source">
<span>${lang === "zh" ? "评论于" : "On"}</span>
<a class="comment-title-link" href="${href}">${title}</a> <a class="comment-title-link" href="${href}">${title}</a>
</div> </footer>
<div class="comment-card-text">${html}</div>
</div> </div>
</article> </article>
`; `;
@ -259,7 +277,7 @@ const heading = lang === "zh" ? "最新评论" : "Latest comments";
const host = section.dataset.host; const host = section.dataset.host;
const siteId = section.dataset.siteId; const siteId = section.dataset.siteId;
const max = section.dataset.max || "10"; const max = section.dataset.max || "5";
const lang = section.dataset.lang || "zh"; const lang = section.dataset.lang || "zh";
const list = section.querySelector(".latest-comments-list"); const list = section.querySelector(".latest-comments-list");

37
src/layouts/MarkdownPostLayout.astro
View file

@ -12,6 +12,14 @@ import "@/styles/global.css";
const { post, frontmatter, lang, slug, postId, headings } = Astro.props; const { post, frontmatter, lang, slug, postId, headings } = Astro.props;
const comments = lang === "zh" ? "评论区" : "comments"; const comments = lang === "zh" ? "评论区" : "comments";
const t = getTranslations(lang); const t = getTranslations(lang);
const publishedDate = new Intl.DateTimeFormat(
lang === "zh" ? "zh-CN" : "en-US",
{
year: "numeric",
month: "long",
day: "numeric",
},
).format(frontmatter.pubDate);
--- ---
<BaseLayout <BaseLayout
@ -54,10 +62,13 @@ const t = getTranslations(lang);
<p class="description"> <p class="description">
<em>{frontmatter.description}</em> <em>{frontmatter.description}</em>
</p> </p>
<p class="meta-line"> <p class="post-byline">
{t.post.publishedOn}: {frontmatter.pubDate.toLocaleDateString()} <span>{t.post.writtenBy} {frontmatter.author}</span>
<span class="byline-separator" aria-hidden="true">·</span>
<time datetime={frontmatter.pubDate.toISOString()}>
{t.post.publishedOn} {publishedDate}
</time>
</p> </p>
<p class="meta-line">{t.post.writtenBy}: {frontmatter.author}</p>
<div class="tags" transition:name={`post-tags-${postId}`}> <div class="tags" transition:name={`post-tags-${postId}`}>
{ {
@ -303,13 +314,29 @@ const t = getTranslations(lang);
word-break: break-word; 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; 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; overflow-wrap: anywhere;
word-break: break-word; word-break: break-word;
} }
.byline-separator {
opacity: 0.65;
}
:global(html.dark) .post-byline {
color: #aab7c4;
}
.post-cover { .post-cover {
width: 300px; width: 300px;
height: auto; height: auto;

2
src/pages/[lang]/index.astro
View file

@ -56,7 +56,7 @@ const rssLink = lang === "zh" ? "/rss.xml" : "/en/rss.xml";
<div class="section-divider"></div> <div class="section-divider"></div>
<!-- <Remark42LatestComments lang={lang} client:load /> --> <!-- <Remark42LatestComments lang={lang} client:load /> -->
<LatestComments /> <LatestComments lang={lang} />
</main> </main>
</BaseLayout> </BaseLayout>

257
src/styles/latest-comments.css
View file

@ -7,14 +7,15 @@
} }
.loading-card { .loading-card {
height: 92px; height: 82px;
margin: 0 0 14px 0; padding: 1rem 0;
padding: 0.9rem 1rem; border-bottom: 1px solid rgba(110, 125, 140, 0.28);
border: 1px dashed #aeb8c2; background: linear-gradient(
background: linear-gradient(90deg, 90deg,
rgba(160, 175, 190, 0.06) 25%, transparent 15%,
rgba(160, 175, 190, 0.16) 50%, rgba(160, 175, 190, 0.13) 50%,
rgba(160, 175, 190, 0.06) 75%); transparent 85%
);
background-size: 200% 100%; background-size: 200% 100%;
animation: shimmer 1.2s infinite linear; animation: shimmer 1.2s infinite linear;
} }
@ -34,65 +35,58 @@
} }
.comment-card { .comment-card {
display: block; padding: 1rem 0;
margin: 0 0 14px 0; border-bottom: 1px solid rgba(110, 125, 140, 0.28);
padding: 0.6rem 1rem; }
border: 2px dashed #aeb8c2;
background-color: var(--comment-background);
.comment-card:first-child {
padding-top: 0.35rem;
} }
.comment-card:last-child { .comment-card:last-child {
margin-bottom: 0; padding-bottom: 0;
border-bottom: 0;
} }
.comment-card-body { .comment-card-body {
display: grid; min-width: 0;
grid-template-columns: minmax(0, 1fr) 320px;
grid-template-areas:
"info title"
"text title";
gap: 0.2rem 1rem;
align-items: start;
} }
.comment-card-info { .comment-card-info {
grid-area: info;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.7rem; gap: 0.65rem;
min-width: 0; min-width: 0;
} }
.comment-avatar { .comment-avatar {
width: 35px; width: 32px;
height: 35px; height: 32px;
flex-shrink: 0; flex: 0 0 32px;
} }
.comment-avatar-img, .comment-avatar-img,
.comment-avatar-fallback { .comment-avatar-fallback {
width: 35px; width: 32px;
height: 35px; height: 32px;
display: block; display: block;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
} }
.comment-avatar-img { .comment-avatar-img {
border: 1px dashed #aeb8c2; background: rgba(160, 175, 190, 0.1);
background: #f3f5f7;
} }
.comment-avatar-fallback { .comment-avatar-fallback {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px dashed #aeb8c2; background: rgba(160, 175, 190, 0.14);
background: rgba(160, 175, 190, 0.12);
color: #5e6b77; color: #5e6b77;
font-weight: 700; font-family: system-ui, sans-serif;
font-size: 1rem; font-size: 0.85rem;
font-weight: 600;
user-select: none; user-select: none;
} }
@ -105,90 +99,68 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: baseline; align-items: baseline;
gap: 0.6rem; gap: 0.25rem 0.55rem;
min-width: 0; min-width: 0;
line-height: 1.3; font-family: system-ui, sans-serif;
font-style: italic; line-height: 1.35;
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;
} }
.comment-author { .comment-author,
font-weight: 400; .comment-reply-to {
font-size: 0.8rem; color: #66717c;
color: gray; font-size: 0.82rem;
font-weight: 500;
overflow-wrap: anywhere; overflow-wrap: anywhere;
word-break: break-word;
} }
.comment-reply-sep,
.comment-time { .comment-time {
color: #7a7a7a; color: #7a858f;
font-size: 0.7rem; font-size: 0.72rem;
} font-weight: 400;
.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;
} }
.comment-card-text { .comment-card-text {
grid-area: text; display: -webkit-box;
margin: 0; margin: 0.6rem 0 0.5rem;
color: #555; max-height: 4.65em;
line-height: 1.5; overflow: hidden;
color: #3f4a54;
font-family: system-ui, sans-serif;
font-size: 0.93rem; font-size: 0.93rem;
min-width: 0; font-weight: 400;
line-height: 1.55;
overflow-wrap: anywhere; overflow-wrap: anywhere;
word-break: break-word; word-break: break-word;
white-space: normal; -webkit-box-orient: vertical;
font-family: -webkit-line-clamp: 3;
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"PingFang SC",
"Hiragino Sans GB",
"Microsoft YaHei",
"Noto Sans CJK SC",
"Source Han Sans SC",
sans-serif;
} }
.comment-card-text :global(p), .comment-source {
.comment-card-text p { display: flex;
margin: 0; 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-title-link {
.comment-card-text img { min-width: 0;
max-width: 100%; overflow: hidden;
height: auto; 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 { .latest-comments-empty {
@ -196,68 +168,57 @@
font-style: italic; font-style: italic;
} }
.comment-reply-sep { html.dark .comment-card,
font-size: 0.8rem; .dark .comment-card,
opacity: 0.7; html.dark .loading-card,
.dark .loading-card {
border-color: rgba(170, 183, 196, 0.25);
} }
.latest-comments .comment-reply-to { html.dark .comment-card-text,
font-weight: 400; .dark .comment-card-text {
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 {
color: #d3d7db; color: #d3d7db;
} }
html.dark .comment-time { html.dark .comment-author,
color: #a8b0b7; .dark .comment-author,
html.dark .comment-reply-to,
.dark .comment-reply-to {
color: #b9c3cc;
} }
html.dark .latest-comments .comment-avatar-fallback, html.dark .comment-time,
.dark .latest-comments .comment-avatar-fallback { .dark .comment-time,
border-color: #7f8c97; html.dark .comment-reply-sep,
background-color: #3a444d; .dark .comment-reply-sep,
color: #dbe3ea; html.dark .comment-source,
.dark .comment-source {
color: #929da7;
} }
:global(.dark) .comment-avatar-fallback { html.dark .comment-title-link,
background: rgba(180, 190, 200, 0.12); .dark .comment-title-link {
color: #aabbd0;
}
html.dark .comment-avatar-fallback,
.dark .comment-avatar-fallback {
background: rgba(180, 190, 200, 0.14);
color: #dbe3ea; color: #dbe3ea;
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.comment-card-body { .comment-card {
grid-template-columns: 1fr; padding-block: 0.85rem;
grid-template-areas:
"title"
"info"
"text";
} }
.comment-card-title { .comment-card-text {
text-align: left; margin-top: 0.5rem;
margin-bottom: 0.2rem;
} }
}
.comment-title-link { @media (prefers-reduced-motion: reduce) {
display: block; .loading-card {
white-space: nowrap; animation: none;
overflow: hidden;
text-overflow: ellipsis;
} }
} }