本地安装运行
手动创建目录，或者命令创建：
mkdir vuepress-starter && cd vuepress-starter
用 yarn 或者 npm 继续初始化
yarn init # npm init
安装本地依赖，规范不再推荐全局安装 项目依赖了 webpack 3.x 不推荐使用 npm
yarn add -D vuepress # npm install -D vuepress
特殊用法
config.js 配置文件引用函数
description: `A simple VuePress project deployed with ${PRODUCT_NAME}.`,
基本配置
// dcos/.vuepress/config.js
module.exports = {
title:"取舍", // HTML的title
description:"管鲍切思世所稀博客", // 描述
keywords:"管鲍切思世所稀博客", // 关键字
head:[ // 配置头部
[
['link', {rel:'icon', href:"/icon.png"}],
['meta', {'name':'viewport', content:"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"}]
]
],
markdown: {
lineNumbers: true, // 代码显示行号
},
dest:"./outer", // 设置打包路径
lastUpdated: 'Last Updated', // 显示更新时间
themeConfig:{
logo:"/icon.png", // 导航栏左边logo,不写就不显示
sidebarDepth: 2, // 侧边栏显示2级
nav:[ // 导航栏配置
{ text: 'vue', link: '/' },
{ text: 'css', link: '/blog/' },
{
text: 'js', // 这里是下拉列表展现形式。 items可以一直嵌套下去
items:[
text:"ES5", link:"/js/es5/",
text:"ES6", link:"/js/es6/",
]
},
{text: 'github', link:"https://github.com/1046224544"}
],
// 为以下路由添加侧边栏
sidebar: ['/', '/git', '/vue']
// 嵌套侧边栏 以对象的方式嵌套下去
// sidebar: {
// '/2019/': [
// ['','前言(2019)'],
// {
// title:"10月份",
// collapsable:false,
// sidebarDepth:2,
// children:[
// ["Nginx部署Vue项目", "Nginx部署Vue项目"],
// ["NVM自由切换Node版本", "NVM自由切换Node版本小笔记"],
// ["KTV点歌系统", "KTV点歌系统"],
// ]
// },
// {
// title:"9月份",
// collapsable:false,
// sidebarDepth:2,
// children:[
// ["综合性博客网站", "综合性博客网站"]
// ]
// }
// ],
// ...
// }
},
plugins:[
// 'axios' // 配置插件
]
}
}
添加自定义 HTML TAG 标签 比如添加统计 JS
只需要在 .vuepress/config.js 文件里添加：
head: [
'style', {}, `a[title="站长统计"]{display:none}` // 屏蔽文字
],
['script',
{
src: 'https://s9.cnzz.com/z_stat.php?id=xxxxx&web_id=xxxxx'
}
],
['script', {}, `
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?xxxxx";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
`]
]
嵌套引入
将导航栏和侧边栏单独拆分两个文件,以文件加载的方式引入,这样路由导航栏和侧边栏就可以无限嵌套,你也可以无限往下分级,建文件夹等等达到分类效果。
// docs/.vuepress/config.js
module.exports = {
...部分(同上)
themeConfig:{
nav: require('./nav'), // 引入导航栏
sidebar:require('./sidebar'), // 引入侧边栏
},
...
}
// docs/.vuepress/sidebar.js
module.exports = {
"/api/front/2019/": require('../.vuepress/frontbar/2019'), // 继续分类
"/api/front/2020/": require('../.vuepress/frontbar/2020'),
"/api/end/2019/": require('../.vuepress/endbar/2019'),
"/api/learn/koa/": require('../.vuepress/learnbar/koabar'),
"/api/learn/express/": require('../.vuepress/learnbar/expressbar'),
"/api/learn/java/": require('../.vuepress/learnbar/javabar'),
"/api/learn/es6/": require('../.vuepress/learnbar/es6bar'),
"/api/learn/vue/": require('../.vuepress/learnbar/vuebar'),
}
// docs/.vuepress/nav.js
module.exports = [
{text:"首页", link:"/"},
{
text:"技术API",
ariLabel:"技术API",
items:[
{text:"koa", link:"/api/learn/koa/"},
{text:"vue", link:"/api/learn/vue/"},
{text:"es6", link:"/api/learn/es6/"},
{text:"java", link:"/api/learn/java/"},
{text:"express", link:"/api/learn/express/"},
]
},
{
text:"日常博客",
ariLabel:"日常博客",
items:[
{text:"前端",link:"/api/front/"},
{text:"后端",link:"/api/end/"},
{text:"其他",link:"/api/orther/1.md"},
]
},
{text:"关于博客", link:"/api/builog/"},
{text:"关于作者", link:"/api/author/"},
{
text:"其他小站",
ariLabel:"其他小站",
items:[
{text:"掘金", link:'https://juejin.im/'},
{text:"SegmentFault", link:'https://segmentfault.com/'},
{text:"CSDN", link:'https://blog.csdn.net/'},
]
},
{
text:"联系",
ariLabel:"联系",
items:[
{text:"邮箱", link:"mailto:your@mail.com", target:"_blank"},
{text:"其他", link:"/api/contact/"}
]
},
{text:"GitHub", link:"http://github.com/1046224544"}
]