导航栏模块升级与新增功能

目录#

一、概述
二、五层架构总览
三、改进一：分类独立页面
四、改进二：hoverTitle 标题变化
五、改进三：下拉菜单点击触发
六、改进四：Guestbook 入口统一
七、改进五：LinkPreset 枚举扩展
八、导航栏最终结构
九、文件变更清单

一、概述#

本次对博客导航栏模块进行了五项核心改进，对标参考博客 blog.tsh520.cn 的导航栏实现，全面提升导航栏的功能性和用户体验：

改进项	说明	优先级
分类独立页面	新增 `/categories/` 页面，与归档分离	高
hoverTitle	鼠标悬停 Logo 时标题变化为趣味文字	中
点击触发下拉	桌面端下拉菜单从 hover 改为 click	中
Guestbook 统一	移除重复顶级入口，仅保留在子菜单	低
枚举扩展	LinkPreset 新增 Categories/Books 等	低

二、五层架构总览#

导航栏系统由五层架构组成：

1
类型层 (config.ts)          → 定义 TypeScript 类型和枚举
2
  ↓
3
配置层 (navBarConfig.ts)    → 动态生成导航链接
4
  ↓
5
常量层 (link-presets.ts)    → 预设链接映射
6
  ↓
7
组件层 (Navbar.astro 等)    → 渲染 UI 组件
8
  ↓
9
样式层 (navbar.css / main.css) → 视觉呈现

三、改进一：分类独立页面#

3.1 背景#

原项目只有归档页面（/archive/），分类信息通过 CategoryBar 横向滚动条展示。新增独立分类页面，提供更直观的分类浏览体验。

3.2 新增页面 `src/pages/categories.astro`#

1
---
2
import I18nKey from "@i18n/i18nKey";
3
import { i18n } from "@i18n/translation";
4
import { Icon } from "astro-icon/components";
5
import MainGridLayout from "@layouts/MainGridLayout.astro";
6
import { getCategoryList } from "@/utils/content-utils";
7

8
const categories = await getCategoryList();
9
const totalCategories = categories.length;
10
const totalPosts = categories.reduce((sum, cat) => sum + cat.count, 0);
11
---
12

13
<MainGridLayout title={i18n(I18nKey.categories)}>
14
    <div class="card-base p-6 md:p-8 onload-animation">
15
        <!-- 标题区域 -->
16
        <div class="flex items-center gap-3 mb-6">
17
            <div class="flex items-center justify-center w-12 h-12
18
                        rounded-xl bg-(--primary) text-white">
19
                <Icon name="material-symbols:folder-open" class="text-[1.5rem]" />
20
            </div>
21
            <div>
22
                <h1 class="text-2xl font-bold text-black/90 dark:text-white/90">
23
                    {i18n(I18nKey.categories)}
24
                </h1>
25
                <p class="text-sm text-black/50 dark:text-white/50">
26
                    共 {totalCategories} 个分类，{totalPosts} 篇文章
27
                </p>
28
            </div>
29
        </div>
30

31
        <!-- 分类网格 -->
32
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
33
            {categories.map((cat) => (
34
                <a
35
                    href={`/archive/?category=${encodeURIComponent(cat.name)}`}
36
                    class="group card-base p-4 transition-all duration-200
37
                           hover:translate-y-[-2px] hover:shadow-lg"
38
                >
39
                    <div class="flex items-center gap-3">
40
                        <div class="flex items-center justify-center w-10 h-10
41
                                    rounded-lg bg-(--primary)/10 text-(--primary)
42
                                    group-hover:bg-(--primary) group-hover:text-white
43
                                    transition-all duration-200">
44
                            <Icon name="material-symbols:folder" class="text-[1.25rem]" />
45
                        </div>
46
                        <div class="flex-1 min-w-0">
47
                            <h3 class="font-bold text-black/80 dark:text-white/80
48
                                       truncate group-hover:text-(--primary) transition-colors">
49
                                {cat.name}
50
                            </h3>
51
                            <p class="text-xs text-black/40 dark:text-white/40">
52
                                {cat.count} 篇文章
53
                            </p>
54
                        </div>
55
                        <Icon
56
                            name="material-symbols:chevron-right-rounded"
57
                            class="text-lg text-black/20 dark:text-white/20
58
                                   group-hover:text-(--primary) transition-all
59
                                   group-hover:translate-x-1"
60
                        />
61
                    </div>
62
                </a>
63
            ))}
64
        </div>
65
    </div>
66
</MainGridLayout>

3.3 数据获取#

分类数据通过 src/utils/content-utils.ts 中的 getCategoryList() 获取：

