博客导航栏模块完整构建方案

1
import {
2
  LinkPreset,
3
  type NavBarConfig,
4
  type NavBarLink,
5
  type NavBarSearchConfig,
6
  NavBarSearchMethod,
7
} from "../types/config";
8
import { siteConfig } from "./siteConfig";
9

10
const getDynamicNavBarConfig = (): NavBarConfig => {
11
  const links: (NavBarLink | LinkPreset)[] = [
12
    LinkPreset.Home,
13
    {
14
      name: "分类",
15
      url: "/categories/",
16
      icon: "material-symbols:folder-open",
17
    },
18
    LinkPreset.Archive,
19
    {
20
      name: "网站导航",
21
      url: "/projects/",
22
      icon: "material-symbols:public",
23
    },
24
  ];
25

26
  // 动态（带下拉子菜单）
27
  links.push({
28
    name: "动态",
29
    url: "/moments/",
30
    icon: "material-symbols:local-cafe",
31
    children: [
32
      {
33
        name: "说说",
34
        url: "/moments/",
35
        icon: "material-symbols:chat-bubble-outline",
36
      },
37
      {
38
        name: "相册",
39
        url: "/album/",
40
        icon: "material-symbols:photo-album-outline",
41
      },
42
      {
43
        name: "留言板",
44
        url: "/guestbook/",
45
        icon: "material-symbols:edit-outline",
46
      },
47
    ],
48
  });
49

50
  // 记录入口 - 根据页面开关动态生成子菜单
51
  const recordChildren: (NavBarLink | LinkPreset)[] = [];
52
  if (siteConfig.pages.books) recordChildren.push(LinkPreset.Books);
53
  if (siteConfig.pages.moviesGames) recordChildren.push(LinkPreset.MoviesGames);
54
  if (siteConfig.pages.musicPage) recordChildren.push(LinkPreset.MusicPage);
55
  if (siteConfig.pages.changelog) recordChildren.push(LinkPreset.Changelog);
56
  recordChildren.push({
57
    name: "规划",
58
    url: "/life/routines/",
59
    icon: "material-symbols:list-alt",
60
  });
61
  recordChildren.push({
62
    name: "足迹",
63
    url: "/life/places/",
64
    icon: "material-symbols:location-on",
65
  });
66

67
  if (recordChildren.length > 0) {
68
    links.push({
69
      name: "记录",
70
      url: "/books/",
71
      icon: "material-symbols:camera-outdoor",
72
      children: recordChildren,
73
    });
74
  }
75

76
  // 关于及其子菜单
77
  links.push({
78
    name: "关于",
79
    url: "/about/",
80
    icon: "material-symbols:info",
81
    children: [
82
      LinkPreset.About,
83
      LinkPreset.Friends,
84
      ...(siteConfig.pages.sponsor ? [LinkPreset.Sponsor] : []),
85
    ],
86
  });
87

88
  return { links } as NavBarConfig;
89
};
90

91
export const navBarSearchConfig: NavBarSearchConfig = {
92
  method: NavBarSearchMethod.PageFind,
93
};
94

95
export const navBarConfig: NavBarConfig = getDynamicNavBarConfig();

1
Navbar.astro                      ← 主容器
2
├── Logo区域 (a标签)
3
│   ├── Icon (icon类型)
4
│   ├── Picture/Image (image/url类型)
5
│   └── 标题文字
6
├── 桌面端导航链接列表 (.hidden.lg:flex)
7
│   └── DropdownMenu.astro × N   ← 每个链接一个
8
│       ├── 有子菜单 → button + DropdownPanel → DropdownItem
9
│       └── 无子菜单 → a标签
10
├── 右侧工具栏 (.flex.items-center)
11
│   ├── Search.svelte            ← 搜索组件
12
│   ├── 音乐按钮 (条件渲染)
13
│   ├── 显示设置按钮 (条件渲染)
14
│   ├── LightDarkSwitch.svelte   ← 亮暗切换
15
│   └── 汉堡菜单按钮 (移动端) .lg:hidden
16
├── 音乐播放面板 (浮动)
17
│   └── MusicPlayer.astro
18
├── NavMenuPanel.astro           ← 移动端侧滑菜单
19
└── DisplaySettingsIntegrated.svelte ← 显示设置面板

