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-19 07:36:29 +08:00 Unverified
parent 641053938b
commit 3d5eb000f1
3 changed files with 139 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/BaseLayout.astro
+50 -19
View File
@@ -39,24 +39,30 @@ const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/</g, '\\u003c
<header class="site-header">
<nav class="nav">
<a class="brand" href="/">{siteConfig.site.name}</a>
<div class="nav-links nav-center">
{siteConfig.nav.map((item) => (
<a href={item.href}><i class={`${item.icon} nav-icon`} aria-hidden="true"></i><span>{item.label}</span></a>
))}
</div>
<div class="nav-links nav-actions">
<button class="nav-random" type="button" onclick="randomPost()" aria-label="前往随机文章" title="前往随机文章">
<i class="fa-solid fa-shuffle nav-icon" aria-hidden="true"></i>
<span>随机文章</span>
</button>
<button class="nav-search search-typesense-trigger" type="button" aria-label="搜索" title="搜索">
<i class="fa-solid fa-magnifying-glass nav-icon" aria-hidden="true"></i>
<span>搜索</span>
</button>
<button class="theme-toggle" type="button" aria-label="切换夜间模式" title="切换夜间模式" data-theme-toggle>
<i class="fa-solid fa-sun theme-toggle-sun nav-icon" aria-hidden="true"></i>
<i class="fa-solid fa-moon theme-toggle-moon nav-icon" aria-hidden="true"></i>
</button>
<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-xmark nav-menu-close" aria-hidden="true"></i>
</button>
<div class="nav-menu" data-nav-menu>
<div class="nav-links nav-center">
{siteConfig.nav.map((item) => (
<a href={item.href}><i class={`${item.icon} nav-icon`} aria-hidden="true"></i><span>{item.label}</span></a>
))}
</div>
<div class="nav-links nav-actions">
<button class="nav-random" type="button" onclick="randomPost()" aria-label="前往随机文章" title="前往随机文章">
<i class="fa-solid fa-shuffle nav-icon" aria-hidden="true"></i>
<span>随机文章</span>
</button>
<button class="nav-search search-typesense-trigger" type="button" aria-label="搜索" title="搜索">
<i class="fa-solid fa-magnifying-glass nav-icon" aria-hidden="true"></i>
<span>搜索</span>
</button>
<button class="theme-toggle" type="button" aria-label="切换夜间模式" title="切换夜间模式" data-theme-toggle>
<i class="fa-solid fa-sun theme-toggle-sun nav-icon" aria-hidden="true"></i>
<i class="fa-solid fa-moon theme-toggle-moon nav-icon" aria-hidden="true"></i>
</button>
</div>
</div>
</nav>
</header>
@@ -98,7 +104,7 @@ const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/</g, '\\u003c
<p>{siteConfig.site.domain} | {siteConfig.site.license}</p>
</div>
<div class="footer-meta">
<p>本站已苟活：<span id="site-runtime">计算中...</span></p>
<p>本站已运行：<span id="site-runtime">计算中...</span></p>
<p>
{siteConfig.footer.poweredBy.map((item, index) => (
<>
@@ -118,6 +124,31 @@ const publicConfigJson = JSON.stringify(publicSiteConfig).replace(/</g, '\\u003c
<script is:inline src="/js/search/typesense-search.js"></script>
<script is:inline src="/js/external-links.js"></script>
<script is:inline>
(() => {
const nav = document.querySelector('.nav');
const toggle = document.querySelector('[data-nav-toggle]');
const menu = document.querySelector('[data-nav-menu]');
if (!nav || !toggle || !menu) return;
function setMenu(open) {
nav.classList.toggle('is-open', open);
toggle.setAttribute('aria-expanded', String(open));
toggle.setAttribute('aria-label', open ? '关闭菜单' : '打开菜单');
}
toggle.addEventListener('click', () => {
setMenu(!nav.classList.contains('is-open'));
});
menu.addEventListener('click', (event) => {
if (event.target instanceof Element && event.target.closest('a')) setMenu(false);
});
window.addEventListener('resize', () => {
if (window.innerWidth > 720) setMenu(false);
});
})();
(() => {
const storageKey = 'site-theme';
const root = document.documentElement;