Codex/design 启用新的页面风格 #10
@@ -342,6 +342,38 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hitokoto-card,
|
||||||
|
:root[data-theme='dark'] .hitokoto-card {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 2px;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--surface-strong);
|
||||||
|
box-shadow: 5px 5px 0 color-mix(in srgb, var(--text) 14%, transparent);
|
||||||
|
backdrop-filter: none;
|
||||||
|
-webkit-backdrop-filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hitokoto-card__refresh,
|
||||||
|
.hitokoto-card__collapse,
|
||||||
|
:root[data-theme='dark'] .hitokoto-card__refresh,
|
||||||
|
:root[data-theme='dark'] .hitokoto-card__collapse {
|
||||||
|
border-color: var(--line);
|
||||||
|
border-radius: 2px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hitokoto-card__refresh:hover,
|
||||||
|
.hitokoto-card__collapse:hover {
|
||||||
|
color: #fff;
|
||||||
|
background: var(--accent);
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hitokoto-card__text,
|
||||||
|
:root[data-theme='dark'] .hitokoto-card__text {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 720px) {
|
@media (max-width: 720px) {
|
||||||
.hitokoto-card {
|
.hitokoto-card {
|
||||||
left: 12px;
|
left: 12px;
|
||||||
|
|||||||
@@ -11,13 +11,18 @@ interface Props {
|
|||||||
|
|
||||||
const { posts, tags, categories } = Astro.props;
|
const { posts, tags, categories } = Astro.props;
|
||||||
const avatar = siteConfig.author.avatar;
|
const avatar = siteConfig.author.avatar;
|
||||||
const recentPosts = posts.slice(0, 5);
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<aside class="home-sidebar" aria-label="首页侧边栏">
|
<aside class="home-sidebar" aria-label="首页侧边栏">
|
||||||
<section class="sidebar-card profile-card">
|
<section class="sidebar-card profile-card">
|
||||||
|
<div class="profile-identity">
|
||||||
<img class="profile-avatar" src={avatar} alt={siteConfig.author.name} loading="lazy" />
|
<img class="profile-avatar" src={avatar} alt={siteConfig.author.name} loading="lazy" />
|
||||||
<div class="profile-name">{siteConfig.author.name}</div>
|
<div>
|
||||||
|
<span>MAINTAINER</span>
|
||||||
|
<strong class="profile-name">{siteConfig.author.name}</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="profile-bio">在代码、图形和自托管服务之间做长期记录。</p>
|
||||||
<div class="profile-stats">
|
<div class="profile-stats">
|
||||||
<a href="/archives/">
|
<a href="/archives/">
|
||||||
<span>文章</span>
|
<span>文章</span>
|
||||||
@@ -33,8 +38,8 @@ const recentPosts = posts.slice(0, 5);
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<a class="follow-button" href={siteConfig.author.github} target="_blank" rel="noreferrer">
|
<a class="follow-button" href={siteConfig.author.github} target="_blank" rel="noreferrer">
|
||||||
<span class="github-mark" aria-hidden="true">GitHub</span>
|
<span>查看 GitHub</span>
|
||||||
<span>Follow Me</span>
|
<span aria-hidden="true">↗</span>
|
||||||
</a>
|
</a>
|
||||||
<div class="profile-links" aria-label="联系方式">
|
<div class="profile-links" aria-label="联系方式">
|
||||||
<a href={siteConfig.author.github} target="_blank" rel="noreferrer" aria-label="GitHub">GitHub</a>
|
<a href={siteConfig.author.github} target="_blank" rel="noreferrer" aria-label="GitHub">GitHub</a>
|
||||||
@@ -44,7 +49,7 @@ const recentPosts = posts.slice(0, 5);
|
|||||||
|
|
||||||
<div class="sticky-sidebar">
|
<div class="sticky-sidebar">
|
||||||
<section class="sidebar-card notice-card">
|
<section class="sidebar-card notice-card">
|
||||||
<h2><span aria-hidden="true">!</span> 公告</h2>
|
<h2><span aria-hidden="true">●</span> 站点广播</h2>
|
||||||
<div id="welcome-ip-location-info">
|
<div id="welcome-ip-location-info">
|
||||||
欢迎来自 <strong>远方</strong> 的小友。<br />
|
欢迎来自 <strong>远方</strong> 的小友。<br />
|
||||||
烧烤三件套,灵魂蘸料。<br />
|
烧烤三件套,灵魂蘸料。<br />
|
||||||
@@ -94,25 +99,6 @@ const recentPosts = posts.slice(0, 5);
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="sidebar-card recent-card">
|
|
||||||
<h2>最新文章</h2>
|
|
||||||
<div class="sidebar-posts">
|
|
||||||
{recentPosts.map((post) => (
|
|
||||||
<a class="sidebar-post" href={post.href}>
|
|
||||||
{post.cover ? (
|
|
||||||
<img src={post.cover} alt="" loading="lazy" />
|
|
||||||
) : (
|
|
||||||
<span class="post-thumb-fallback" aria-hidden="true"></span>
|
|
||||||
)}
|
|
||||||
<span>
|
|
||||||
<strong>{post.title}</strong>
|
|
||||||
<time datetime={post.date.toISOString()}>{post.dateText}</time>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<SiteInfoCard posts={posts} />
|
<SiteInfoCard posts={posts} />
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|||||||
@@ -3,16 +3,27 @@ import { getCategoryHref, type BlogPost } from '@/lib/posts';
|
|||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
post: BlogPost;
|
post: BlogPost;
|
||||||
|
index?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { post } = Astro.props;
|
const { post, index } = Astro.props;
|
||||||
|
const logNumber = index === undefined
|
||||||
|
? post.date.toISOString().slice(5, 10).replace('-', '.')
|
||||||
|
: String(index + 1).padStart(2, '0');
|
||||||
---
|
---
|
||||||
|
|
||||||
<article class="post-card">
|
<article class="post-card">
|
||||||
<a href={post.href}>
|
<a class="post-card-main" href={post.href}>
|
||||||
|
<span class="post-card-index" aria-hidden="true">
|
||||||
|
<small>LOG</small>
|
||||||
|
<strong>{logNumber}</strong>
|
||||||
|
</span>
|
||||||
|
<span class="post-card-copy">
|
||||||
<time datetime={post.date.toISOString()}>{post.dateText}</time>
|
<time datetime={post.date.toISOString()}>{post.dateText}</time>
|
||||||
<h2>{post.title}</h2>
|
<span class="post-card-title">{post.title}</span>
|
||||||
{post.summary && <p>{post.summary}</p>}
|
{post.summary && <span class="post-card-summary">{post.summary}</span>}
|
||||||
|
</span>
|
||||||
|
<span class="post-card-open" aria-hidden="true">↗</span>
|
||||||
</a>
|
</a>
|
||||||
<div class="meta-list">
|
<div class="meta-list">
|
||||||
{post.categories.map((category) => <a href={getCategoryHref(category)}>{category}</a>)}
|
{post.categories.map((category) => <a href={getCategoryHref(category)}>{category}</a>)}
|
||||||
|
|||||||
@@ -122,7 +122,7 @@ const consoleSites = [
|
|||||||
<body>
|
<body>
|
||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<nav class="nav">
|
<nav class="nav">
|
||||||
<a class="brand" href="/">{siteConfig.site.name}</a>
|
<a class="brand" href="/" aria-label={`${siteConfig.site.name} 首页`}><span>{siteConfig.author.name}</span><i>.log</i></a>
|
||||||
<button class="nav-menu-toggle" type="button" aria-label="打开菜单" aria-expanded="false" data-nav-toggle>
|
<button class="nav-menu-toggle" type="button" aria-label="打开菜单" aria-expanded="false" data-nav-toggle>
|
||||||
<i class="fa-solid fa-bars nav-menu-open" aria-hidden="true"></i>
|
<i class="fa-solid fa-bars nav-menu-open" aria-hidden="true"></i>
|
||||||
<i class="fa-solid fa-xmark nav-menu-close" aria-hidden="true"></i>
|
<i class="fa-solid fa-xmark nav-menu-close" aria-hidden="true"></i>
|
||||||
|
|||||||
@@ -5,11 +5,10 @@ import { siteConfig } from '../../site.config.mjs';
|
|||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout title="关于" description={`关于 ${siteConfig.site.name} 和站长 ${siteConfig.author.name} 的简短介绍。`}>
|
<BaseLayout title="关于" description={`关于 ${siteConfig.site.name} 和站长 ${siteConfig.author.name} 的简短介绍。`}>
|
||||||
<section class="content-wrap narrow page-with-card native-page">
|
<section class="content-wrap page-with-card native-page">
|
||||||
<PageHeaderCard title="关于" subtitle="这里记录折腾、学习和一些普通日子的回声。" />
|
<PageHeaderCard title="关于" subtitle="这里记录折腾、学习和一些普通日子的回声。" />
|
||||||
</section>
|
|
||||||
|
|
||||||
<article class="article page-article native-page-article">
|
<article class="article page-article native-page-article about-page-article">
|
||||||
<div class="prose">
|
<div class="prose">
|
||||||
<p>
|
<p>
|
||||||
你好,我是 Bi。这个博客主要用来保存技术实践、生活片段和那些一时半会儿不想让它们散掉的想法。
|
你好,我是 Bi。这个博客主要用来保存技术实践、生活片段和那些一时半会儿不想让它们散掉的想法。
|
||||||
@@ -43,4 +42,5 @@ import { siteConfig } from '../../site.config.mjs';
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
</section>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ const archiveStats = [...posts.reduce((months, post) => {
|
|||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout title="归档">
|
<BaseLayout title="归档">
|
||||||
<section class="content-wrap narrow">
|
<section class="content-wrap">
|
||||||
<PageHeaderCard title="归档" subtitle={`共 ${posts.length} 篇文章`} />
|
<PageHeaderCard title="归档" subtitle={`共 ${posts.length} 篇文章`} />
|
||||||
<StatsChart title="归档发布趋势" subtitle="按月份统计文章发布数量" type="line" items={archiveStats} />
|
<StatsChart title="归档发布趋势" subtitle="按月份统计文章发布数量" type="line" items={archiveStats} />
|
||||||
<ArchiveTimeline posts={pageData.items} />
|
<ArchiveTimeline posts={pageData.items} />
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ const archiveStats = [...posts.reduce((months, post) => {
|
|||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout title={`归档 - 第 ${pageData.currentPage} 页`}>
|
<BaseLayout title={`归档 - 第 ${pageData.currentPage} 页`}>
|
||||||
<section class="content-wrap narrow">
|
<section class="content-wrap">
|
||||||
<PageHeaderCard title="归档" subtitle={`共 ${posts.length} 篇文章,第 ${pageData.currentPage} 页`} />
|
<PageHeaderCard title="归档" subtitle={`共 ${posts.length} 篇文章,第 ${pageData.currentPage} 页`} />
|
||||||
<StatsChart title="归档发布趋势" subtitle="按月份统计文章发布数量" type="line" items={archiveStats} />
|
<StatsChart title="归档发布趋势" subtitle="按月份统计文章发布数量" type="line" items={archiveStats} />
|
||||||
<ArchiveTimeline posts={pageData.items} />
|
<ArchiveTimeline posts={pageData.items} />
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ const categoryChartSubtitle = [
|
|||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout title="分类">
|
<BaseLayout title="分类">
|
||||||
<section class="content-wrap narrow">
|
<section class="content-wrap">
|
||||||
<PageHeaderCard title="分类" subtitle={`共 ${categories.length} 个分类`} />
|
<PageHeaderCard title="分类" subtitle={`共 ${categories.length} 个分类`} />
|
||||||
<StatsChart title="分类归档统计" subtitle={categoryChartSubtitle} type="pie" items={categoryChartStats} totalLabel="次归档" />
|
<StatsChart title="分类归档统计" subtitle={categoryChartSubtitle} type="pie" items={categoryChartStats} totalLabel="次归档" />
|
||||||
<div class="term-grid">
|
<div class="term-grid">
|
||||||
|
|||||||
+12
-8
@@ -16,14 +16,15 @@ const pageData = getPageSlice(posts, 1);
|
|||||||
<BaseLayout>
|
<BaseLayout>
|
||||||
<section class="hero home-hero">
|
<section class="hero home-hero">
|
||||||
<div class="hero-copy">
|
<div class="hero-copy">
|
||||||
<p class="eyebrow">写给日常、技术和正在发生的自己</p>
|
<p class="hero-kicker"><span>FIELD NOTES</span><span>2025—NOW</span></p>
|
||||||
<h1>{siteConfig.site.name}</h1>
|
<h1><span>{siteConfig.author.name}</span><em>/log</em></h1>
|
||||||
<p>把折腾、学习和生活片段安静地收在这里。</p>
|
<p class="hero-intro">记录代码跑通之前,也记录它为什么没跑通。</p>
|
||||||
|
<p class="hero-route">OpenCV · OpenGL · 自托管服务 · 没打算归类的日常</p>
|
||||||
</div>
|
</div>
|
||||||
<aside id="bber-talk" class="hero-talk" aria-label="说说滚动展示">
|
<aside id="bber-talk" class="hero-talk" aria-label="说说滚动展示">
|
||||||
<div class="hero-talk-head">
|
<div class="hero-talk-head">
|
||||||
<span>Recent Talks</span>
|
<span><strong>RECENT.TXT</strong><small>最近的碎片记录</small></span>
|
||||||
<a href="/shuoshuo/" aria-label="查看全部说说">
|
<a href="/shuoshuo/" aria-label="查看全部说说" title="查看全部说说">
|
||||||
<i class="fa-regular fa-comments" aria-hidden="true"></i>
|
<i class="fa-regular fa-comments" aria-hidden="true"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -33,11 +34,14 @@ const pageData = getPageSlice(posts, 1);
|
|||||||
<section class="content-wrap home-layout">
|
<section class="content-wrap home-layout">
|
||||||
<div class="home-main">
|
<div class="home-main">
|
||||||
<div class="section-heading">
|
<div class="section-heading">
|
||||||
<h2>最新文章</h2>
|
<div>
|
||||||
<a href="/archives/">查看全部</a>
|
<p>INDEX / LATEST</p>
|
||||||
|
<h2>最近写下的</h2>
|
||||||
|
</div>
|
||||||
|
<a href="/archives/">完整归档 <span aria-hidden="true">→</span></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="post-list">
|
<div class="post-list">
|
||||||
{pageData.items.map((post) => <PostCard post={post} />)}
|
{pageData.items.map((post, index) => <PostCard post={post} index={index} />)}
|
||||||
</div>
|
</div>
|
||||||
<Pagination currentPage={pageData.currentPage} totalPages={pageData.totalPages} />
|
<Pagination currentPage={pageData.currentPage} totalPages={pageData.totalPages} />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ const friends = siteConfig.friends;
|
|||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout title="友情链接" description={`${siteConfig.site.name} 的友情链接页面。`}>
|
<BaseLayout title="友情链接" description={`${siteConfig.site.name} 的友情链接页面。`}>
|
||||||
<section class="content-wrap narrow native-page">
|
<section class="content-wrap native-page">
|
||||||
<PageHeaderCard title="友情链接" subtitle="把仍在发光的角落放在一起。" />
|
<PageHeaderCard title="友情链接" subtitle="把仍在发光的角落放在一起。" />
|
||||||
|
|
||||||
<div class="friend-link-grid" aria-label="友情链接列表">
|
<div class="friend-link-grid" aria-label="友情链接列表">
|
||||||
|
|||||||
@@ -179,17 +179,16 @@ const articleJsonLd = {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
{post.summary && (
|
{post.summary && (
|
||||||
<section class="article-summary-card" aria-label="AI 文章摘要">
|
<section class="article-summary-card" aria-label="文章导读">
|
||||||
<div class="article-summary-header">
|
<div class="article-summary-header">
|
||||||
<span class="article-summary-brand">
|
<span class="article-summary-brand">
|
||||||
<span class="article-summary-icon" aria-hidden="true">✦</span>
|
<span class="article-summary-icon" aria-hidden="true">↳</span>
|
||||||
AI 摘要
|
文章导读
|
||||||
</span>
|
</span>
|
||||||
<span class="article-summary-model">QWEN</span>
|
<span class="article-summary-model">摘要由 Qwen 生成</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="article-summary-content">
|
<p class="article-summary-content">
|
||||||
<span class="article-summary-text" data-summary-text={post.summary}>{post.summary}</span>
|
<span class="article-summary-text">{post.summary}</span>
|
||||||
<span class="article-summary-caret" aria-hidden="true"></span>
|
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
)}
|
)}
|
||||||
@@ -392,28 +391,6 @@ const articleJsonLd = {
|
|||||||
window.addEventListener('resize', updateToc);
|
window.addEventListener('resize', updateToc);
|
||||||
}
|
}
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ const tagStats = tags.map((tag) => ({
|
|||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout title="标签">
|
<BaseLayout title="标签">
|
||||||
<section class="content-wrap narrow">
|
<section class="content-wrap">
|
||||||
<PageHeaderCard title="标签" subtitle={`共 ${tags.length} 个标签`} />
|
<PageHeaderCard title="标签" subtitle={`共 ${tags.length} 个标签`} />
|
||||||
<StatsChart title="标签文章统计" subtitle={`共 ${posts.length} 篇文章`} type="pie" items={tagStats} />
|
<StatsChart title="标签文章统计" subtitle={`共 ${posts.length} 篇文章`} type="pie" items={tagStats} />
|
||||||
<div class="term-grid">
|
<div class="term-grid">
|
||||||
|
|||||||
@@ -15,3 +15,4 @@
|
|||||||
@import "./site/15-reading-series.css";
|
@import "./site/15-reading-series.css";
|
||||||
@import "./site/16-pwa.css";
|
@import "./site/16-pwa.css";
|
||||||
@import "./site/17-revisions.css";
|
@import "./site/17-revisions.css";
|
||||||
|
@import "./site/18-worklog.css";
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user