1
---
2
import { Picture } from "astro:assets";
3
import * as path from "node:path";
4
import type { ImageMetadata } from "astro";
5
import { Icon } from "astro-icon/components";
6
import DisplaySettings from "@/components/controls/DisplaySettingsIntegrated.svelte";
7
import LightDarkSwitch from "@/components/controls/LightDarkSwitch.svelte";
8
import Search from "@/components/controls/Search.svelte";
9
import MusicPlayer from "@/components/features/MusicPlayer.astro";
10
import { backgroundWallpaper, navBarConfig, siteConfig } from "@/config";
11
import { musicPlayerConfig } from "@/config/musicConfig";
12
import { LinkPresets } from "@/constants/link-presets";
13
import I18nKey from "@/i18n/i18nKey";
14
import { i18n } from "@/i18n/translation";
15
import { LinkPreset, type NavBarLink } from "@/types/config";
16
import { getFallbackFormat, getImageFormats } from "@/utils/image-utils";
17
import { isHomePage } from "@/utils/layout-utils";
18
import { url } from "@/utils/url-utils";
19
import DropdownMenu from "./DropdownMenu.astro";
20
import NavMenuPanel from "./NavMenuPanel.astro";
21

22
const className = Astro.props.class;
23

24
// 获取导航栏透明模式配置
25
const navbarTransparentMode =
26
  backgroundWallpaper.mode === "banner"
27
    ? backgroundWallpaper.banner?.navbar?.transparentMode || "semi"
28
    : "semi";
29

30
// 获取毛玻璃效果配置
31
const navbarEnableBlur =
32
  backgroundWallpaper.mode === "banner"
33
    ? (backgroundWallpaper.banner?.navbar?.enableBlur ?? true)
34
    : false;
35

36
const navbarBlur =
37
  backgroundWallpaper.mode === "banner"
38
    ? (backgroundWallpaper.banner?.navbar?.blur ?? 20)
39
    : 0;
40

41
const navbarTitle = siteConfig.navbar.title || siteConfig.title;
42
const navbarWidthFull = siteConfig.navbar.widthFull ?? false;
43
const isHomePageCheck = isHomePage(Astro.url.pathname);
44

45
// 显示设置可用性判断
46
const showThemeColor = !siteConfig.themeColor.fixed;
47
const isWallpaperSwitchable = backgroundWallpaper.switchable ?? true;
48
const allowLayoutSwitch = siteConfig.postListLayout.allowSwitch;
49
const hasDisplaySettings =
50
  showThemeColor || isWallpaperSwitchable || allowLayoutSwitch;
51

52
// 将预设链接解析为真实链接
53
let links: NavBarLink[] = navBarConfig.links.map(
54
  (item: NavBarLink | LinkPreset): NavBarLink => {
55
    if (typeof item === "number") {
56
      return LinkPresets[item];
57
    }
58
    return item;
59
  },
60
);
61

62
// 智能处理Logo：区分src目录图片（Astro优化）和public/远程图片
63
const logoValue = siteConfig.navbar.logo?.value || "";
64
const isLocalSrcLogo =
65
  siteConfig.navbar.logo?.type === "image" &&
66
  logoValue &&
67
  !logoValue.startsWith("/") &&
68
  !logoValue.startsWith("http");
69
let logoImg: ImageMetadata | null = null;
70

71
if (isLocalSrcLogo) {
72
  const files = import.meta.glob<ImageMetadata>(
73
    "../../**/*.{png,jpg,jpeg,webp,avif,gif,svg}",
74
    { import: "default" },
75
  );
76
  const normalizedPath = path
77
    .normalize(path.join("../../", logoValue))
78
    .replace(/\\/g, "/");
79
  const file = files[normalizedPath];
80
  if (file) {
81
    logoImg = await file();
82
  }
83
}
84
---
85

86
<div id="navbar" class="z-50"
87
     style={`--navbar-glass-blur: ${navbarBlur}px;`}
88
     data-transparent-mode={navbarTransparentMode}
89
     data-enable-blur={String(navbarEnableBlur)}
90
     data-is-home={isHomePageCheck}
91
     data-full-width={navbarWidthFull}>
92

