Vuepress文档生成器

2019-2-17 22:12:12 710 views

成果展示

Vuepress文档

https://v0.vuepress.vuejs.org/zh/  

文档的应用

Vuepress的功能比较强大可用用作文档也可以制作博客,本文主要讲解我对文档的理解的实践及踩坑。

我的踩坑

vuepress比较强大,我主要用来写文档。由于第一次接触markdown语法,有些比较新奇。

主要用到了使用了 生成导航,生成侧边栏。在生成侧边栏遇到了点问题。

目录结构为

通过.vuepress/config.js中 themeConfig. sidebar 来配置左边侧边栏。这里我用到了侧边栏分组。

 
sidebar: [{
title: "pc模块",
collapsable: true,
children: [
'/pc/',
'/pc/test',
]
}, {
title: "moblie模块",
collapsable: true,
children: [
'/mobile/',
'/mobile/one',
'/mobile/two',
]
}]

但是这样,还是生成不了侧边栏,通过设置themeConfig. displayAllHeaders 后才显示

displayAllHeaders: true, // 侧边栏只会显示由当前活动页面的标题(headers)组成的链接,你可以将 themeConfig.displayAllHeaders 设置为 true 来显示所有页面的标题链接: 文档地址https://v0.vuepress.vuejs.org/zh/default-theme-config/#%E4%BE%A7%E8%BE%B9%E6%A0%8F

最后附上config.js文件

 
module.exports = {
title: '网站标题',
description: '网站描述',
host: '192.168.31.66',
// 注入到当前页面的 HTML <head> 中的标签
head: [
['link', {
rel: 'icon',
href: '/favicon.ico'
}], // 增加一个自定义的 favicon(网页标签的图标)
],
base: '/',
markdown: {
lineNumbers: true // 代码块显示行号
},

// 导航
themeConfig: {
repo: 'akbq2008/Components',
// 将会自动在每个页面的导航栏生成生成一个 GitHub 链接,以及在页面的底部生成一个 "Edit this page" 链接。
repoLabel: '查看源码',
editLinks: true,
// 默认为 "Edit this page"
editLinkText: '帮助我们改善此页面!',
serviceWorker: {
updatePopup: true,
//将开启一个能够刷新内容的弹窗。当网站更新(即 Service Worker 更新)时,它会提供一个 refresh 按钮,允许用户立刻刷新内容。
// 如果设置为 true, 默认的文本配置将是:
updatePopup: {
message: "有新的资源可用",
buttonText: "点击刷新"
}
},
lastUpdated: 'Last Updated', //最后更新时间
displayAllHeaders: true,
// 侧边栏只会显示由当前活动页面的标题(headers)组成的链接,你可以将 themeConfig.displayAllHeaders 设置为 true 来显示所有页面的标题链接:
sidebarDepth: 2, // e'b将同时提取markdown中h2 和 h3 标题,显示在侧边栏上。
lastUpdated: 'Last Updated', // 文档更新时间:每个文件git最后提交的时间
nav: [ // 内部链接 以docs为根目录
{
text: '我的博客',
link: 'https://www.suanliutudousi.com/'
}, // 外部链接
// 下拉列表
{
text: 'GitHub',
items: [{
text: 'GitHub地址',
link: 'https://github.com/akbq2008'
}
]
}
],
sidebar: [{
title: "pc模块",
collapsable: true,
children: [
'/pc/',
'/pc/test',
]
}, {
title: "moblie模块",
collapsable: true,
children: [
'/mobile/',
'/mobile/one',
'/mobile/two',
]
}]
}
}
2

2 Comments

  • 陈沩亮网络营销 2019年8月2日 at 下午7:14

    你好!你的网站内容不错,对用户有帮助。

    我的网站定期更新原创文章,Alexa排名13万左右,希望和你交换友情链接。

    我暂先给你添加链接了 ^_^

    URL:https://www.chenweiliang.com/
    链接文字:陈沩亮网络营销

    如能交换友情链接,请回复本邮件 ^_^

    • akbq2008 2019年8月6日 at 下午4:14

      好的,已加

发表评论

电子邮件地址不会被公开。 必填项已用*标注

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。