VuePress 侧边栏的具体使用

目录
  • 前言
  • 目录结构:
  • 最简侧边栏:
  • 侧边栏分组
  • 显示文件名(或其他指定名字)
    • 方法1
    • 方法2

前言

官网写的侧边栏教程真的是让人很糟心,经过一番摸索,总算大致弄清楚了,下面详细说一下用法:

目录结构:

docs根目录下有一个README.md、chinese文件夹、english文件夹

最简侧边栏:

sidebar: {
            '/language/chinese/': [
                '',  //该目录下的README.md文件
                'a', //该目录下的a.md文件
                'b'  //该目录下的a.md文件
            ],

            '/language/english/': [
                '',
            ],
        },

chinese文件夹下的侧边栏:

english文件夹下的侧边栏:

可以看到,侧边栏效果出来了,但是我们看官网上的效果:

侧边栏上边有分组,图上的侧边栏分成了两组,这里就是侧边栏分组了

侧边栏分组

我们把chinese文件夹下的README.md分到Group1,a.md、b.md分到Group2:

 sidebar: {
            '/language/chinese/': [
                {
                    title: 'Group1',  //组名
                    children: [''],   //该分组下要显示的文件的目录
                },
                {
                    title: 'Group2',
                    children: ['a','b'],
                },
            ],
            '/language/english/': [
                '',
            ],
        },

可以看到分组成功,可以发现,每个md直接显示了它的一二级标题,如果我们想除了显示文件中的一二级标题,还显示这篇md文件的文件名(或指定的其他名字),比如下面这种效果:

该怎么做呢?官方给了这样一个例子,用一个数组来指定路径和名字:

我们尝试一下:

        sidebar: {

            '/language/chinese/': [
                {
                    title: 'Group1',  //组名
                    children: [
                        ['', 'chinese']
                    ]
                },
                {
                    title: 'Group2',
                    children: [
                        ['a', 'A'],
                        ['b', 'B'],
                    ],
                }
            ]
        }

结果却是:

可以看到它只是改了一级标题的名字,并没有额外增加一个名字,还有其他方法吗方法肯定是有的。

显示文件名(或其他指定名字)

方法1

最简单的做法就是md文件中,把一级标题的名字改为我们指定的名字,这样做的坏处就是一级标题只能在这个md文件中使用一次,(推荐使用该方法)

可以看到再一个一级标题没有出现在侧边栏中

方法2

给这个文件添加分组,添加一个分组名,即一个md文件就是一个分组,然后再用大分组,把这些小分组括起来。

小分组

我们给README.md添加名为chinese的分组:

