导航栏、公告与页脚配置指南#

这三个地方属于“访客一眼就能看到”的区域，所以非常值得优先改。

你可以把它们理解成：

导航栏：站点入口
公告栏：站点提示
页脚：站点收尾信息

导航栏改哪里#

菜单链接配置文件#

1
src/config/navBarConfig.ts

标题、Logo 等基础设置#

1
src/config/siteConfig.ts

修改导航菜单#

当前项目的导航菜单列表在：

1
const links = [
2
  {
3
    name: "首页",
4
    url: "/",
5
  },
6
  {
7
    name: "关于",
8
    url: "/about/",
9
  },
10
]

常见能改的内容#

菜单名称
菜单地址
是否外链
菜单图标

外链示例#

1
{
2
  name: "GitHub",
3
  url: "https://github.com/coldairboys",
4
  external: true,
5
  icon: "fa7-brands:github",
6
}

导航栏标题和 Logo 改哪里#

在 src/config/siteConfig.ts：

1
navbar: {
2
  logo: {
3
    type: "icon",
4
    value: "material-symbols:auto-awesome-outline",
5
    alt: "Logo",
6
  },
7
  title: "Coldairboy学习笔记",
8
}

Logo 支持什么类型#

有 3 种：

icon：图标库图标
image：本地图片
url：网络图片

用图标最简单#

1
logo: {
2
  type: "icon",
3
  value: "material-symbols:home-outline-rounded",
4
}

用本地图片示例#

1
logo: {
2
  type: "image",
3
  value: "src/assets/images/avatar.avif",
4
  alt: "Coldairboy Logo",
5
}

公告栏改哪里#

配置文件：

1
src/config/announcementConfig.ts

最常见配置#

1
export const announcementConfig = {
2
  title: "公告",
3
  content: "Hi，欢迎来到 Coldairboy学习笔记。",
4
  closable: true,
5
  link: {
6
    enable: true,
7
    text: "了解更多",
8
    url: "/about/",
9
    external: false,
10
  },
11
}

你最常改的就是这几个#

title
content
closable
link.text
link.url

如果不想显示链接#

1
link: {
2
  enable: false,
3
}

如果想做外链公告#

1
link: {
2
  enable: true,
3
  text: "访问 GitHub",
4
  url: "https://github.com/coldairboys",
5
  external: true,
6
}

页脚改哪里#

基础开关文件#

1
src/config/footerConfig.ts

自定义 HTML 文件#

1
src/config/FooterConfig.html

默认情况下页脚 HTML 注入是关闭的：

1
export const footerConfig = {
2
  enable: false,
3
}

如果你想加备案号、自定义说明、额外链接，就改成：

1
export const footerConfig = {
2
  enable: true,
3
}

然后再去编辑：

1
src/config/FooterConfig.html

一个简单示例#

1
<p>这里是 Coldairboy 的个人博客</p>
2
<p>记录学习、折腾和踩坑过程</p>

新手最推荐的修改顺序#

建议按这个顺序来：

先改导航栏标题和菜单
再改公告内容
最后按需开启页脚自定义

这样最不容易乱。

常见问题#

Q: 我改了导航栏，但没生效？#

先检查：

改的是不是 src/config/navBarConfig.ts
标题相关是不是改到了 src/config/siteConfig.ts
本地页面有没有刷新

Q: 公告为什么没显示？#

可能原因：

公告内容为空
公告组件在侧边栏配置里被关了
页面还没刷新

Q: 页脚 HTML 改了没变化？#

通常是因为：

footerConfig.enable 还是 false
你改错文件了
本地缓存没刷新

最后总结#

如果你想让博客更像你自己的站，最应该优先改的就是：

导航栏
公告栏
页脚

因为这三块最容易被访客注意到，而且改完后整个站的“个人味道”会明显强很多。

音乐

音乐

导航栏、公告与页脚配置指南#

导航栏改哪里#

菜单链接配置文件#

标题、Logo 等基础设置#

修改导航菜单#

常见能改的内容#

外链示例#

导航栏标题和 Logo 改哪里#

Logo 支持什么类型#

用图标最简单#

用本地图片示例#

公告栏改哪里#

最常见配置#

你最常改的就是这几个#

如果不想显示链接#

如果想做外链公告#

页脚改哪里#

基础开关文件#

自定义 HTML 文件#

一个简单示例#

新手最推荐的修改顺序#

常见问题#

Q: 我改了导航栏，但没生效？#

Q: 公告为什么没显示？#

Q: 页脚 HTML 改了没变化？#

最后总结#

支持与分享

评论区

音乐

目录

音乐

音乐

10. 导航栏、公告与页脚配置指南

导航栏、公告与页脚配置指南#

导航栏改哪里#

菜单链接配置文件#

标题、Logo 等基础设置#

修改导航菜单#

常见能改的内容#

外链示例#

导航栏标题和 Logo 改哪里#

Logo 支持什么类型#

用图标最简单#

用本地图片示例#

公告栏改哪里#

最常见配置#

你最常改的就是这几个#

如果不想显示链接#

如果想做外链公告#

页脚改哪里#

基础开关文件#

自定义 HTML 文件#

一个简单示例#

新手最推荐的修改顺序#

常见问题#

Q: 我改了导航栏，但没生效？#

Q: 公告为什么没显示？#

Q: 页脚 HTML 改了没变化？#

最后总结#

支持与分享

评论区

音乐

目录