夜间模式

This commit is contained in:
2026-06-18 18:38:38 +08:00 Unverified
parent aa87051c15
commit b066a94ce3
8 changed files with 896 additions and 80 deletions
+49 -47
View File
@@ -57,52 +57,54 @@ const tocSections = toc.reduce<TocSection[]>((sections, item) => {
</section>
)}
{toc.length > 0 && (
<section class="sidebar-card toc-card">
<h2>
<span aria-hidden="true">☰</span>
文章目录
<em>{toc.length}</em>
</h2>
<nav class="toc-list toc-tree" aria-label="文章目录" data-toc-tree>
{tocSections.map((section, index) => (
<div class:list={['toc-group', index === 0 && 'is-open']} data-toc-group data-heading-id={section.heading.id}>
<a class="toc-link toc-link-main" href={`#${section.heading.id}`} data-toc-link data-toc-top>
<span class="toc-marker" aria-hidden="true"></span>
<span>{section.heading.text}</span>
</a>
{section.children.length > 0 && (
<div class="toc-children" data-toc-children>
{section.children.map((item) => (
<a class={`toc-link toc-link-child toc-depth-${item.depth}`} href={`#${item.id}`} data-toc-link>
<span>{item.text}</span>
</a>
))}
</div>
)}
</div>
))}
</nav>
</section>
)}
<section class="sidebar-card same-category-card">
<h2>
<span aria-hidden="true">▣</span>
同类文章
<em>{relatedPosts.length}</em>
</h2>
{relatedPosts.length > 0 ? (
<div class="same-category-list">
{relatedPosts.map((item) => (
<a href={item.href}>
<strong>{item.title}</strong>
<time datetime={item.date.toISOString()}>{item.dateText}</time>
</a>
))}
</div>
) : (
<p class="sidebar-empty">这个分类下暂时没有其他文章。</p>
<div class="article-sticky-sidebar">
{toc.length > 0 && (
<section class="sidebar-card toc-card">
<h2>
<span aria-hidden="true">☰</span>
文章目录
<em>{toc.length}</em>
</h2>
<nav class="toc-list toc-tree" aria-label="文章目录" data-toc-tree>
{tocSections.map((section, index) => (
<div class:list={['toc-group', index === 0 && 'is-open']} data-toc-group data-heading-id={section.heading.id}>
<a class="toc-link toc-link-main" href={`#${section.heading.id}`} data-toc-link data-toc-top>
<span class="toc-marker" aria-hidden="true"></span>
<span>{section.heading.text}</span>
</a>
{section.children.length > 0 && (
<div class="toc-children" data-toc-children>
{section.children.map((item) => (
<a class={`toc-link toc-link-child toc-depth-${item.depth}`} href={`#${item.id}`} data-toc-link>
<span>{item.text}</span>
</a>
))}
</div>
)}
</div>
))}
</nav>
</section>
)}
</section>
<section class="sidebar-card same-category-card">
<h2>
<span aria-hidden="true">▣</span>
同类文章
<em>{relatedPosts.length}</em>
</h2>
{relatedPosts.length > 0 ? (
<div class="same-category-list">
{relatedPosts.map((item) => (
<a href={item.href}>
<strong>{item.title}</strong>
<time datetime={item.date.toISOString()}>{item.dateText}</time>
</a>
))}
</div>
) : (
<p class="sidebar-empty">这个分类下暂时没有其他文章。</p>
)}
</section>
</div>
</aside>