93
  <div class:list={[
94
    className,
95
    "overflow-visible! h-18 mx-auto flex items-center px-4",
96
    navbarWidthFull ? "" : "justify-between max-w-(--page-width)"
97
  ]}>
98

99
    <!-- ========== Logo + 标题 ========== -->
100
    <a href={url('/')}
101
       class="btn-plain scale-animation rounded-lg h-13 px-5 font-bold active:scale-95 navbar-logo-link">
102
      <div class:list={[
103
        "flex flex-row items-center text-md navbar-logo-content",
104
        siteConfig.navbar.followTheme ? "text-(--primary)" : "dark:text-white text-black"
105
      ]}>
106
        {siteConfig.navbar.logo?.type === "icon" ? (
107
          <Icon name={siteConfig.navbar.logo.value || "material-symbols:home-pin-outline"}
108
                class="text-[1.75rem] mb-1 mr-2 navbar-logo-icon" />
109
        ) : siteConfig.navbar.logo?.type === "image" && logoImg ? (
110
          <Picture src={logoImg} alt={siteConfig.navbar.logo.alt || siteConfig.title}
111
                   class="h-7 w-7 mb-1 mr-2 object-contain navbar-logo-img"
112
                   formats={getImageFormats()}
113
                   fallbackFormat={getFallbackFormat()}
114
                   widths={[28, 56]} loading="eager" fetchpriority="high" />
115
        ) : siteConfig.navbar.logo?.type === "image" ? (
116
          <img src={url(siteConfig.navbar.logo.value)}
117
               alt={siteConfig.navbar.logo.alt || siteConfig.title}
118
               class="h-7 w-7 mb-1 mr-2 object-contain navbar-logo-img"
119
               fetchpriority="high" />
120
        ) : siteConfig.navbar.logo?.type === "url" ? (
121
          <img src={siteConfig.navbar.logo.value}
122
               alt={siteConfig.navbar.logo.alt || siteConfig.title}
123
               class="h-7 w-7 mb-1 mr-2 object-contain navbar-logo-img"
124
               fetchpriority="high" />
125
        ) : (
126
          <Icon name="material-symbols:home-pin-outline"
127
                class="text-[1.75rem] mb-1 mr-2 navbar-logo-icon" />
128
        )}
129
        <span class="navbar-logo-text">{navbarTitle}</span>
130
      </div>
131
    </a>
132

133
    <!-- ========== 桌面端导航链接 ========== -->
134
    <div class="hidden lg:flex items-center space-x-1">
135
      {links.map((l) => {
136
        return <DropdownMenu link={l} />;
137
      })}
138
    </div>
139

140
    <!-- ========== 右侧工具栏 ========== -->
141
    <div class:list={["flex items-center", navbarWidthFull ? "ml-auto" : ""]}>
142
      <!-- 搜索 -->
143
      <Search client:load />
144
      <!-- 音乐播放器开关 -->
145
      {musicPlayerConfig.showInNavbar && (
146
        <button id="music-player-switch"
147
                class="btn-plain rounded-lg h-11 w-11 navbar-icon-btn active:scale-90">
148
          <Icon name="material-symbols:music-note-rounded" class="text-[1.25rem]" />
149
        </button>
150
      )}
151
      <!-- 显示设置开关 -->
152
      {hasDisplaySettings && (
153
        <button id="display-settings-switch"
154
                class="btn-plain rounded-lg h-11 w-11 navbar-icon-btn active:scale-90">
155
          <Icon name="material-symbols:palette-outline" class="text-[1.25rem]" />
156
        </button>
157
      )}
158
      <!-- 亮暗切换 -->
159
      <LightDarkSwitch client:load />
160
      <!-- 汉堡菜单 (移动端) -->
161
      <button id="nav-menu-switch"
162
              class="btn-plain rounded-lg w-11 h-11 lg:hidden! nav-hamburger-btn">
163
        <Icon name="material-symbols:menu-rounded" class="text-[1.5rem] hamburger-icon-menu" />
164
        <Icon name="material-symbols:close-rounded"
165
              class="text-[1.5rem] hamburger-icon-close hidden" />
166
      </button>
167
    </div>
168

169
    <!-- 音乐面板（浮动） -->
170
    {musicPlayerConfig.showInNavbar && (
171
      <div id="music-nav-panel"
172
           class="float-panel float-panel-closed absolute transition-all right-16 p-2 pt-4.5 w-80 z-50">
173
        <MusicPlayer />
174
      </div>
175
    )}