1
export type Category = {
2
    name: string;
3
    count: number;
4
    url: string;
5
};
6

7
export async function getCategoryList(): Promise<Category[]> {
8
    const allBlogPosts = await getCollection<"posts">("posts", ({ data }) => {
9
        return import.meta.env.PROD ? data.draft !== true : true;
10
    });
11
    // ... 按分类统计文章数量并排序
12
}

3.4 导航栏入口#

在 src/config/navBarConfig.ts 中添加分类链接：

1
const links: (NavBarLink | LinkPreset)[] = [
2
    LinkPreset.Home,
3
    LinkPreset.Categories,   // ← 新增
4
    LinkPreset.Archive,
5
    // ...
6
];

四、改进二：hoverTitle 标题变化#

4.1 功能说明#

鼠标悬停在导航栏 Logo 区域时，标题从正常文字变为趣味文字，鼠标移开后恢复。参考博客使用此功能增加趣味交互。

4.2 类型定义#

在 src/types/config.ts 的 SiteConfig.navbar 中新增 hoverTitle 字段：

1
navbar: {
2
    logo?: {
3
        type: "icon" | "image" | "url";
4
        value: string;
5
        alt?: string;
6
    };
7
    title?: string;
8
    hoverTitle?: string;  // ← 新增：鼠标悬停时显示的标题
9
    widthFull?: boolean;
10
    menuAlign?: "left" | "center";
11
    followTheme?: boolean;
12
    stickyNavbar?: boolean;
13
};

4.3 配置使用#

在 src/config/siteConfig.ts 中设置：

1
navbar: {
2
    logo: {
3
        type: "image",
4
        value: "assets/images/firefly.png",
5
        alt: "🍀",
6
    },
7
    title: "lyf:Blog",
8
    hoverTitle: "👋 别走嘛，再看看！",  // ← 新增
9
    // ...
10
},

4.4 组件实现#

在 src/components/layout/Navbar.astro 中：

模板部分 — 添加 data 属性：

1
<div id="navbar" class="z-50"
2
     data-hover-title={navbarHoverTitle}
3
     ...>
4
    <a href={url('/')} class="btn-plain ... navbar-logo-link"
5
       data-original-title={navbarTitle}>
6
        <!-- Logo + 标题 -->
7
    </a>
8
</div>

脚本部分 — 添加事件监听：

1
function initHoverTitle() {
2
    const navbar = document.getElementById('navbar');
3
    if (!navbar) return;
4
    const hoverTitle = navbar.getAttribute('data-hover-title');
5
    if (!hoverTitle) return;
6

7
    const logoLink = navbar.querySelector('.navbar-logo-link');
8
    if (!logoLink) return;
9

10
    const logoText = logoLink.querySelector('span, div');
11
    if (!logoText) return;
12

13
    logoLink.addEventListener('mouseenter', function() {
14
        const currentText = logoText.textContent;
15
        logoText.setAttribute('data-text', currentText || '');
16
        logoText.textContent = hoverTitle;
17
    });
18

19
    logoLink.addEventListener('mouseleave', function() {
20
        const originalText = logoText.getAttribute('data-text');
21
        if (originalText) {
22
            logoText.textContent = originalText;
23
        }
24
    });
25
}
26

27
initHoverTitle();
28
document.addEventListener('astro:page-load', initHoverTitle);
29
document.addEventListener('swup:contentReplaced', initHoverTitle);

4.5 自定义方法#

修改 hoverTitle 值即可自定义：

1
hoverTitle: "✨ 发现更多精彩内容！",    // 趣味风格
2
hoverTitle: "w(ﾟДﾟ)w 不要走！",         // 惊讶风格
3
hoverTitle: "🎉 欢迎回来！",            // 欢迎风格

五、改进三：下拉菜单点击触发#

5.1 背景#

原实现使用 CSS :hover 触发下拉菜单，存在以下问题：

移动端/触屏设备无法使用
鼠标移出菜单区域时容易误关
与无障碍访问冲突

改为点击触发（.dropdown-open 类切换），与参考博客一致。

5.2 CSS 变更#

src/styles/main.css — 全局样式修改：

1
/* 旧：hover 触发 */
2
.dropdown-container:hover .dropdown-menu,
3
.dropdown-container:focus-within .dropdown-menu {
4
    @apply opacity-100 visible pointer-events-auto translate-y-0;
5
}
6

7
/* 新：click 触发 */
8
.dropdown-container.dropdown-open .dropdown-menu,
9
.dropdown-container:focus-within .dropdown-menu {
10
    @apply opacity-100 visible pointer-events-auto translate-y-0;
11
}

src/components/layout/DropdownMenu.astro — 组件内样式同步修改：

