biss/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

主页

Browse Source
This commit is contained in:
biss
2026-06-18 15:10:33 +08:00 Unverified
parent 39b15b4be9
commit c27c783f9f
3 changed files with 341 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HomeSidebar.astro
+5 -3
View File
@@ -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>
<p>烧烤三件套，灵魂蘸料。</p>
<p id="visitor-distance">当前位置距离主约 <strong>473</strong> 公里！</p>
<div id="welcome-ip-location-info">
欢迎来自 <strong>远方</strong> 的小友。<br />
烧烤三件套，灵魂蘸料。<br />
当前位置距离博主约 <strong>473</strong> 公里！
</div>
<p id="aside-weather">当前天气加载中...</p>
</section>
src/pages/posts/[slug].astro
+70 -6
View File
@@ -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">
<time datetime={post.date.toISOString()}>{post.dateText}</time>
<h1>{post.title}</h1>
<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>)}
<header class={post.cover ? 'article-header article-header-cover' : 'article-header'}>
{post.cover && <img class="article-header-cover-img" src={post.cover} alt="" loading="eager" decoding="async" />}
<div class="article-header-content">
<time datetime={post.date.toISOString()}>{post.dateText}</time>
<h1>{post.title}</h1>
{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
+266 -1
View File
@@ -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;
}