首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vuepress:让侧边栏在单个页面中工作

Vuepress是一个基于Vue.js的静态网站生成器,它使用了Vue.js的生态系统以及Webpack和Node.js等工具,提供了一种简单而灵活的方式来创建漂亮的文档网站。

侧边栏是Vuepress中非常重要的一个功能,它可以在单个页面中为用户提供导航和快速访问其他相关内容的功能。在Vuepress中,侧边栏的配置是通过一个特定的配置文件来实现的,该文件通常位于项目根目录的.vuepress文件夹下,命名为config.js

config.js中,我们可以使用themeConfig.sidebar属性来配置侧边栏。它是一个对象,键名为某个页面的路径,值为一个数组,表示该页面的侧边栏内容。数组中的每一项可以是一个字符串,表示该页面的标题,也可以是一个包含titlechildren属性的对象,用于定义该页面的标题和子菜单。

除了配置侧边栏外,Vuepress还提供了其他一些可以增强侧边栏功能的插件和扩展。例如,可以使用@vuepress/plugin-active-header-links插件来高亮侧边栏中与当前页面对应的链接,让用户可以清晰地知道当前所在的位置。

Vuepress的侧边栏功能可以应用于各种场景。例如,在文档网站中,可以将不同的页面分门别类地列在侧边栏中,方便用户快速找到所需内容。在技术博客中,可以使用侧边栏将不同主题或分类的文章进行归类展示。总之,侧边栏是一个非常灵活的功能,可以根据具体需求进行定制。

在腾讯云的产品中,推荐使用腾讯云对象存储(COS)来存储Vuepress生成的静态网页和相关资源文件。腾讯云对象存储是一种高可靠、低成本、可扩展的云存储服务,适用于存储各种类型的非结构化数据,包括文档、图片、视频等。您可以通过以下链接了解腾讯云对象存储的详细介绍和使用方法:

腾讯云对象存储(COS)产品介绍

综上所述,Vuepress是一个基于Vue.js的静态网站生成器,通过配置config.js文件中的themeConfig.sidebar属性,可以实现侧边栏在单个页面中的工作。腾讯云对象存储是一个推荐的存储方案,可以用于存储Vuepress生成的静态网页和相关资源文件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

用我这套模板,几分钟做出文档网站!

editLinks: true, editLinkText: "完善页面", },});2、导航配置由于导航配置可能比较复杂,为了配置更清晰,我们可以集中把导航配置写在 navbar.ts...,所有的侧边配置都放在 sidebar.ts 文件,然后 config.ts 引用。...但是由于侧边的配置比较复杂,文章多的时候需要分组、还要能自动识别文章的小标题,所以这里我摸索出来的 最佳实践 是:1)将同类的文章放到同一个目录里,比如学习路线:2)将该目录的所有文章(侧边配置)...集中写在单独的配置文件,比如 roadmapSideBar.ts,放到 sidebars 目录下:3)侧边 sidebar.ts 配置,引用各分类的侧边配置文件,实现不同分类下的文章,展示的侧边不同...VuePress 自定义主题能力二次开发的功能,和前面讲的配置一样,只用在 extraSideBar.ts 填写配置,就能自动在网页右侧生成一个固定的侧边了,从而提供一些附加能力,比如对站长很重要的引流支持等

