html|手把手教你用vuepress搭建自己的网站(2) java|github|web|css

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤
不作,不敷衍,意在真诚吐露,用心分享
点击左上方,可关注本刊
标星公众号（ID：itclanCoder）
如果不知道如何操作
点击这里,标星不迷路

文章图片

页面具体内容配置基本配置

要让你的网站显示内容, 就需要进行配置, 需要在.vuepress文件夹下新建一个总的配置文件config.js, 这个文件的名字是固定的,即.vuepress/config.js，它导出一个 JavaScript 对象,使用的是Commonjs文件导入导出的规范如有对 CommonJS 使用疑惑可参考文档:commonJs 使用规范
提示
【html|手把手教你用vuepress搭建自己的网站(2)】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,按照这个结构进行配置,就好了的
限于篇幅所致,更多配配置见后文...