主页

src/components/HomeSidebar.astro

@@ -42,9 +42,11 @@ const recentPosts = posts.slice(0, 5);
 
   <section class="sidebar-card notice-card">
     <h2><span aria-hidden="true">!</span> 公告</h2>
-    <p>欢迎来自 <strong id="visitor-location">远方</strong> 的小友。</p>
+    <div id="welcome-ip-location-info">
-    <p>烧烤三件套，灵魂蘸料。</p>
+      欢迎来自 <strong>远方</strong> 的小友。<br />
-    <p id="visitor-distance">当前位置距离主约 <strong>473</strong> 公里！</p>
+      烧烤三件套，灵魂蘸料。<br />
+      当前位置距离博主约 <strong>473</strong> 公里！
+    </div>
     <p id="aside-weather">当前天气加载中...</p>
   </section>
 

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
 <BaseLayout title={post.title} description={post.summary}>
   <section class="post-layout">
     <article class="article post-article">
-      <header class="article-header">
+      <header class={post.cover ? 'article-header article-header-cover' : 'article-header'}>
-        <time datetime={post.date.toISOString()}>{post.dateText}</time>
+        {post.cover && <img class="article-header-cover-img" src={post.cover} alt="" loading="eager" decoding="async" />}
-        <h1>{post.title}</h1>
+        <div class="article-header-content">
-        <div class="meta-list">
+          <time datetime={post.date.toISOString()}>{post.dateText}</time>
-          {post.categories.map((category) => <a href={`/categories/${encodeURIComponent(category)}/`}>{category}</a>)}
+          <h1>{post.title}</h1>
-          {post.tags.map((tag) => <a href={`/tags/${encodeURIComponent(tag)}/`}>#{tag}</a>)}
+          {post.cover ? (
+            <div class="article-hero-meta" aria-label="文章信息">
+              <span>发布于 {post.dateText}</span>
+              {post.categories[0] && <a href={`/categories/${encodeURIComponent(post.categories[0])}/`}>{post.categories[0]}</a>}
+              <span>总字数：{wordCountText}</span>
+              <span>阅读时长：{readingMinutes} 分钟</span>
+            </div>
+          ) : (
+            <div class="meta-list">
+              {post.categories.map((category) => <a href={`/categories/${encodeURIComponent(category)}/`}>{category}</a>)}
+              {post.tags.map((tag) => <a href={`/tags/${encodeURIComponent(tag)}/`}>#{tag}</a>)}
+            </div>
+          )}
         </div>
       </header>
+      {post.summary && (
+        <section class="article-summary-card" aria-label="AI 文章摘要">
+          <div class="article-summary-dots" aria-hidden="true">
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+          <p class="article-summary-content">
+            <span class="article-summary-text" data-summary-text={post.summary}>{post.summary}</span>
+            <span class="article-summary-caret" aria-hidden="true"></span>
+          </p>
+          <div class="article-summary-footer">
+            <span class="article-summary-brand">
+              <span aria-hidden="true">✣</span>
+              清羽のAI摘要
+            </span>
+            <span class="article-summary-model">KIMI-K2.5</span>
+          </div>
+        </section>
+      )}
       <div class="prose" data-toc={JSON.stringify(toc)}>
         <Content />
       </div>
@@ -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);
   })();
 </script>

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;
   }