1
/* 新：点击触发 */
2
.dropdown-container.dropdown-open .dropdown-menu {
3
    @apply opacity-100 visible pointer-events-auto translate-y-0;
4
}
5

6
.dropdown-container.dropdown-open .dropdown-arrow {
7
    @apply rotate-180;
8
}

5.3 JavaScript 逻辑#

1
function initDropdowns() {
2
    const dropdowns = document.querySelectorAll('[data-dropdown]');
3

4
    dropdowns.forEach(dropdown => {
5
        const trigger = dropdown.querySelector('[data-dropdown-trigger]');
6
        if (!trigger) return;
7

8
        // 克隆节点清除旧事件监听器
9
        const newTrigger = trigger.cloneNode(true);
10
        trigger.parentNode?.replaceChild(newTrigger, trigger);
11

12
        // 点击触发器 → 切换 .dropdown-open 类
13
        newTrigger.addEventListener('click', function(e) {
14
            e.preventDefault();
15
            e.stopPropagation();
16
            dropdown.classList.toggle('dropdown-open');
17
            const isOpen = dropdown.classList.contains('dropdown-open');
18
            newTrigger.setAttribute('aria-expanded', String(isOpen));
19
        });
20

21
        // Escape 键关闭
22
        newTrigger.addEventListener('keydown', function(e) {
23
            if (e.key === 'Escape') {
24
                dropdown.classList.remove('dropdown-open');
25
                newTrigger.setAttribute('aria-expanded', 'false');
26
                newTrigger.focus();
27
            }
28
        });
29
    });
30
}
31

32
// 点击外部关闭所有下拉菜单
33
document.addEventListener('click', function(e) {
34
    const dropdowns = document.querySelectorAll('[data-dropdown]');
35
    dropdowns.forEach(dropdown => {
36
        if (!dropdown.contains(e.target)) {
37
            dropdown.classList.remove('dropdown-open');
38
        }
39
    });
40
});

5.4 交互行为#

操作	行为
点击有子菜单的导航项	打开下拉菜单
再次点击	关闭下拉菜单
点击页面其他区域	关闭所有下拉菜单
按 Escape 键	关闭所有下拉菜单并聚焦回触发器
点击子菜单项	跳转链接并关闭菜单

六、改进四：Guestbook 入口统一#

6.1 变更说明#

改前：Guestbook 同时作为顶级链接 + “动态”子菜单项出现

1
主页 | 归档 | 网站导航 | 留言板 | 动态(说说/相册/留言板) | ...

改后：仅保留在”动态”子菜单中

1
主页 | 分类 | 归档 | 网站导航 | 动态(说说/相册/留言板) | ...

6.2 代码变更#

在 src/config/navBarConfig.ts 中移除顶级链接：

1
// 根据配置决定是否添加留言板
2
if (siteConfig.pages.guestbook) {
3
    links.push(LinkPreset.Guestbook);
4
}

“动态”子菜单中保持不变：

1
children: [
2
    ...(siteConfig.pages.talks ? [LinkPreset.Talk] : []),
3
    ...(siteConfig.pages.gallery ? [LinkPreset.Gallery] : []),
4
    ...(siteConfig.pages.guestbook ? [LinkPreset.Guestbook] : []),  // 保留
5
],

七、改进五：LinkPreset 枚举扩展#

7.1 变更说明#

为常用页面添加独立的 LinkPreset 枚举值，保持与参考博客一致：

1
export enum LinkPreset {
2
    Home = 0,
3
    Archive = 1,
4
    About = 2,
5
    Friends = 3,
6
    Sponsor = 4,
7
    Guestbook = 5,
8
    Bangumi = 6,
9
    Gallery = 7,
10
    Talk = 8,
11
    Categories = 9,    // ← 新增
12
    Books = 10,         // ← 新增
13
    MoviesGames = 11,   // ← 新增
14
    MusicPage = 12,     // ← 新增
15
    Changelog = 13,     // ← 新增
16
}

7.2 预设映射#

在 src/constants/link-presets.ts 中添加映射：

1
[LinkPreset.Categories]: {
2
    name: i18n(I18nKey.categories),
3
    url: "/categories/",
4
    icon: "material-symbols:folder-open",
5
},
6
[LinkPreset.Books]: {
7
    name: "书架",
8
    url: "/books/",
9
    icon: "material-symbols:book-5",
10
},
11
[LinkPreset.MoviesGames]: {
12
    name: "影视与游戏",
13
    url: "/movies-games/",
14
    icon: "material-symbols:movie",
15
},
16
[LinkPreset.MusicPage]: {
17
    name: i18n(I18nKey.music),
18
    url: "/music/",
19
    icon: "material-symbols:music-note",
20
},
21
[LinkPreset.Changelog]: {
22
    name: "更新日志",
23
    url: "/changelog/",
24
    icon: "material-symbols:history",
25
},

