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

更换到Astro #9

Merged
biss merged 30 commits from switch-to-astro into master 2026-06-19 13:23:31 +08:00
Conversation 0 Commits 30 Files Changed 353
+896 -80
8 changed files with 896 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b066a94ce3 - Show all commits

No files matched your search

src/components/ArticleSidebar.astro
+49 -47
View File
@@ -57,52 +57,54 @@ const tocSections = toc.reduce<TocSection[]>((sections, item) => {
</section> </section>
)} )}
{toc.length > 0 && ( <div class="article-sticky-sidebar">
<section class="sidebar-card toc-card"> {toc.length > 0 && (
<h2> <section class="sidebar-card toc-card">
<span aria-hidden="true">☰</span> <h2>
文章目录 <span aria-hidden="true">☰</span>
<em>{toc.length}</em> 文章目录
</h2> <em>{toc.length}</em>
<nav class="toc-list toc-tree" aria-label="文章目录" data-toc-tree> </h2>
{tocSections.map((section, index) => ( <nav class="toc-list toc-tree" aria-label="文章目录" data-toc-tree>
<div class:list={['toc-group', index === 0 && 'is-open']} data-toc-group data-heading-id={section.heading.id}> {tocSections.map((section, index) => (
<a class="toc-link toc-link-main" href={`#${section.heading.id}`} data-toc-link data-toc-top> <div class:list={['toc-group', index === 0 && 'is-open']} data-toc-group data-heading-id={section.heading.id}>
<span class="toc-marker" aria-hidden="true"></span> <a class="toc-link toc-link-main" href={`#${section.heading.id}`} data-toc-link data-toc-top>
<span>{section.heading.text}</span> <span class="toc-marker" aria-hidden="true"></span>
</a> <span>{section.heading.text}</span>
{section.children.length > 0 && ( </a>
<div class="toc-children" data-toc-children> {section.children.length > 0 && (
{section.children.map((item) => ( <div class="toc-children" data-toc-children>
<a class={`toc-link toc-link-child toc-depth-${item.depth}`} href={`#${item.id}`} data-toc-link> {section.children.map((item) => (
<span>{item.text}</span> <a class={`toc-link toc-link-child toc-depth-${item.depth}`} href={`#${item.id}`} data-toc-link>
</a> <span>{item.text}</span>
))} </a>
</div> ))}
)} </div>
</div> )}
))} </div>
</nav> ))}
</section> </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>
)} )}
</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> </aside>
src/components/HomeSidebar.astro
+10 -10
View File
@@ -40,17 +40,17 @@ const recentPosts = posts.slice(0, 5);
</div> </div>
</section> </section>
<section class="sidebar-card notice-card">
<h2><span aria-hidden="true">!</span> 公告</h2>
<div id="welcome-ip-location-info">
欢迎来自 <strong>远方</strong> 的小友。<br />
烧烤三件套，灵魂蘸料。<br />
当前位置距离博主约 <strong>473</strong> 公里！
</div>
<p id="aside-weather">当前天气加载中...</p>
</section>
<div class="sticky-sidebar"> <div class="sticky-sidebar">
<section class="sidebar-card notice-card">
<h2><span aria-hidden="true">!</span> 公告</h2>
<div id="welcome-ip-location-info">
欢迎来自 <strong>远方</strong> 的小友。<br />
烧烤三件套，灵魂蘸料。<br />
当前位置距离博主约 <strong>473</strong> 公里！
</div>
<p id="aside-weather">当前天气加载中...</p>
</section>
<section class="sidebar-card calendar-card"> <section class="sidebar-card calendar-card">
<h2>日历</h2> <h2>日历</h2>
<div class="calendar-widget"> <div class="calendar-widget">
src/layouts/BaseLayout.astro
+66 -1
View File
@@ -19,6 +19,14 @@ const currentYear = new Date().getFullYear();
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} /> <meta name="description" content={description} />
<link rel="icon" href="/images/Bi.ico" /> <link rel="icon" href="/images/Bi.ico" />
<script is:inline>
(() => {
const storageKey = 'site-theme';
const savedTheme = localStorage.getItem(storageKey);
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
document.documentElement.dataset.theme = savedTheme || systemTheme;
})();
</script>
<link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/instantsearch.css/themes/reset-min.css" /> <link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/instantsearch.css/themes/reset-min.css" />
<link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" /> <link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
<title>{pageTitle}</title> <title>{pageTitle}</title>
@@ -27,12 +35,25 @@ const currentYear = new Date().getFullYear();
<header class="site-header"> <header class="site-header">
<nav class="nav"> <nav class="nav">
<a class="brand" href="/">Bi's Blog</a> <a class="brand" href="/">Bi's Blog</a>
<div class="nav-links"> <div class="nav-links nav-center">
<a href="/archives/">归档</a> <a href="/archives/">归档</a>
<a href="/categories/">分类</a> <a href="/categories/">分类</a>
<a href="/tags/">标签</a> <a href="/tags/">标签</a>
<a href="/shuoshuo/">说说</a>
<a href="/about/">关于</a> <a href="/about/">关于</a>
<a href="/link/">友链</a> <a href="/link/">友链</a>
</div>
<div class="nav-links nav-actions">
<button class="nav-random" type="button" onclick="randomPost()" aria-label="前往随机文章" title="前往随机文章">
<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M16 3h5v5" />
<path d="M4 20 21 3" />
<path d="M21 16v5h-5" />
<path d="M15 15l6 6" />
<path d="M4 4l5 5" />
</svg>
<span>随机文章</span>
</button>
<button class="nav-search search-typesense-trigger" type="button" aria-label="搜索" title="搜索"> <button class="nav-search search-typesense-trigger" type="button" aria-label="搜索" title="搜索">
<svg aria-hidden="true" viewBox="0 0 24 24"> <svg aria-hidden="true" viewBox="0 0 24 24">
<path d="m21 21-4.3-4.3" /> <path d="m21 21-4.3-4.3" />
@@ -40,6 +61,22 @@ const currentYear = new Date().getFullYear();
</svg> </svg>
<span>搜索</span> <span>搜索</span>
</button> </button>
<button class="theme-toggle" type="button" aria-label="切换夜间模式" title="切换夜间模式" data-theme-toggle>
<svg class="theme-toggle-sun" aria-hidden="true" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="4" />
<path d="M12 2v2" />
<path d="M12 20v2" />
<path d="m4.93 4.93 1.41 1.41" />
<path d="m17.66 17.66 1.41 1.41" />
<path d="M2 12h2" />
<path d="M20 12h2" />
<path d="m6.34 17.66-1.41 1.41" />
<path d="m19.07 4.93-1.41 1.41" />
</svg>
<svg class="theme-toggle-moon" aria-hidden="true" viewBox="0 0 24 24">
<path d="M20.99 13.49A8.5 8.5 0 1 1 10.51 3.01 6.5 6.5 0 1 0 20.99 13.49Z" />
</svg>
</button>
</div> </div>
</nav> </nav>
</header> </header>
@@ -104,8 +141,36 @@ const currentYear = new Date().getFullYear();
<script is:inline src="https://cdn.jsdmirror.com/npm/instantsearch.js@4.56.0"></script> <script is:inline src="https://cdn.jsdmirror.com/npm/instantsearch.js@4.56.0"></script>
<script is:inline src="https://cdn.jsdmirror.com/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js"></script> <script is:inline src="https://cdn.jsdmirror.com/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js"></script>
<script is:inline src="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script> <script is:inline src="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script is:inline src="/js/random.js"></script>
<script is:inline src="/js/search/typesense-search.js"></script> <script is:inline src="/js/search/typesense-search.js"></script>
<script is:inline> <script is:inline>
(() => {
const storageKey = 'site-theme';
const root = document.documentElement;
const button = document.querySelector('[data-theme-toggle]');
const media = window.matchMedia('(prefers-color-scheme: dark)');
const getSystemTheme = () => (media.matches ? 'dark' : 'light');
const getTheme = () => localStorage.getItem(storageKey) || getSystemTheme();
function applyTheme(theme) {
root.dataset.theme = theme;
button?.setAttribute('aria-label', theme === 'dark' ? '切换到日间模式' : '切换到夜间模式');
button?.setAttribute('title', theme === 'dark' ? '切换到日间模式' : '切换到夜间模式');
}
applyTheme(getTheme());
button?.addEventListener('click', () => {
const nextTheme = root.dataset.theme === 'dark' ? 'light' : 'dark';
localStorage.setItem(storageKey, nextTheme);
applyTheme(nextTheme);
});
media.addEventListener('change', () => {
if (!localStorage.getItem(storageKey)) applyTheme(getSystemTheme());
});
})();
(() => { (() => {
const runtime = document.getElementById('site-runtime'); const runtime = document.getElementById('site-runtime');
if (!runtime) return; if (!runtime) return;
Loaded 3 of 8 files, more files were not shown because too many files have changed in this diff. Show more