vuepress 使用心得

吃可爱长大的小学妹 提交于 2019-12-17 17:12:25

vuepress 是一款可以用在项目中进行文档开发的工具,它高效、便捷。在使用过程中,有以下心得记录下,以便后期查阅,

1、markdown 要熟悉。

在整个开发中,文字性的编写全靠使用markdown工具。它既可以用文档中的标题生成侧边栏的导航索引,又可以将vue与markdown结合起来,渲染出所需求的东西。

2、侧边栏生成

// 生成侧边栏导航的索引的因素一部分取决于在docs/.vuepress/config文件sidebar和sidebarDepth的配置
module.exports = {
    title:"11",   // 标题
    description: "11", // 描述
    base:'/docsViews/',
    head: [
        ['link', { rel: 'icon', href: '/img/logo.ico' }],
        ['link', { rel: 'manifest', href: '/manifest.json' }],
    ],   // 额外需要注入到当前页面的标签
    themeConfig: {
        nav: [
            { text: '主页', link: '/' },            
            { text: '关于', link: '/about/' },
            { text: 'Github', link: 'https://www.github.com' },
        ],
        sidebar: 'auto',
        sidebarDepth: 2,
        lastUpdated: 'Last Updated', 
    },
}

sidebar具体的配置方法,可参见官方文档;想要根据文档中的标题级别自动生成侧边栏,有两种方法:

//1、在.md文档顶部标注:
---
sidebar: auto
---
// 2、在config文件中的themeConfig中配置
module.export = {
    ...
    themeConfig: {
        sidebar:auto;
    }
}

sidebarDepth设置的值表示侧边栏生成索引嵌套层级。侧边栏显示从H2开始,最多显示到H3,因此,sidebarDepth可选值有:

0:禁用标题(header)链接

1:默认值,表示只显示H2的标题

2:最大值,同时提取H2和H3的标题值

3、配置链接是,READEME.md文件时,不用写READEME的名称,只需要写到它所在的目录即可,但是其他不叫READEME的文档,需要写对应的文件名称

// 1、 docs/myword/READEME.md   写成  '/myword/'
// 2、docs/myword/First.md      写成  '/myword/First/'

4、vuepress中tip warning danger 和 markdown中的块引用,两个看起来只是颜色背景不同,但是在使用的写法上是不一样的。

5、

 

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!