176

177
    <!-- 移动端菜单面板 -->
178
    <NavMenuPanel links={links} siteTitle={navbarTitle} />
179

180
    <!-- 显示设置面板 -->
181
    <DisplaySettings client:load />
182
  </div>
183
</div>

1
---
2
import { Icon } from "astro-icon/components";
3
import DropdownItem from "@/components/common/DropdownItem.astro";
4
import DropdownPanel from "@/components/common/DropdownPanel.astro";
5
import { LinkPresets } from "@/constants/link-presets";
6
import { LinkPreset, type NavBarLink } from "@/types/config";
7
import { url } from "@/utils/url-utils";
8

9
interface Props {
10
  link: NavBarLink;
11
  class?: string;
12
}
13

14
const { link, class: className } = Astro.props;
15

16
if (!link) return null;
17

18
// 将子菜单中的 LinkPreset 枚举转为真实的 NavBarLink 对象
19
const processedLink = {
20
  ...link,
21
  children: link.children
22
    ?.map((child: NavBarLink | LinkPreset): NavBarLink | null => {
23
      if (typeof child === "number") {
24
        if (child in LinkPresets) return LinkPresets[child as LinkPreset];
25
        return null;
26
      }
27
      return child;
28
    })
29
    .filter((child): child is NavBarLink => child !== null),
30
};
31

32
const hasChildren = processedLink.children && processedLink.children.length > 0;
33
---
34

35
<div class:list={["dropdown-container", className]} data-dropdown>
36
  {hasChildren ? (
37
    <>
38
      <!-- 有子菜单：渲染为 button，点击展开下拉 -->
39
      <button
40
        class="btn-plain scale-animation rounded-lg h-11 font-bold px-5
41
               active:scale-95 dropdown-trigger-link navbar-link-item"
42
        data-dropdown-trigger
43
        aria-haspopup="true"
44
        aria-expanded="false"
45
      >
46
        <div class="flex items-center">
47
          {processedLink.icon && (
48
            <Icon name={processedLink.icon} class="text-[1.1rem] mr-2 navbar-icon" />
49
          )}
50
          <span class="navbar-link-text">{processedLink.name}</span>
51
          <Icon name="material-symbols:keyboard-arrow-down-rounded"
52
                class="text-[1.25rem] transition-transform duration-200 dropdown-arrow ml-1" />
53
        </div>
54
      </button>
55
      <!-- 下拉面板 -->
56
      <div class="dropdown-menu" data-dropdown-menu>
57
        <DropdownPanel class="dropdown-content">
58
          {processedLink.children?.map((child, index) => (
59
            <DropdownItem
60
              href={child.external ? child.url : url(child.url)}
61
              target={child.external ? "_blank" : undefined}
62
              isLast={index === (processedLink.children?.length || 0) - 1}
63
              class="dropdown-item"
64
            >
65
              {child.icon && (
66
                <Icon name={child.icon} class="text-[1.25rem] mr-3 navbar-icon" />
67
              )}
68
              <span>{child.name}</span>
69
              {child.external && (
70
                <Icon name="fa7-solid:arrow-up-right-from-square"
71
                      class="text-[0.75rem] text-black/25 dark:text-white/25 ml-auto" />
72
              )}
73
            </DropdownItem>
74
          ))}
75
        </DropdownPanel>
76
      </div>
77
    </>
78
  ) : (
79
    <!-- 无子菜单：渲染为普通链接 -->
80
    <a
81
      href={processedLink.external ? processedLink.url : url(processedLink.url)}
82
      target={processedLink.external ? "_blank" : null}
83
      class="btn-plain scale-animation rounded-lg h-11 font-bold px-5
84
             active:scale-95 navbar-link-item"
85
    >
86
      <div class="flex items-center">
87
        {processedLink.icon && (
88
          <Icon name={processedLink.icon} class="text-[1.1rem] mr-2 navbar-icon" />
89
        )}
90
        <span class="navbar-link-text">{processedLink.name}</span>
91
        {processedLink.external && (
92
          <Icon name="fa7-solid:arrow-up-right-from-square"
93
                class="text-[0.875rem] -translate-y-px ml-1 text-black/20 dark:text-white/20" />
94
        )}
95
      </div>
96
    </a>
97
  )}