50510
  • 手把手教你用vuepress搭建自己的网站(2)

    服务启动,因为 NodeJs 现不支持模块化,所以 vuepress ,是无法使用 import 与 export 语法的 进入.vuepress文件夹,创建config.js文件 cd .vuepress.../guide/ /config.md /config.html VuePressREADME.md文件,你可以把它视为xxx.vue文件,md 文件既可以写js,css,html,如果你发现页面...,您以后用 md 写文章时,同样引入图片时,图片的后缀名都不能带有中文字符 配置导航 导航中有页面标题、搜索框、 导航链接、多语言切换、仓库链接,它们都是可以直接通过配置出来的, config.js...你可以按照这个类似的结构,无限制的配置下去 光有 nav 导航是不够的,下面来配置一下侧边,怎么配置侧边才是重中之重 配置侧边-slider 自动获取侧边栏内容 如果你希望自动生成当前页面标题的侧边...如果您希望为不同的页面组显示不同的侧边, 就和官网一样, 点击导航的哪个 nav,对应就显示对应的的侧边,目前目录有 fontend \ interview \ minprogram 等, 这些目录下都存放着多个

    2.6K20

    从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站

    ;link 字段就是页面的路径 NavbarGroup 对象的 text 字段就是导航的名字;children 字段是二级导航的路径 效果就是这样的: 侧边配置 接下来我们要把网站改造成自己喜欢的样子...我们先来看下配置好的页面,首页是这样的: 点击右上角的“网络”按钮,出来网络侧边: 点击右上角的“设计模式”按钮,出来设计模式侧边: 我们先来看一下配置文件: import { defaultTheme...// 不同子路径下的页面会使用不同的侧边 sidebar: { '/network/': [ { text: '网络',...key,value 为侧边对象数组,如果侧边对象里有 children 字段说明这是个二级侧边,children 数组里对应的是具体的文档路径。...标签页,选择Pages侧边,Source 选择 Deploy from a branch,然后 Branch 标签下选择 gh-pages 分支和 root 目录,点保存,就可以看到上面的博客地址了

    48011

    如何快速搭建好看的个人博客(完整配置与源码)

    导航创建好了, 接下来就是配置页面内容侧边slider 配置侧边slider 1.自动获取侧边栏内容 如果你希望自动生成当前页面标题的侧边, 可以config.js配置来启用 // .vuepress...config.js module.exports = { themeConfig:{ sidebar: 'auto', // sidebarDepth: 1 } } 2.展示每个页面侧边...如果你希望为不同的页面组显示不同的侧边, 就和官网一样, 点击指南显示的是对应的侧边,目前目录有node \ database \ web等, 这些目录下都存放着多个md文件: module.exports...上面采用了两个方式配置侧边, 一个侧边是node目录下直接是写的markdown文章, 而在web下又有多个分类, 所有有进行了分栏配置, 其实这两种方式我们博客中都是比较常见的 自定义布局内容...网站的导航和侧边都已经配置好之后, 如果你觉得页面不是很符合你的预期, 你也可以自定修改成你想要的效果。

    1.5K10

    VuePress

    以上步骤都成功以后,就可以浏览器总看到页面了,接下来就是对页面进行布局 主题配置 本文是根据VuePress默认主题配置 1.首页 docs文件夹下创建.vuepress文件夹和README.md文件...这个文件夹中放的是markdown文件,每一个markdown文件对应一个页面。至于页面之间的跳转和页面导航侧边布局config.js文件设置。...想要使侧边(Sidebar)生效,需要配置 themeConfig.sidebar // .vuepress/config.js module.exports = { themeConfig:...现在页面基本也搭建完成,可以页面之间进行切换。下一步是如何在markdown中使用vue组件,也就是页面展示自己的项目。...Markdown 文件(组件名是通过文件名取到的): //文件名和组件名之间同`-`连接 完成这一步以后就可以页面中看到自己的组件页面展示了

    1.2K10

    一看就会的保姆级教程,10分钟搭建个人博客

    ) 二、安装脚手架 这里本应该安装 vuepress 的,但是 vuepress 其本身是一个文档型的页面,比较简约,我们肯定都想自己的博客变得好看一点,所以这里推荐一个大佬制作好的主题 vuepress-theme-reco.../docs/theme-reco/ 下的 README.md 、theme.md 、plugin.md 、api.md 文件进行识别生成侧边,如图所示: ?...侧边的文字其实是识别了 md 文件的 title ,例如 theme.md 文件对应的名称就是 title 的值 --- title: theme date: 2020-05-27 --- This...其实就是 blogConfig 设置的 "blogConfig": { "category": { "location": 2, // 导航的位置第二个..."text": "Category" }, "tag": { "location": 3, // 导航的位置第三个 "text": "

    1.7K20

    超详细动手搭建一个Vuepress站点及开启PWA与自动部署

    image 侧边配置 可以省略.md扩展名,同时以 / 结尾的路径将会被视为 */README.md module.exports = { themeConfig: { sidebar:...// 文字颜色 $borderColor = #eaecef // 边框颜色 $codeBgColor = #282c34 // 代码背景颜色 自定义页面类 有时需要在不同的页面应用不同的css,可以先在该页面声明...--- pageClass: custom-page-class --- 然后override.styl书写 .theme-container.custom-page-class { /* 特定页面的...将dist文件夹的内容提交到git上或者上传到服务器就好 yarn docs:build # 或者:npm run docs:build 另外可以弄一个脚本,设置持续集成,每次 push 代码时自动运行脚本...目录下的public文件夹 给git仓库绑定了独立域名后,记得修改base路径 设置侧边分组后默认会自动生成 上/下一篇链接 设置了自动生成侧边会把侧边分组覆盖掉 设置PWA记得开启SSL

    78340

    如何构建自己的技术博客

    主题配置 一个 VuePress 主题应该负责整个网站的布局和交互细节。 VuePress ,目前自带了一个默认的主题(正是你现在所看到的),它是为技术文档而设计的。...同时,默认主题提供了一些选项,你可以去自定义导航(navbar)、 侧边(sidebar)和 首页(homepage) 等 默认主题: 首页 修改首页,修改 docs/README.md,VuePress...{{ $frontmatter.xx }} 方式获取 设置 footer 导航 .vuepress/config.js 配置文件,通过 themeConfig.nav 增加一些导航链接: /... .vuepress/config.js 配置文件,通过 themeConfig.sidebar 增加侧边配置: // .vuepress/config.js module.exports =...└─ two.md 可以自动开启侧边配置 // .vuepress/config.js module.exports = { themeConfig: { sidebar: 'auto

    29130

    团队技术文档构建利器vuepress上手实践

    参数配置 3.1 主题配置 3.1.1 主页(homepage) 3.1.2 导航(navbar) 3.1.3 侧边(sidebar) 3.1.4 搜索框(search box) 3.1.5 最近更新...3.1.2 导航(navbar) themeConfig.nav 导航包括 左侧页面标题、搜索框、导航链接、多语言支持、仓库链接,支持下拉分组菜单,还支持全局或单页面禁用。...3.1.3 侧边(sidebar) themeConfig.sidebar 侧边一般用于文档的目录索引,可以直接在 config.js 配置链接数组,也页面配置 sidebar:auto 自动生成侧边栏目录...侧边还支持以下更加细节的设置: 设置嵌套层数 是否展开所有 标题链接是否激活(禁用可以懒加载提升性能) 分组 侧边页面定制 禁用 3.1.4 搜索框(search box) themeConfig.search...CSS 类名,可以页面的 YAML front matter 声明一个 pageClass: --- pageClass: custom-page-class --- index.styl 可以使用对应的类名

    1.3K20

    【硬核教程】只需1秒—你也可以有自己的API文档

    然后是详情页 可以看到,首页的配置,有一个actionLink,这个是指点了首页的开始开发,需要跳转到的路由。这个就是我们众多详情的其中一个页面的路由。 你可以对比刚刚详情页的图片。...我们之所以能够看到左边的侧边,是因为config.js里配置了sidebar这个属性。如下。 const router = require('....router.jsvuepress本身没有,是我做的一个简单抽象,里面长这样。...'children': [ '类别B的张三', ] } ]; /** * 生成sidebar数据 * * @param data 上面定义的抽象侧边路由静态文件...vuepress,如果路由以/结尾,那么就是指的这个目录下的README.md文件 还有一点很方便的是,单个文件里如果你有二级标题,vuepress会自动的生成该文件下的二级标题导航。

    90010

    团队技术文档构建利器vuepress上手实践

    3.1.2 导航(navbar) themeConfig.nav 导航包括 左侧页面标题、搜索框、导航链接、多语言支持、仓库链接,支持下拉分组菜单,还支持全局或单页面禁用。...3.1.3 侧边(sidebar) themeConfig.sidebar 侧边一般用于文档的目录索引,可以直接在 config.js 配置链接数组,也页面配置 sidebar:auto 自动生成侧边栏目录...侧边还支持以下更加细节的设置: 设置嵌套层数 是否展开所有 标题链接是否激活(禁用可以懒加载提升性能) 分组 侧边页面定制 禁用 3.1.4 搜索框(search box) themeConfig.search...CSS 类名,可以页面的 YAML front matter 声明一个 pageClass: --- pageClass: custom-page-class --- index.styl 可以使用对应的类名... Markdown 中使用 Vue .vuepress/components 的所有 *.vue 文件都会自动注册为全局异步组件,如: . └─ .vuepress └─ components

    2.4K94

    超详细动手搭建一个Vuepress站点及开启PWA与自动部署

    link: '/language/English' } ] } ] } } 如图: [99a97bd9ly1fr1oz3elibj20fg02bjr9.jpg] 侧边配置...'html-standard', 'css-standard', 'js-standard', 'git-standard' ] }] } 支持侧边分组...= #eaecef // 边框颜色 $codeBgColor = #282c34 // 代码背景颜色 自定义页面类 有时需要在不同的页面应用不同的css,可以先在该页面声明 --- pageClass...: custom-page-class --- 然后override.styl书写 .theme-container.custom-page-class { /* 特定页面的 CSS */ }...目录下的public文件夹 给git仓库绑定了独立域名后,记得修改base路径 设置侧边分组后默认会自动生成 上/下一篇链接 设置了自动生成侧边会把侧边分组覆盖掉 设置PWA记得开启SSL

    2.4K60

    我问导师,Vue3有没有对应工具来生成漂亮的文档? 用 Vitepress

    建立Vite而非Webpack上,因此启动时间,热重装等更快 使用Vue3来减少JS的有效负载 轻量级 Vitepress 能够实现这些目标的一个原因是,它比Vuepress 更具体,而 Vuepress...Vitepress侧边可以做的一件很酷的事情是根据我们所在的页面来更改侧边。 比如,我们想首页显示其标题,其他页面都显示我们刚刚制作的侧边。...我们要做的第一件事是创建将our-story侧边存储为变量。...Vitepress内置元素 Vitepress 附带了对几个元素的支持,我们可以config.js或在Markdown中直接声明这些元素。.../vuepress/config.js配置网站,但有时我们还是需要对各个页面进行更细的控制。 幸运的是,我们可以使用markdown文件顶部的YAML块来控制每个页面

    1.6K20

    为什么人家的开源项目文档如此炫酷?原来用的是这款神器!

    ,同时也会生成右侧的大纲; 如果你还想给专栏添加个目录页的话,可以00.目录页文件夹添加02.mall学习教程.md作为目录,目录页内容如下,permalink可以指定目录页的永久路径; ---...,点击导航即可跳转到该目录; 其实你还可以首页index.md通过添加feature来实现快速访问,这里我们创建了三个feature; --- home: true # heroImage: /...-- more -->注释来控制摘要的显示,该注释之前内容均会作为摘要来显示; 文章列表是否显示摘要对比如下; 如果你想修改文章作者信息、侧边是否折叠、社交信息、页面底部版权信息等信息的话,可以修改主题配置文件...macrozheng', // 必需 link: 'https://github.com/macrozheng', // 可选的 }, blogger: { // 博主信息,显示首页侧边...总结 使用VuePress+Vdoing来搭建文档网站不仅炫酷而且功能强大!对比Docsify的动态生成文档,VuePress生成静态页面性能更好,同时对SEO也更友好。

    1.2K20

    基于VuePress快速搭建一套项目知识管理工具

    线上演示地址:http://39.106.163.86:8081/ GitHub地址:https://github.com/chenshuaikang/ShareDoc 用户背景 我是一名开发人员,经常会迷失寻找团队内的各种开发文档...最后选择了vuePress来做,它的好处是可以用markdown语言来做笔记,你专注于写作,还可以将笔记提交到gitlab进行管理,还有变更记录,而且高度支持自定义主题等等。...但这个开源工具不是下载下来就可以直接用的,还有些开发工作需要做。...和侧边 - 自动生成的 GitHub 链接和页面的编辑链接搭建此工具按照官网搭建、 注意 请确保你的 Node.js 版本 >= 8 全局安装 如果你只是想尝试一下 VuePress,你可以全局安装它...作为本地依赖安装你可以使用持续集成工具,或者一些其他服务(比如 Netlify)来帮助你每次提交代码时自动部署。

    2.3K00
    领券