侧边栏、目录、站点统计与广告位配置指南#

这个项目的侧边栏功能比很多主题都细，能控制：

左右侧栏怎么排
哪些组件显示
哪些组件只在文章页显示
站点统计开不开
广告位放不放

主要配置文件#

1
src/config/sidebarConfig.ts

这是最核心的文件。

侧边栏布局先看这几个参数#

1
export const sidebarLayoutConfig = {
2
  enable: true,
3
  position: "both",
4
  tabletSidebar: "left",
5
  showBothSidebarsOnPostPage: true,
6
}

它们分别是什么意思#

enable：是否启用侧边栏
position：左侧、右侧还是双侧
tabletSidebar：平板显示哪一侧
showBothSidebarsOnPostPage：文章页要不要双侧栏

左右侧栏里的组件怎么控制#

文件里会看到类似这种结构：

1
leftComponents: [
2
  {
3
    type: "profile",
4
    enable: true,
5
    position: "top",
6
    showOnPostPage: true,
7
  },
8
]

你只要先理解 4 个字段就够了：

type：组件类型
enable：开关
position：top 或 sticky
showOnPostPage：文章页显不显示

文章目录怎么开#

文章目录组件类型是：

1
type: "sidebarToc"

示例：

1
{
2
  type: "sidebarToc",
3
  enable: true,
4
  position: "sticky",
5
  showOnPostPage: true,
6
  showOnNonPostPage: false,
7
}

这表示：

只在文章详情页显示
跟随滚动吸附

站点统计组件怎么开#

组件类型是：

1
type: "stats"

示例：

1
{
2
  type: "stats",
3
  enable: true,
4
  position: "top",
5
  showOnPostPage: true,
6
}

它一般会显示：

文章数量
最近更新
站点运行时间

广告位怎么开#

广告组件本身是在侧边栏里控制开关，具体广告内容在另一个文件里写：

1
src/config/adConfig.ts

第一步：在 `sidebarConfig.ts` 里启用广告组件#

1
{
2
  type: "advertisement",
3
  enable: true,
4
  position: "sticky",
5
  showOnPostPage: true,
6
  configId: "ad1",
7
}

第二步：在 `adConfig.ts` 里写广告内容#

比如纯图片广告：

1
export const adConfig1 = {
2
  image: {
3
    src: "assets/images/cover.avif",
4
    alt: "广告横幅",
5
    link: "#",
6
    external: true,
7
  },
8
  closable: true,
9
  displayCount: -1,
10
}

或者带文字和按钮：

1
export const adConfig2 = {
2
  title: "支持博主",
3
  content: "如果你觉得本站内容对你有帮助，欢迎支持创作。",
4
  link: {
5
    text: "支持一下",
6
    url: "about/",
7
    external: false,
8
  },
9
}

`top` 和 `sticky` 有什么区别#

这是新手很容易看懵的地方。

`top`#

适合：

个人资料
公告
站点统计

特点：

显示在侧栏上方
更像“固定在最前面的内容块”

`sticky`#

适合：

目录
分类
标签
广告

特点：

会随着页面滚动保持可见

我建议新手这样配#

如果你现在刚开始用，先用这套最稳：

左侧栏#

个人资料
音乐播放器
分类
标签

右侧栏#

公告
站点统计
文章目录

这样信息会比较清楚，不容易太乱。

常见问题#

Q: 我开了目录，但文章页没有显示？#

先检查：

type 写的是不是 sidebarToc
enable 是不是 true
showOnPostPage 是不是 true
当前文章里有没有足够的标题层级

Q: 广告位为什么没显示？#

一般是因为：

侧边栏里没启用广告组件
configId 写错了
adConfig.ts 里内容不完整

Q: 站点统计为什么不对？#

通常先检查：

文章发布时间有没有乱填
siteStartDate 有没有写对
页面是不是刷新成功了

最后总结#

这个项目的侧边栏不是“固定死”的，而是可以自己搭。

你可以把它理解成：

sidebarConfig.ts 决定“放什么、放哪边、什么时候显示”
adConfig.ts 决定“广告具体长什么样”

先把布局逻辑搞明白，后面调整就会很轻松。

音乐

音乐

侧边栏、目录、站点统计与广告位配置指南#

主要配置文件#

侧边栏布局先看这几个参数#

它们分别是什么意思#

左右侧栏里的组件怎么控制#

文章目录怎么开#

站点统计组件怎么开#

广告位怎么开#

第一步：在 `sidebarConfig.ts` 里启用广告组件#

第二步：在 `adConfig.ts` 里写广告内容#

`top` 和 `sticky` 有什么区别#

`top`#

`sticky`#

我建议新手这样配#

左侧栏#

右侧栏#

常见问题#

Q: 我开了目录，但文章页没有显示？#

Q: 广告位为什么没显示？#

Q: 站点统计为什么不对？#

最后总结#

支持与分享

评论区

音乐

目录

音乐

音乐

23. 侧边栏、目录、站点统计与广告位配置指南

侧边栏、目录、站点统计与广告位配置指南#

主要配置文件#

侧边栏布局先看这几个参数#

它们分别是什么意思#

左右侧栏里的组件怎么控制#

文章目录怎么开#

站点统计组件怎么开#

广告位怎么开#

第一步：在 sidebarConfig.ts 里启用广告组件#

第二步：在 adConfig.ts 里写广告内容#

top 和 sticky 有什么区别#

top#

sticky#

我建议新手这样配#

左侧栏#

右侧栏#

常见问题#

Q: 我开了目录，但文章页没有显示？#

Q: 广告位为什么没显示？#

Q: 站点统计为什么不对？#

最后总结#

支持与分享

评论区

音乐

目录

第一步：在 `sidebarConfig.ts` 里启用广告组件#

第二步：在 `adConfig.ts` 里写广告内容#

`top` 和 `sticky` 有什么区别#

`top`#

`sticky`#