98
</div>

1
(function() {
2
  function initDesktopDropdowns() {
3
    var dropdowns = document.querySelectorAll('[data-dropdown]');
4

5
    dropdowns.forEach(function(dropdown) {
6
      var trigger = dropdown.querySelector('[data-dropdown-trigger]');
7
      var menu = dropdown.querySelector('[data-dropdown-menu]');
8
      if (!trigger || !menu) return;
9

10
      // 克隆节点清除旧事件监听器
11
      var newTrigger = trigger.cloneNode(true);
12
      trigger.parentNode && trigger.parentNode.replaceChild(newTrigger, trigger);
13

14
      // 点击切换下拉
15
      newTrigger.addEventListener('click', function(e) {
16
        e.preventDefault();
17
        e.stopPropagation();
18
        dropdown.classList.toggle('dropdown-open');
19
        var isOpen = dropdown.classList.contains('dropdown-open');
20
        newTrigger.setAttribute('aria-expanded', String(isOpen));
21
      });
22

23
      // 键盘导航：ArrowDown 展开，Escape 关闭
24
      newTrigger.addEventListener('keydown', function(e) {
25
        if (e.key === 'ArrowDown') {
26
          e.preventDefault();
27
          dropdown.classList.add('dropdown-open');
28
          newTrigger.setAttribute('aria-expanded', 'true');
29
          var firstItem = menu.querySelector('.dropdown-item');
30
          if (firstItem) firstItem.focus();
31
        } else if (e.key === 'Escape') {
32
          dropdown.classList.remove('dropdown-open');
33
          newTrigger.setAttribute('aria-expanded', 'false');
34
          newTrigger.focus();
35
        }
36
      });
37
    });
38

39
    // 点击外部关闭所有下拉
40
    document.addEventListener('click', function(e) {
41
      dropdowns.forEach(function(dropdown) {
42
        if (!dropdown.contains(e.target)) {
43
          dropdown.classList.remove('dropdown-open');
44
          var trigger = dropdown.querySelector('[data-dropdown-trigger]');
45
          if (trigger) trigger.setAttribute('aria-expanded', 'false');
46
        }
47
      });
48
    });
49

50
    // Escape 关闭所有
51
    document.addEventListener('keydown', function(e) {
52
      if (e.key === 'Escape') {
53
        dropdowns.forEach(function(dropdown) {
54
          dropdown.classList.remove('dropdown-open');
55
          var trigger = dropdown.querySelector('[data-dropdown-trigger]');
56
          if (trigger) { trigger.setAttribute('aria-expanded', 'false'); trigger.focus(); }
57
        });
58
      });
59
    });
60
  }
61

62
  // 首次加载 + Swup 导航后重新初始化
63
  if (document.readyState === 'loading') {
64
    document.addEventListener('DOMContentLoaded', initDesktopDropdowns);
65
  } else {
66
    initDesktopDropdowns();
67
  }
68
  document.addEventListener('swup:contentReplaced', initDesktopDropdowns);
69
})();

1
.dropdown-menu {
2
  @apply absolute top-full left-0 pt-2 opacity-0 invisible pointer-events-none
3
         transition-all duration-200 ease-out transform translate-y-[-8px] z-50;
4
}
5

6
/* 悬停或激活时显示 */
7
.dropdown-container:hover .dropdown-menu,
8
.dropdown-container:focus-within .dropdown-menu,
9
.dropdown-container.dropdown-open .dropdown-menu {
10
  @apply opacity-100 visible pointer-events-auto translate-y-0;
11
}
12

13
/* 箭头旋转动画 */
14
.dropdown-container:hover .dropdown-arrow,
15
.dropdown-container.dropdown-open .dropdown-arrow {
16
  @apply rotate-180;
17
}

1
<!-- 遮罩层 -->
2
<div id="nav-menu-overlay" class="menu-overlay"></div>
3

4
<!-- 侧滑面板 -->
5
<div id="nav-menu-panel" class="menu-panel" data-menu-open="false"
6
     role="dialog" aria-modal="true" aria-hidden="true">
7

8
  <!-- Profile Card: 头像、昵称、简介、统计数据、CTA按钮、社交链接 -->
