手把手教你用vuepress搭建自己的网站(2)
虽互不曾谋面,但希望能和您成为笔尖下的朋友
以读书,技术,生活为主,偶尔撒点鸡汤
不作,不敷衍,意在真诚吐露,用心分享
点击左上方,可关注本刊
标星公众号（ID：itclanCoder）
如果不知道如何操作
点击这里,标星不迷路
页面具体内容配置
基本配置
要让你的网站显示内容, 就需要进行配置, 需要在.vuepress文件夹下新建一个总的配置文件config.js, 这个文件的名字是固定的,即.vuepress/config.js，它导出一个 JavaScript 对象,使用的是Commonjs文件导入导出的规范 如有对 CommonJS 使用疑惑可参考文档:commonJs 使用规范
提示
vuepress 依赖于 NodeJS服务启动,因为 NodeJs 现不支持模块化,所以在 vuepress 中,是无法使用 import 与 export 语法的
进入.vuepress文件夹,创建config.js文件
cd .vuepress
touch config.js
config.js最基础的配置文件内容如下所示
module.exports = {
title: 'itclanCoder网站',
description: 'itclanCoder的网站,专注前端技术栈分享'
}
如果这时在itclan根目录下的终端下,运行npm run docs:dev或者yarn docs:dev,会出现页面404 页面,如下所示
这是因为vuepress默认打开的是docs 下的README.md文件, 由于你没有创建,所以找到的是vuepress 默认提供的404页面
| 文件的相对路径 | 页面路由地址 |
|---|---|
| /README.md | / |
| /guide/README. | /guide/ |
| /config.md | /config.html |
在VuePress中README.md文件,你可以把它视为xxx.vue文件,md 文件中既可以写js,css,html,如果你发现页面 404,排除下路由下是不是没有添加README.md文件的
在docs目录下创建README.md文件, 再次npm run dev,就可以看到运行起来的效果, 如下图所示
当然,您现在看到的页面是一片空白,那是因为docs根目录下的README.md中没有任何内容,但现在至少不是 404 了,离曙光又近了一步
设置封面启动页
有时候,当别人进入您的网站时,设置一个启动页,这样显得挺友好,而不是一上来,就放一堆的内容,看得令人眼花缭乱
在vuepress默认的主题中提供了一个首页（Homepage）的布局 (用于您网站的主页)。如果您想要使用它，需要在您项目的根级中README.md的YAML front matter指定 home: true,如下所示
---
home: true
heroImage: /images/itclancoder.jpeg
heroText: itclanCoder
tagline: 书以启智,技于谋生,活出斜杠
actionText: 开始阅读 →
actionLink: /latestarticle/
features:
- title: 读书
details: 随笔川迹,文以载道,虚心学习,自省自知,多读一页书,就少一分无知,多一分智慧
- title: 技术
details: 用心记录技术,走心分享,始于前端,不止于前端,励志成为一名优秀的全栈工程师,真正的实现码中致富
- title: 生活
details: 无分享,不生活,一个具有情怀的技匠,路上正追逐斜杠青年的践行者
footer: MIT Licensed | Copyright © 2020-present 随笔川迹
---
效果如下所示:
当然,您现在看到,网站上有图片没有正常的显示,那是因为没有添加图片造成的,网站上一些图片,logo 等静态资源可以放到.vuepress目录下的一个public目录下的
这个public是自己创建的,vuepress并不会自动帮你生成,在/.vuepress/public/images中放入您想要的图片就可以了的
警告
这个
public目录文件夹的名称是固定的,就像docs目录下的config.js一样,名称是固定的在引入图片时,直接/所要引入的图片路径目录就行,不用带
public,它会自动的去找public下的静态资源文件vuepress中所有的图片文件名,以及目录名不要带有中文,应该使用英文状态下的格式,否则编译就报错,在您以后用md写文章时,同样引入图片时,图片的后缀名都不能带有中文字符
配置导航栏
导航栏中有页面标题、搜索框、 导航栏链接、多语言切换、仓库链接，它们都是可以直接通过配置出来的,在 config.js 中添加如下配置
// .vuepress/config.js
module.exports = {
title: 'itclanCoder网站',
description: 'itclanCoder的网站,专注前端技术栈分享',
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{ text: '前端', link: '/fontend/' },
{ text: '小程序', link: '/wechat/' },
{ text: '面试', link: '/interview/' },
{ text: '关于', link: '/about/' },
]
]
}
}
警告
路由后面的/fontend/后面的反斜杠不能少,否则依旧会是404 的 配置完后,如下所示:
当然,你如果现在点击导航栏,会发现是 404 页面,那是因为导航路由下面没有README.md文件 目录树结构如下所示
├─package.json
├─docs
| ├─README.md
| ├─minprogram // 与.vuepress同级的每一个文件夹都是一个nav,以后写文章都是在这里里面写
| | └README.md
| ├─interview
| | └README.md
| ├─fontend
| | └README.md
| ├─about
| | └README.md
| ├─.vuepress // 所有与导航侧边栏vuepress相关配置都会在这个文件夹里面
| | ├─config.js
| | ├─public // 公共静态资源,logo,自定义样式等
| | | ├─images
| | | | ├─itclancoder.jpeg
| | | | └logo.png
与您的电脑上打开的是一一对应的,如下所示
其中导航栏的链接分为三种:一级 nav,链接,二级下拉菜单,带标题的多级分类菜单
一级
nav,直接带路由即可
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{ text: '前端', link: '/fontend/' },
]
]
}
配置完如下所示:
如果想
nav直接是链接,即路由直接是链接地止即可
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{ text: '前端', link: '/fontend/' },
{ text: '网站', link: 'http://doc.itclan.cn' }
]
]
}
配置完,如下所示
如果想
nav二级下拉菜单,如下配置,link的属性值带有链接,会直接是链接,若不是那就是路由,在vuepress中提供了一个items属性,配置二级导航如下所示
themeConfig:{
nav: [{text: "主页", link: "/" },
{ text: "前端",
items: [
{ text: "html", link:"/fontend/html/"},
{ text: "css", link:"/font/css/"},
]
}
],
}
配置完后,如下所示
如果你想要二级菜单带有标题,分类的菜单形式,如下配置
themeConfig:{
nav: [{text: "主页", link: "/" },
{ text: '网站', link: 'http://doc.itclan.cn' }, // 后面直接是链接
{ text: "前端", // 二级菜单配置
items: [
{ text: "html", link:"/fontend/html/"},
{ text: "css", link:"/font/css/"},
]
},
{
text: "工具",
items: [
{
text: "思维导图",
items: [
{ text: "zhiMap", link: "https://zhimap.com/home" },
{ text: "processOn", link: "https://www.processon.com/" },
{ text: "gitmind", link: "https://gitmind.cn/" }
]
},
{
text: "文档管理",
items: [
{ text: "语雀", link: "https://www.yuque.com/dashboard" },
{ text: "腾讯文档", link: "https://docs.qq.com/desktop" }
]
},
{
text: "实用工具",
items: [
{ text: "声享-做ppt", link: "https://ppt.baomitu.com/" },
{ text: "马克鳗-量标注", link: "http://www.getmarkman.com/l" }
]
}
]
},
],
}
配置完后,结果如下所示
你可以按照这个类似的结构,无限制的配置下去
光有 nav 导航是不够的,下面来配置一下侧边栏,怎么配置侧边栏才是重中之重
配置侧边栏-slider
自动获取侧边栏内容
如果你希望自动生成当前页面标题的侧边栏, 可以在 config.js中配置来进行配置启动
// .vuepress/config.js
module.exports = {
themeConfig:{
sidebar: 'auto',
}
}
侧边栏配置地止: 侧边栏配置地止https://www.vuepress.cn/theme/default-theme-config.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F
警告
默认情况下，侧边栏会自动地显示由当前页面的标题（headers）组成的链接，并按照页面本身的结构进行嵌套，您可以通过 themeConfig.sidebarDepth 来修改它的行为。
默认的深度是 1，它将提取到h2的标题，设置成 0 将会禁用标题（headers）链接，同时，最大的深度为 2，它将同时提取h2 和h3 标题,如果想要额外拓展,支持h1~h6,在 markdown 配置拓展中markdown.extractHeaders,如下所示
module.exports = {
markdown: {
extractHeaders: [ 'h2', 'h3', 'h4','h5','h6' ]
}
}
展示每个页面的侧边栏
如果您希望为不同的页面组显示不同的侧边栏, 就和官网一样, 点击导航中的哪个 nav,对应就显示对应的的侧边栏,目前目录有 fontend \ interview \ minprogram 等, 这些目录下都存放着多个 md文件,就是我们写的具体的文章
module.exports = {
themeConfig:{
sidebar:{
{
title: "JavaScript",
collapsable: true,
children: [
["js/", "目录"],
["js/scope", "理解Js中的作用域-作用域链以及闭包"]
]
},
{
title: "工具",
collapsable: true,
children: [
["tools/", "目录"],
["tools/vuepress-build-blog", "手把手教你用vuepress搭建博客"]
]
}
}
}
}
配置完后,具体效果如下所示
目前的,项目目录结构如下所示
├─package.json
├─docs
| ├─README.md
| ├─minprogram
| | └README.md
| ├─interview
| | └README.md
| ├─fontend
| | ├─README.md
| | ├─tools
| | | └vuepress-build-blog.md
| | ├─js
| | | └scope.md
| ├─about
| | └README.md
| ├─.vuepress
| | ├─config.js
| | ├─public
| | | ├─images
| | | | ├─itclancoder.jpeg
| | | | └logo.png
上面的目录树结构中,fontend文件夹下的tools与js都是两个文件夹,下面对应的有md文件,默认会以README.md为默认的路由 至此
你如果仔细看看config.js里面的一些配置的话,你会发现,代码配置越来越多,当你新增nav,或者侧边栏时,nav与slidebar,会越来越长,会很难受
拆分-config
在拆分之前,你可以了解下CommonjS中模块化导入导出的规则就可以了,这里你只需要知道,在一个文件中导入一个文件使用require方式,而导出一个对象,变量,使用的是module.exports就可以了的
├─config.js // 主要入口配置文件
├─nav.js // 导航栏配置
├─sidebar.js // 侧边栏配置
├─themeconfig.js // 默认主题相关配置
├─public
| ├─images
| | ├─itclancoder.jpeg
| | └logo.png
具体如下示例:nav.js
const navs = [
{
text: "首页",
link: "/"
},
{
text: "前端",
items: [
{ text: "CSS", link: "/fontend/css/" },
{ text: "JavaScript", link: "/fontend/js/" },
{ text: "开发工具", link: "/fontend/tools/" }
]
},
{
text: "小程序",
items: [
{ text: "微信小程序", link: "/wechat/minprogram/" },
{ text: "云开发", link: "/wechat/cloudev/" }
]
},
{ text: "关于我", link: "/about/" }
];
module.exports = navs;
而在config.js中,通过require的方式引入即可,如下所示
const sidebar = require("./nav"); // 引入sidebar,后缀名xx.js可以省略
module.exports = {
themeConfig:{
sidebar:sidebar // 也可以直接就写sidebar,Es6中的简写,当键与键值同名时,可以直接写一个
}
其他,head,plugin,配置也是如此,代码与之前是没有任何改变的,只不过是对config.js进行了分割,进行了模块化管理的,导航的管理导航,侧边栏的管理侧边栏
对于更多详细的默认主题的相关配置,可以查看官方文档:默认主题相关配置https://www.vuepress.cn/theme/default-theme-config.html
有首页,导航栏,侧边栏,搜索框,最后更新时间等配置,学会了一个配置,其他配置照着文档配置就好了的
配置提醒
每尝试配置一个 API,记得在命令行终端就重新启动npm run docs:dev一下,在浏览器查看一下配置效果,目前 vuepress的热更新存在一些问题(以后官方肯定会修复)
在对 vuepress不是特别熟练的情况下,不要配置了很多选项和插件,到最后才来启动,一旦遇到一些奇葩的问题,报错,你就搞不清楚是在哪一个环节出现问题的
为什么有必要将 config 进行拆分,分割?
随着你往后想要配置的 nav,slidebar,导航栏,侧边栏,以及插件的增多,如果没有对 config.js 进行分割
该文件的配置将会越来越长,越来越臃肿,到最后,连你自己都看不下去,无法忍受了的,对于后期的代码维护,以及拓展是极其不友好的,所以在一开始,就考虑一下代码的拆分,更多的是方便自己,一劳永逸
不要觉得这个很麻烦,不抽离,越往后,越是灾难,到最后,自己可能在也不会去看了的
如果以上的讲解依然不清楚:可以研究一下:itclanCoder 博客-项目源码https://github.com/itclanCode/blogcode,按照这个结构进行配置,就好了的
限于篇幅所致,更多配配置见后文...
公众号（ID：itclanCoder）
码能让您早脱菜籍，文能让您洗净铅华
可能您还想看更多：
手把手教你用vuepress搭建自己的网站(1)
Js篇-面试题6-聊一下强缓存与协商缓存
Js篇-面试题5-如果浏览器不支持 bind 函数,实现一个函数让其兼容
Js篇-面试题2-Promise 执行顺序问题
点个在看，你最好看