{
      title: 'chinese',
      children: [‘'],
},

给a.md添加名为A的分组

{
      title: 'A',
      children: [‘a'],
},

给b.md添加名为B的分组

{
      title: 'B',
      children: [‘b'],
},

大分组:

把chinese假入大组Group1:

                {
                    title: 'Group1',
                    children: [
                        {
                            title: 'chinese',
                            children: [''],
                        },
                    ],
                },

把A、B加入大组Group2:

                {
                    title: 'Group2',
                    children: [
                        //小组A
                        {
                            title: 'A',
                            children: ['a'],
                        },
                        //小组B
                        {
                            title: 'B',
                            children: ['b'],
                        },

                    ],
                },

完全代码:

        sidebar: {

            '/language/chinese/': [
                //Group1
                {
                    title: 'Group1',
                    children: [
                        {
                            title: 'chinese',   // 必要的
                            children: ['']
                        }
                    ]
                },
                //Group2
                {
                    title: 'Group2',
                    children: [
                        //小组A
                        {
                            title: 'A',
                            children: ['a'],
                        },
                        //小组B
                        {
                            title: 'B',
                            children: ['b'],
                        },
                    ],
                },

            ],

        },

显然,这样写起来眼花缭乱,因此推荐方法一。

到此这篇关于VuePress 侧边栏的具体使用的文章就介绍到这了,更多相关VuePress 侧边栏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • VuePress 静态网站生成方法步骤

    使用技术: VuePress - Vue 驱动的静态网站生成器 仓库地址:https://github.com/yinian-R/vuepress-demo 全局安装 ## 安装 yarn global add vuepress # 或者:npm install -g vuepress 现有项目 如果你想在一个现有项目中使用 VuePress,同时想要在该项目中管理文档,则应该将 VuePress 安装为本地依赖. ## 没有项目可以初始化 yarn init ## 将 VuePress 作为一

  • 浅谈vuepress 踩坑记

    vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档.恰好最近需要为一些组件写文档,就动手撸了一波,毕竟刚发布,遇到不少坑,最终还是磕磕碰碰的运行起来了,为了避免大家踩同样的坑,特意将搭建的过程记录下来,分享一波. 以下是几个已知的问题 因为util.promisify是在node 8.0之后引入的,所以如果你不想像我一样浪费三个小时的时间,请查看并且更新node版本 建议不要使用webpack-sim

  • VuePress 快速踩坑小结

    最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化.另外 VuePress 针对 Markdown 文件做了一些扩展使其功能更加强大,本文将围绕搭建一个 Github 的静态博客展开. 为项目加入 VuePress 第一步为您的项目安装 VuePress,如果您的项目代码中并没有 package.json文件,请先执行 npm

  • VuePress 中如何增加用户登录功能

    VuePress是什么? 先让我们看看 VuePress能干什么?有什么效果? 很像vue官网的文档页面,因为vuePress就是尤大大的一个力作 vuePress官网介绍介绍的很详细,这里只做搭建VuePress项目教程 在 VuePress 中增加用户登录 VuePress 是 Vuejs 官方提供的一个快速建设文档站点的工具,在简单配置好功能后,需要做的事情就剩下写好一个个 Markdown 文档. 因为 VuePress 提供了可以在 Markdown 中使用 Vue 的能力,所以有时候

  • Vuepress 搭建带评论功能的静态博客的实现

    vuepress 是 Vue 驱动的静态站点生成工具 本文仅介绍,搭建静态博客的过程,具体教程及文档请点击进入 vuepress中文网 点击查看项目代码 vuepress初始化 下面初始化 # 将 github 新创建的仓库克隆到本地 git clone git@github.com:zhb333/readme-blog.git # 进入项目 cd readme-blog # npm 初始化, 按照提示回车 npm init # 安装 vuepress npm i vuepress -D # 安

  • Vue极简生成器 Vuepress的实现

    目录 为什么要使用Vuepress create-vuepress-site 生成器 快速搭建项目 一.搭建本地开发环境 二.创建新的初始应用 三.启动应用服务器 云开发平台一键部署vuepress 一.创建环境 二.创建vuepress应用 创建前端应用. 三.在日常环境部署 阿里云开发平台多端应用 为什么要使用Vuepress VuePress由两部分组成:一个极简的静态站点生成器,带有一个vue支持的主题系统和Plugin API,以及一个为编写技术文档而优化的默认主题.创建它是为了支持V

  • 基于VuePress 轻量级静态网站生成器的实现方法

    什么是VuePress VuePress由两部分组成:一个基于Vue的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题. 它是为了满足Vue自己的子项目文档的需求而创建的. VuePress为每一个由它生成的页面提供预加载的html,不仅加载速度极佳,同时对seo非常友好.一旦页面被加载之后,Vue就全面接管所有的静态内容,使其变成一个完全的SPA应用,其他的页面也会在用户使用导航进入的时候来按需加载. VuePress是怎样运作的 一个VuePress应用实际上就是基于Vue.VueR

  • 基于vue-ssr的静态网站生成器VuePress 初体验

    什么是VuePress VuePress由两部分组成:一个基于Vue的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题. 它是为了满足Vue自己的子项目文档的需求而创建的. VuePress为每一个由它生成的页面提供预加载的html,不仅加载速度极佳,同时对seo非常友好.一旦页面被加载之后,Vue就全面接管所有的静态内容,使其变成一个完全的SPA应用,其他的页面也会在用户使用导航进入的时候来按需加载. 参考官方文档可知该项目有一下特点: 内置markdown(基础功能) 支持PWA 集

  • VuePress 侧边栏的具体使用

    目录 前言 目录结构: 最简侧边栏: 侧边栏分组 显示文件名(或其他指定名字) 方法1 方法2 前言 官网写的侧边栏教程真的是让人很糟心,经过一番摸索,总算大致弄清楚了,下面详细说一下用法: 目录结构: docs根目录下有一个README.md.chinese文件夹.english文件夹 最简侧边栏: sidebar: { '/language/chinese/': [ '', //该目录下的README.md文件 'a', //该目录下的a.md文件 'b' //该目录下的a.md文件 ],

  • Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客

    VuePress vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档. 一个基于 Vue SSR 的静态站生成器,本来的目的是爽爽的写文档,但是我发现用来撸一个人博客也非常不错. 这是VuePress的官方文档 上手搭建 你可以跟着文档上的例子自己玩一玩,不过由于VuePress的文档也是用VuePress来实现的,所以我取巧直接拿VuePress仓库中的docs目录拿来玩耍. 1.首先安装VuePr

  • 使用vuepress搭建静态博客的示例代码

    什么是vuePress vuePress是以vue驱动的主题系统的简约静态网站生成工具(拥有自己的默认主题). veuPress由vue,vue-router,webpack驱动的单页面应用,每个markdonw文件都使用markdonw-it编译为html文件,然后作为vue组件的模板来处理. 中文官网 VuePress仓库 项目地址 VuePress 有很多优点: 界面简洁优雅(个人感觉比 HEXO 好看) 容易上手(半小时能搭好整个项目) 更好的兼容.扩展 Markdown 语法 响应式布

  • 如何使用VuePress搭建一个类型element ui文档

    网站成果样式 项目书写步骤 github地址:https://github.com/xuhuihui/dataCom 官网:http://caibaojian.com/vuepress/guide/getting-started.html 参考文章:https://www.jb51.net/article/156259.htm 前言:我先git clone官方github,运行查看完整效果. 再根据官网介绍和参考文章,结合完整的代码,自己一步步配置内容.最后,参考element的设计样式,修改并

  • 超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法

    五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了. 记得最后一定要看注意事项! Vuepress介绍 官网:https://vuepress.vuejs.org/ 类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽.当然搭建成博客也不成问题. Vuepress特点 响应式,也可以自定义主题与hexo类似 内置markdown(还增加了一些扩展),并且可以在其使用Vue组件 Google Analytics 集成 PWA 自动生成Service Worker 快速上

随机推荐