7.3 使用方式#

扩展后的枚举可在 navBarConfig.ts 中直接引用：

1
// 使用预设（推荐）
2
links.push(LinkPreset.Books);
3

4
// 也可继续使用自定义 NavBarLink
5
links.push({
6
    name: "书架",
7
    url: "/books/",
8
    icon: "material-symbols:book-5",
9
});

八、导航栏最终结构#

1
Navbar.astro                      ← 主容器
2
├── Logo 区域 (hoverTitle 支持)
3
│   ├── Icon / Picture / Image
4
│   └── 标题文字 (mouseenter 变化)
5
├── 桌面端导航链接 (.hidden.lg:flex)
6
│   ├── 主页 → /
7
│   ├── 分类 → /categories/        ← 新增
8
│   ├── 归档 → /archive/
9
│   ├── 网站导航 → /projects/
10
│   ├── 动态 (点击触发下拉)        ← 改为 click
11
│   │   ├── 说说
12
│   │   ├── 相册
13
│   │   └── 留言板
14
│   ├── 记录 (点击触发下拉)
15
│   │   ├── 书架
16
│   │   ├── 影视与游戏
17
│   │   ├── 音乐
18
│   │   ├── 更新日志
19
│   │   ├── 规划
20
│   │   └── 足迹
21
│   └── 关于 (点击触发下拉)
22
│       ├── 关于我
23
│       ├── 友链
24
│       └── 赞助
25
├── 右侧工具栏
26
│   ├── 搜索 (Search.svelte)
27
│   ├── 音乐按钮
28
│   ├── 管理后台
29
│   ├── 显示设置
30
│   ├── 亮暗切换
31
│   └── 汉堡菜单 (移动端)
32
├── 移动端侧滑菜单 (NavMenuPanel.astro)
33
└── 显示设置面板

九、文件变更清单#

文件	操作	说明
`src/types/config.ts`	修改	LinkPreset 新增 5 个枚举值 + navbar.hoverTitle 类型
`src/constants/link-presets.ts`	修改	新增 5 个预设映射
`src/config/siteConfig.ts`	修改	新增 hoverTitle 配置
`src/config/navBarConfig.ts`	修改	添加分类链接 + 移除顶级 Guestbook
`src/components/layout/Navbar.astro`	修改	hoverTitle data 属性 + 事件脚本
`src/components/layout/DropdownMenu.astro`	修改	CSS hover→click + 脚本重写
`src/styles/main.css`	修改	全局下拉菜单 CSS 改为 click 触发
`src/pages/categories.astro`	新建	分类独立页面

音乐

音乐

目录#

一、概述#

二、五层架构总览#

三、改进一：分类独立页面#

3.1 背景#

3.2 新增页面 `src/pages/categories.astro`#

3.3 数据获取#

3.4 导航栏入口#

四、改进二：hoverTitle 标题变化#

4.1 功能说明#

4.2 类型定义#

4.3 配置使用#

4.4 组件实现#

4.5 自定义方法#

五、改进三：下拉菜单点击触发#

5.1 背景#

5.2 CSS 变更#

5.3 JavaScript 逻辑#

5.4 交互行为#

六、改进四：Guestbook 入口统一#

6.1 变更说明#

6.2 代码变更#

七、改进五：LinkPreset 枚举扩展#

7.1 变更说明#

7.2 预设映射#

7.3 使用方式#

八、导航栏最终结构#

九、文件变更清单#

支持与分享

评论区

音乐

文章目录

音乐

音乐

导航栏模块升级与新增功能

目录#

一、概述#

二、五层架构总览#

三、改进一：分类独立页面#

3.1 背景#

3.2 新增页面 src/pages/categories.astro#

3.3 数据获取#

3.4 导航栏入口#

四、改进二：hoverTitle 标题变化#

4.1 功能说明#

4.2 类型定义#

4.3 配置使用#

4.4 组件实现#

4.5 自定义方法#

五、改进三：下拉菜单点击触发#

5.1 背景#

5.2 CSS 变更#

5.3 JavaScript 逻辑#

5.4 交互行为#

六、改进四：Guestbook 入口统一#

6.1 变更说明#

6.2 代码变更#

七、改进五：LinkPreset 枚举扩展#

7.1 变更说明#

7.2 预设映射#

7.3 使用方式#

八、导航栏最终结构#

九、文件变更清单#

支持与分享

评论区

音乐

文章目录

3.2 新增页面 `src/pages/categories.astro`#