侧边栏配置

约 505 字大约 2 分钟

2024-08-15

概述

在本主题中，侧边栏特指位于页面最左侧的内容区域，用于导航到不同的页面。

在 vuepress 的默认主题 @vuepress/theme-default 中，侧边栏是通过 sidebar 进行配置。

但在本主题中，为使其更具语义化，主题将侧边栏配置整合到了 notes 配置中 。通过一个 note 对应一个 sidebar 的方式，实现更加简洁，语义化的侧边栏配置。

同时，为了满足用户不希望使用 notes 功能的需求，本主题也提供了 sidebar 的选项进行侧边栏配置。

Notes 中的侧边栏配置

notes 的功能是聚合一系列的文章，通过侧边栏来导航到 notes 中不同的文章。

你可以在 notes 目录下创建多个 note ，在每一个 note 中单独配置 sidebar:

.vuepress/config.ts

import { defineUserConfig
 } from 'vuepress'
import { defineNoteConfig
, plumeTheme
 } from 'vuepress-theme-plume'

const noteA
 = defineNoteConfig
({
  dir
: 'note A',
  link
: '/note-a/',
  sidebar
: [
    { text
: 'one item', link
: 'one' },
    { text
: 'two item', link
: 'two' },
  ]
})

export default defineUserConfig
({
  theme
: plumeTheme
({
    notes
: {
      link
: '/',
      dir
: 'notes',
      notes
: [noteA
], 
    },
  })
})

.vuepress/plume.config.ts

import { defineNoteConfig
, defineThemeConfig
 } from 'vuepress-theme-plume'

const noteA
 = defineNoteConfig
({
  dir
: 'note A',
  link
: '/note-a/',
  sidebar
: [
    { text
: 'one item', link
: 'one' },
    { text
: 'two item', link
: 'two' },
  ]
})

export default defineThemeConfig
({
  notes
: {
    link
: '/',
    dir
: 'notes',
    notes
: [noteA
], 
  },
})

主题提供了 defineNoteConfig 来帮助你配置 note , 你可以参考这里来查看如何配置。

如果你不想使用 notes 的方式来管理系列文章，但又期望通过侧边栏来导航到不同的文章，可以通过 sidebar 通用配置来实现。

.vuepress/config.ts

import { defineUserConfig
 } from 'vuepress'
import { plumeTheme
 } from 'vuepress-theme-plume'

export default defineUserConfig
({
  theme
: plumeTheme
({
    notes
: false,
    sidebar
: {
      '/config/': [
        { text
: '侧边栏配置', link
: 'sidebar-1' },
        { text
: '侧边栏配置', link
: 'sidebar-2' },
      ]
    }
  })
})

.vuepress/plume.config.ts

import { defineThemeConfig
 } from 'vuepress-theme-plume'

export default defineThemeConfig
({
  notes
: false,
  sidebar
: {
    '/config/': [
      { text
: '侧边栏配置', link
: 'sidebar-1' },
      { text
: '侧边栏配置', link
: 'sidebar-2' },
    ]
  }
})