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
package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "astro-site",
"version": "0.0.0",
"name": "Bi's Blog",
"version": "0.20.0",
"private": true,
"scripts": {
"prebuild": "node scripts/generate-abbrlinks.mjs",
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;
src/styles/site.css
+87 -10
View File
@@ -119,6 +119,35 @@ a {
font-weight: 800;
}
.nav-menu {
display: contents;
}
.nav-menu-toggle {
position: relative;
z-index: 1;
display: none;
width: 40px;
height: 40px;
place-items: center;
border: 1px solid transparent;
border-radius: 999px;
color: var(--muted);
font: inherit;
background: transparent;
cursor: pointer;
transition:
color 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
.nav-menu-close {
display: none;
}
.nav-links {
position: relative;
z-index: 1;
@@ -200,7 +229,8 @@ a {
.nav-links a:hover,
.nav-random:hover,
.nav-search:hover,
.theme-toggle:hover {
.theme-toggle:hover,
.nav-menu-toggle:hover {
border-color: rgba(255, 255, 255, 0.62);
background: rgba(255, 255, 255, 0.38);
box-shadow:
@@ -233,7 +263,8 @@ a {
:root[data-theme='dark'] .nav-links a:hover,
:root[data-theme='dark'] .nav-random:hover,
:root[data-theme='dark'] .nav-search:hover,
:root[data-theme='dark'] .theme-toggle:hover {
:root[data-theme='dark'] .theme-toggle:hover,
:root[data-theme='dark'] .nav-menu-toggle:hover {
border-color: rgba(114, 222, 210, 0.26);
background: rgba(114, 222, 210, 0.12);
box-shadow:
@@ -3022,25 +3053,71 @@ meting-js {
}
.nav {
display: flex;
display: grid;
grid-template-columns: minmax(0, 1fr) 40px;
min-height: auto;
padding: 12px 14px;
align-items: flex-start;
flex-direction: column;
padding: 10px 12px;
align-items: center;
gap: 0 10px;
border-radius: 24px;
}
.nav-menu-toggle {
display: grid;
justify-self: end;
}
.nav.is-open .nav-menu-open,
.nav-menu-close {
display: none;
}
.nav.is-open .nav-menu-close {
display: inline-block;
}
.nav-menu {
display: none;
grid-column: 1 / -1;
gap: 8px;
margin-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.46);
padding-top: 10px;
}
.nav.is-open .nav-menu {
display: grid;
}
.nav-links {
width: 100%;
overflow-x: auto;
gap: 6px;
padding-bottom: 2px;
overflow: visible;
padding-bottom: 0;
}
.nav-menu .nav-links {
display: grid;
}
.nav-center {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nav-actions {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nav-links a,
.nav-random,
.nav-search {
flex: 0 0 auto;
.nav-search,
.theme-toggle {
width: 100%;
justify-content: center;
}
.theme-toggle {
min-height: 38px;
}
.hero {