diff --git a/src/components/HomeSidebar.astro b/src/components/HomeSidebar.astro index 2f7ff47..435fb2f 100644 --- a/src/components/HomeSidebar.astro +++ b/src/components/HomeSidebar.astro @@ -42,9 +42,11 @@ const recentPosts = posts.slice(0, 5);

公告

-

欢迎来自 远方 的小友。

-

烧烤三件套，灵魂蘸料。

-

当前位置距离主约 473 公里！

+
+ 欢迎来自 远方 的小友。
+ 烧烤三件套，灵魂蘸料。
+ 当前位置距离博主约 473 公里！ +

当前天气加载中...

diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro index bcb3318..982f624 100644 --- a/src/pages/posts/[slug].astro +++ b/src/pages/posts/[slug].astro @@ -14,6 +14,15 @@ export function getStaticPaths() { const { post } = Astro.props; const { Content } = post; const allPosts = getAllPosts(); +const rawContent = post.rawContent?.() ?? ''; +const textContent = rawContent + .replace(/```[\s\S]*?```/g, '') + .replace(/<[^>]+>/g, '') + .replace(/[#>*_`~\-\[\]\(\)!]/g, '') + .replace(/\s+/g, ''); +const wordCount = textContent.length; +const wordCountText = wordCount >= 1000 ? `${(wordCount / 1000).toFixed(1)}k` : String(wordCount); +const readingMinutes = Math.max(1, Math.ceil(wordCount / 400)); function slugifyHeading(value: string): string { return value @@ -69,14 +78,46 @@ const relatedPosts = allPosts
-
- -

{post.title}

-
- {post.categories.map((category) => {category})} - {post.tags.map((tag) => #{tag})} +
+ {post.cover && } +
+ +

{post.title}

+ {post.cover ? ( +
+ 发布于 {post.dateText} + {post.categories[0] && {post.categories[0]}} + 总字数：{wordCountText} + 阅读时长：{readingMinutes} 分钟 +
+ ) : ( +
+ {post.categories.map((category) => {category})} + {post.tags.map((tag) => #{tag})} +
+ )}
+ {post.summary && ( +
+ +

+ {post.summary} + +

+
+ + + 清羽のAI摘要 + + KIMI-K2.5 +
+
+ )}
@@ -102,5 +143,28 @@ const relatedPosts = allPosts const item = toc[index]; if (item?.id && !heading.id) heading.id = item.id; }); + + const summaryText = document.querySelector('.article-summary-text'); + if (!summaryText) return; + + const fullText = summaryText.dataset.summaryText || summaryText.textContent || ''; + const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + if (reduceMotion) { + summaryText.textContent = fullText; + return; + } + + summaryText.textContent = ''; + let index = 0; + + function typeSummary() { + index += 1; + summaryText.textContent = fullText.slice(0, index); + if (index < fullText.length) { + window.setTimeout(typeSummary, 34); + } + } + + window.setTimeout(typeSummary, 280); })(); diff --git a/src/styles/site.css b/src/styles/site.css index ad841ca..0a12894 100644 --- a/src/styles/site.css +++ b/src/styles/site.css @@ -437,6 +437,33 @@ a { line-height: 1.9; } +#welcome-info, +#welcome-ip-location-info { + margin: 0.65em 0; + overflow-wrap: anywhere; + color: #596068; + line-height: 1.9; + --kouseki-welcome-color: #66c8f5; + --kouseki-ip-color: #66c8f5; + --kouseki-gl-size: 16px; +} + +#welcome-info b span.ip-mask, +#welcome-ip-location-info b span.ip-mask { + display: inline-block; + filter: blur(6px); + transition: filter 0.3s ease; + cursor: pointer; + user-select: none; +} + +#welcome-info b span.ip-mask:hover, +#welcome-info b span.ip-mask:active, +#welcome-ip-location-info b span.ip-mask:hover, +#welcome-ip-location-info b span.ip-mask:active { + filter: blur(0); +} + .calendar-widget, .schedule-widget { display: grid; @@ -716,11 +743,12 @@ time { } .article { + --article-padding: clamp(24px, 5vw, 48px); width: min(var(--article-width), calc(100% - (var(--page-gutter) * 2))); margin: 64px auto 84px; border: 1px solid rgba(255, 255, 255, 0.58); border-radius: 8px; - padding: clamp(24px, 5vw, 48px); + padding: var(--article-padding); background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.72), transparent 34%), linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(226, 248, 241, 0.35)), @@ -733,17 +761,231 @@ time { } .article-header { + position: relative; margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); } +.article-header-content { + position: relative; + z-index: 1; +} + .article-header h1 { margin: 8px 0 0; font-size: clamp(2rem, 6vw, 3.3rem); line-height: 1.14; } +.article-header-cover { + display: grid; + align-items: end; + min-height: clamp(320px, 40vw, 460px); + margin: calc(var(--article-padding) * -1) calc(var(--article-padding) * -1) 34px; + overflow: hidden; + border: 0; + border-radius: 8px 8px 0 0; + padding: clamp(86px, 13vw, 150px) var(--article-padding) clamp(28px, 6vw, 52px); + color: #fff; + background: #5d7f78; +} + +.article-header-cover::before, +.article-header-cover::after { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; +} + +.article-header-cover::before { + z-index: 1; + background: + linear-gradient(180deg, rgba(23, 55, 48, 0.42), rgba(23, 55, 48, 0.18) 38%, rgba(12, 31, 28, 0.68)), + linear-gradient(90deg, rgba(13, 55, 49, 0.52), rgba(19, 90, 79, 0.14) 54%, rgba(13, 55, 49, 0.36)); +} + +.article-header-cover::after { + z-index: 2; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.2), + inset 0 -90px 110px rgba(10, 28, 26, 0.34); +} + +.article-header-cover-img { + position: absolute; + inset: 0; + display: block; + width: 100%; + height: 100%; + object-fit: cover; + filter: saturate(0.9) contrast(0.94); +} + +.article-header-cover .article-header-content { + z-index: 3; + max-width: 900px; + text-shadow: 0 3px 14px rgba(0, 0, 0, 0.48); +} + +.article-header-cover time { + display: none; +} + +.article-header-cover h1 { + max-width: 920px; + margin: 0; + color: #fff; + font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif; + font-size: clamp(2.4rem, 6vw, 4.2rem); + font-weight: 700; + line-height: 1.12; +} + +.article-hero-meta { + display: flex; + flex-wrap: wrap; + gap: 9px 12px; + align-items: center; + margin-top: 18px; + color: rgba(255, 255, 255, 0.92); + font-size: 0.98rem; + font-weight: 700; +} + +.article-hero-meta span, +.article-hero-meta a { + display: inline-flex; + align-items: center; +} + +.article-hero-meta span:not(:first-child)::before, +.article-hero-meta a::before { + content: "|"; + margin-right: 12px; + color: rgba(255, 255, 255, 0.62); + font-weight: 400; +} + +.article-hero-meta a:hover { + color: #d8fff5; +} + +.article-summary-card { + position: relative; + margin: 0 0 30px; + overflow: hidden; + border: 1px solid rgba(133, 162, 153, 0.34); + border-radius: 8px; + padding: 34px 20px 16px; + background: + radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.8), transparent 32%), + linear-gradient(135deg, rgba(250, 252, 247, 0.88), rgba(228, 240, 234, 0.78)), + rgba(245, 250, 246, 0.78); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.9), + 0 14px 34px rgba(58, 51, 38, 0.1); + backdrop-filter: blur(18px) saturate(145%); + -webkit-backdrop-filter: blur(18px) saturate(145%); +} + +.article-summary-card::before { + content: ""; + position: absolute; + top: 0; + right: 0; + left: 0; + height: 25px; + border-bottom: 1px solid rgba(133, 162, 153, 0.18); + background: rgba(255, 255, 255, 0.28); + pointer-events: none; +} + +.article-summary-dots { + position: absolute; + top: 14px; + left: 16px; + z-index: 1; + display: flex; + gap: 8px; +} + +.article-summary-dots span { + width: 10px; + height: 10px; + border-radius: 999px; + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12); +} + +.article-summary-dots span:nth-child(1) { + background: #ff6b63; +} + +.article-summary-dots span:nth-child(2) { + background: #ffc247; +} + +.article-summary-dots span:nth-child(3) { + background: #4ecb71; +} + +.article-summary-content { + position: relative; + z-index: 1; + margin: 0; + color: #59615f; + font-family: "LXGW WenKai", "霞鹜文楷", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif; + font-size: 1rem; + line-height: 1.9; +} + +.article-summary-caret { + display: inline-block; + width: 2px; + height: 1.1em; + margin-left: 3px; + vertical-align: -0.16em; + background: var(--accent); + animation: summary-caret-blink 0.9s steps(1) infinite; +} + +.article-summary-footer { + position: relative; + z-index: 1; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + margin-top: 24px; + color: rgba(85, 95, 94, 0.56); + font-family: "JetBrains Mono", Consolas, "Microsoft YaHei", monospace; + font-size: 0.95rem; + font-weight: 900; + letter-spacing: 0; +} + +.article-summary-brand { + display: inline-flex; + align-items: center; + gap: 8px; +} + +.article-summary-brand span { + color: rgba(15, 118, 110, 0.56); + font-size: 1.05rem; +} + +.article-summary-model { + white-space: nowrap; +} + +@keyframes summary-caret-blink { + 50% { + opacity: 0; + } +} + .prose :where(h2, h3, h4) { scroll-margin-top: 110px; margin-top: 2em; @@ -1377,6 +1619,29 @@ time { margin-top: 32px; } + .article-header-cover { + min-height: 300px; + padding-top: 92px; + } + + .article-header-cover h1 { + font-size: clamp(2rem, 11vw, 3rem); + } + + .article-hero-meta { + font-size: 0.9rem; + } + + .article-summary-card { + padding: 34px 16px 16px; + } + + .article-summary-footer { + align-items: flex-start; + flex-direction: column; + gap: 8px; + } + .post-copyright-card { padding: 22px 18px 18px; }