夜间模式
This commit is contained in:
biss committed
1 parent
aa87051c15
commit
b066a94ce3
8 files changed
+896
-80
No files matched your search
@@ -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>
|
||||
@@ -40,17 +40,17 @@ const recentPosts = posts.slice(0, 5);
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
<h2>日历</h2>
|
||||
<div class="calendar-widget">
|
||||
|
||||
@@ -19,6 +19,14 @@ const currentYear = new Date().getFullYear();
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content={description} />
|
||||
<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/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
|
||||
<title>{pageTitle}</title>
|
||||
@@ -27,12 +35,25 @@ const currentYear = new Date().getFullYear();
|
||||
<header class="site-header">
|
||||
<nav class="nav">
|
||||
<a class="brand" href="/">Bi's Blog</a>
|
||||
<div class="nav-links">
|
||||
<div class="nav-links nav-center">
|
||||
<a href="/archives/">归档</a>
|
||||
<a href="/categories/">分类</a>
|
||||
<a href="/tags/">标签</a>
|
||||
<a href="/shuoshuo/">说说</a>
|
||||
<a href="/about/">关于</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="搜索">
|
||||
<svg aria-hidden="true" viewBox="0 0 24 24">
|
||||
<path d="m21 21-4.3-4.3" />
|
||||
@@ -40,6 +61,22 @@ const currentYear = new Date().getFullYear();
|
||||
</svg>
|
||||
<span>搜索</span>
|
||||
</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>
|
||||
</nav>
|
||||
</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/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="/js/random.js"></script>
|
||||
<script is:inline src="/js/search/typesense-search.js"></script>
|
||||
<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');
|
||||
if (!runtime) return;
|
||||
|
||||
Loaded 3 of 8 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user