侧边栏

侧边栏布局配置控制站点的侧边栏显示位置和组件排列。

配置文件

src/config/sidebarConfig.ts

动态侧边栏会跟随 siteConfig.pages.dynamic 开关：关闭动态页面后，动态侧边栏组件也会自动隐藏。音乐播放器是否显示在侧边栏，则通过 src/config/musicConfig.ts 中的 musicPlayerConfig.showInSidebar 控制，不需要修改这里的 enable。

布局配置

属性	类型	默认值	说明
`enable`	`boolean`	`true`	是否启用侧边栏
`position`	`string`	`"both"`	侧边栏位置：`"left"` 左侧、`"right"` 右侧、`"both"` 双侧
`tabletSidebar`	`string`	`"left"`	平板端(769-1279px)显示哪侧，仅 `position` 为 `"both"` 时生效
`hideSidebarOnPostPage`	`boolean`	`false`	文章详情页隐藏侧边栏，设为 `true` 则只在首页等非文章页显示
`noSidebarContentWidth`	`number`	—	本页没有任何侧栏列时，内容栏占包裹层总宽（侧栏 + 内容栏）的比例，0–1。不设置则铺满页面宽度

某一侧是否出现，完全由该侧组件在当前页型下有没有可见组件决定（即组件的 showOnPostPage / hideOnNonPostPage），再叠加 position 的门控。因此想在文章页同时显示两侧，把 position 设为 "both"、并给两侧组件配好 showOnPostPage 即可，不需要额外开关。

当某页两侧都没有可见组件（或 hideSidebarOnPostPage 为 true）时，该页只剩内容栏；此时若觉得正文过宽，用 noSidebarContentWidth 指定一个比例，内容栏会按该比例居中收窄。比例是相对包裹层总宽（即侧栏 + 内容栏的总宽）而言的，所以在任何视口下观感一致：0.7 就是七成宽。越界值会被钳到 0–1。

// 未设置 -> 铺满
noSidebarContentWidth: undefined
// 内容栏占七成并居中
noSidebarContentWidth: 0.7

export const sidebarLayoutConfig: SidebarLayoutConfig = {
  enable: true,
  position: "both",
  tabletSidebar: "left",
  hideSidebarOnPostPage: false,
  noSidebarContentWidth: 0.7, // 内容栏占七成；不设置则铺满
  // ...
};

组件配置

每个侧边栏组件支持以下属性：

属性	类型	必填	说明
`type`	`string`	是	组件类型
`enable`	`boolean`	是	是否启用
`position`	`string`	是	位置：`"top"` 固定顶部，`"sticky"` 粘性定位
`showOnPostPage`	`boolean`	否	是否在文章详情页显示
`hideOnNonPostPage`	`boolean`	否	是否在非文章详情页隐藏（`true` = 仅文章详情页显示）
`showTitle`	`boolean`	否	是否显示组件标题，默认 `true`
`specificConfig`	`object`	否	组件专属配置，不同组件类型的配置项不同，详见侧边栏小组件

可用组件类型

类型	说明
`"profile"`	用户资料卡片（头像、名称、简介、社交链接）
`"announcement"`	公告栏
`"music"`	音乐播放器
`"categories"`	文章分类列表
`"tags"`	标签云
`"stats"`	站点统计（文章数、字数、运行天数等）
`"siteInfo"`	站点信息（构建平台、版本、系统等）
`"calendar"`	文章日历（可选热力图）
`"sidebarToc"`	文章目录（仅文章详情页可用）
`"advertisement"`	广告栏（支持多个实例）

TIP

组件的渲染顺序取决于它们在配置数组中的顺序，但 position: "top" 的组件会优先于 position: "sticky" 的组件渲染。

左侧边栏配置示例

leftComponents: [
  {
    type: "profile",
    enable: true,
    position: "top",
    showOnPostPage: true,
  },
  {
    type: "announcement",
    enable: true,
    position: "top",
    showOnPostPage: true,
  },
  {
    type: "music",
    enable: true,
    position: "sticky",
    showOnPostPage: true,
  },
  {
    type: "categories",
    enable: true,
    position: "sticky",
    showOnPostPage: true,
    specificConfig: {
      collapseThreshold: 5, // 超过 5 个分类时自动折叠
    },
  },
  {
    type: "tags",
    enable: true,
    position: "sticky",
    showOnPostPage: true,
    specificConfig: {
      collapseThreshold: 10, // 超过 10 个标签时自动折叠
    },
  },
],

右侧边栏配置示例

rightComponents: [
  {
    type: "stats",
    enable: true,
    position: "top",
    showOnPostPage: true,
  },
  {
    type: "siteInfo",
    enable: true,
    position: "top",
    showOnPostPage: true,
  },
  {
    type: "calendar",
    enable: true,
    showTitle: false,
    position: "sticky",
    showOnPostPage: false,
    specificConfig: {
      calendar: {
        showHeatmap: true, // 显示年度文章热力图
      },
    },
  },
  {
    type: "sidebarToc",
    enable: true,
    position: "sticky",
    showOnPostPage: true,
    hideOnNonPostPage: true,
  },
],

移动端底部组件

在移动端（< 768px），侧边栏组件会显示在页面底部。使用 mobileBottomComponents 单独配置：

mobileBottomComponents: [
  { type: "profile", enable: true, showOnPostPage: true },
  { type: "announcement", enable: true, showOnPostPage: true },
  { type: "music", enable: true, showOnPostPage: true },
  { type: "categories", enable: true, showOnPostPage: true, specificConfig: { collapseThreshold: 5 } },
  { type: "tags", enable: true, showOnPostPage: true, specificConfig: { collapseThreshold: 10 } },
  { type: "stats", enable: true, showOnPostPage: true },
  { type: "siteInfo", enable: true, showOnPostPage: true },
],

WARNING

移动端底部组件配置独立于左右侧边栏配置，需要单独设置。

侧边栏 ​

配置文件 ​

布局配置 ​

组件配置 ​

可用组件类型 ​

左侧边栏配置示例 ​

右侧边栏配置示例 ​

移动端底部组件 ​

侧边栏