9
  <div class="menu-profile">
10
    <a href="/about/" class="group relative block w-20 h-20 mb-3
11
       rounded-full overflow-hidden border-2 border-white dark:border-neutral-700">
12
      <ImageWrapper src={profileConfig.avatar} alt="Profile Image"
13
                    class="w-full h-full object-cover"
14
                    loading="eager" fetchpriority="high" />
15
    </a>
16
    <div class="text-center">
17
      <div class="font-bold text-lg">{profileConfig.name}</div>
18
      <div class="text-xs text-neutral-500">{profileConfig.bio}</div>
19
    </div>
20
    <!-- 统计数据：文章数、标签数、动态数 -->
21
    <div class="flex w-full justify-around py-3 border-y">
22
      {stats.map(stat => (
23
        <div class="flex flex-col items-center">
24
          <span class="text-[10px]">{stat.label}</span>
25
          <span class="text-base font-bold">{stat.count}</span>
26
        </div>
27
      ))}
28
    </div>
29
    <!-- CTA 按钮和社交图标 -->
30
    ...
31
  </div>
32

33
  <!-- 导航链接 -->
34
  <nav class="menu-nav">
35
    {processedLinks.map((link) => (
36
      <div>
37
        {link.children?.length > 0 ? (
38
          <!-- 有子菜单：可折叠展开 -->
39
          <div class="menu-dropdown" data-mobile-dropdown>
40
            <button class="menu-link" data-mobile-dropdown-trigger>
41
              {link.icon && <Icon name={link.icon} class="menu-link-icon" />}
42
              <span class="menu-link-text">{link.name}</span>
43
              <Icon name="material-symbols:chevron-right-rounded" class="menu-arrow" />
44
            </button>
45
            <div class="menu-submenu" data-mobile-submenu>
46
              {link.children.map((child) => (
47
                <a href={child.url} class="menu-sublink">
48
                  {child.icon && <Icon name={child.icon} class="menu-link-icon sub-icon" />}
49
                  <span>{child.name}</span>
50
                </a>
51
              ))}
52
            </div>
53
          </div>
54
        ) : (
55
          <!-- 无子菜单：直接链接 -->
56
          <a href={link.url} class="menu-link">
57
            {link.icon && <Icon name={link.icon} class="menu-link-icon" />}
58
            <span class="menu-link-text">{link.name}</span>
59
          </a>
60
        )}
61
      </div>
62
    ))}
63
  </nav>
64
</div>

1
// 打开菜单：显示遮罩、侧滑面板、锁定body滚动
2
function openMenu() {
3
  ensureMenuPortal(); // 确保面板挂载到body下（避免被overflow裁剪）
4
  resetDropdowns();
5
  panel.setAttribute("data-menu-open", "true");
6
  overlay.classList.add("active");
7
  btn.classList.add("hamburger-open");
8
  document.body.style.overflow = "hidden";
9
}
10

11
// 关闭菜单：恢复所有状态
12
function closeMenu() {
13
  panel.setAttribute("data-menu-open", "false");
14
  overlay.classList.remove("active");
15
  btn.classList.remove("hamburger-open");
16
  document.body.style.overflow = "";
17
  resetDropdowns();
18
}
19

20
// 注册事件：astro:page-load + swup:page:view
21
document.addEventListener("astro:page-load", init);
22
document.addEventListener("swup:contentReplaced", onPageTransition);

1
.menu-panel {
2
  position: fixed; top: 0; right: 0; bottom: 0;
3
  width: min(82vw, 20rem);
4
  height: 100dvh;
5
  background: var(--card-bg);
6
  transform: translate3d(100%, 0, 0);        /* 初始在屏幕外 */
7
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
8
}
9
.menu-panel[data-menu-open="true"] {
10
  transform: translate3d(0, 0, 0);           /* 滑入 */
11
}
12

13
/* 子菜单折叠动画 */
14
.menu-submenu {
15
  max-height: 0; overflow: hidden;
16
  transition: max-height 0.25s ease;
17
}
18
.menu-dropdown[data-expanded="true"] .menu-submenu {
19
  max-height: 20rem;
20
}
21
.menu-dropdown[data-expanded="true"] .menu-arrow {
22
  transform: rotate(90deg);                  /* 箭头旋转 */
23
}