如何在右边添加侧边栏显示标题，以及如何让页面内容区宽度更宽 #1454

1506085843 · 2023-12-17T15:03:52Z

1506085843
Dec 17, 2023

我正在使用最新的 vuepress 版本是 v2.0.0-rc.0

使用的效果如下：

目前左边的侧边栏已经显示了所有的文章名称，现在我想把中间的文章内容区宽度再变宽些，并且在右边增加一个侧边栏显示当前文章的目录，我希望的效果是像下面这个网页效果一样：

https://geekdaxue.co/read/javafx-tutorial-cn/docs-prepare-tutorial.md

我不知道还要增加什么配置或者使用什么主题能达到这样的效果，官网的配置和主题方面的我都查了，没有找到相关配置和说明。希望有人能解答。

下面是我的 config.js 配置文件和项目的 package.json 文件。

config.js 配置文件：

import { defaultTheme } from 'vuepress'
import { searchPlugin } from '@vuepress/plugin-search'

export default{
  title: '山下海棠',
  description: '山下海棠',
  theme: defaultTheme({
	logo: "/images/aahead.jpg",
	sidebarDepth: 0,//左侧侧边栏文章下不显示标题列表
	displayAllHeaders: true,
	toc: true,
	 navbar: [
	  {
        text: 'Foo',
        link: '/a/',
      },
      {
        text: 'Group',
        children: ['/b/enu.md', '/b/enu.md'],
      },
      '/bar/README.md',
	 ],
	sidebar: [
      {
        text: "🧭 千里之行",
		collapsible: true,
        children: [
          "/a/socketandnetty.md",
          "/a/stream.md",
        ],
      },
      {
        text: "☕ JavaFX 核心",
		collapsible: true,
        children: [
          "/b/enu.md",
          "/b/enu.md",
        ],
      }]
  }),
  plugins: [
    searchPlugin({
	  locales: {
        '/': {
          placeholder: '搜索文章',
        },
      },
    }),
	tocPlugin({
    }),

  ],
}

项目的 package.json 文件：

{
  "name": "vuepress-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vuepress/plugin-search": "^2.0.0-rc.0",
    "vuepress": "^2.0.0-rc.0"
  }
}