很多朋友问我用什么搭建了我的开源项目文档网站。事实上，它是用Docsify构建的。详情请参考如何编写优雅的开源项目文档。Docsify基本够搭建一个系统的文档网站了，但是有时候我们既有系统的文章，也有零散的文章。如果我们把所有的文章都挂起来，看起来有点乱。这时候，我们可能需要搭建一个类似于知识库的网站。最近发现VuePress可以用来搭建一个强大的文档网站，推荐给大家！SpringBoot实战电商项目商城（50k+star）地址：https://github.com/macrozheng/mallVuePress简介VuePress是一个Vue驱动的静态网站生成器。与我们Docsify动态生成的网站相比，对SEO更加友好。使用VuePress有以下优点：使用Markdown写文章，程序员可以写得很流畅，而且配置网站非常简单。我们可以在Markdown中使用Vue组件，如果你熟悉Vue，这会非常方便。网站打包时，会为每个页面预渲染静态HTML，性能好，也有利于SEO。Vdoing主题一般我们在使用VuePress搭建网站的时候，都会选择一个主题。这里选择的是vuepress-theme-vdoing，一个简单高效的知识管理&博客主题，搭建一个文档网站绰绰有余。学了技术如何打破旧的遗忘？尝试使用Vdoing构建知识库！它可以帮助我们更好地管理知识，快速找回遗忘的知识点。使用Vdoing主题有以下优势：知识管理：由于主题具有分类、分类、标签等功能，可以轻松整合结构化或碎片化的内容。简洁高效：以Markdown为中心的项目结构，内置自动化工具，事半功倍。沉浸式阅读：专为阅读而设计的UI，结合多种颜色模式、可关闭侧边栏和导航栏，为您带来沉浸式阅读体验。效果演示先来看看成品效果。共有三种不同的模式可供选择。还不够酷吗？通过Vdoing构建网站非常简单，即使您不熟悉Vue。首先，我们需要去Vdoing官网下载项目。下载地址为：https://github.com/xugaoyi/vu...下载完成后导入IDEA。由于是Vue项目，导入成功后，需要使用如下命令安装依赖。然后以开发模式运行；#installnpminstall#运行npmrundev运行成功后随便找篇文章体验一下，界面挺好的，访问地址：http://localhost:8080/也支持主题切换，比如切换到深色模式.配置由于Vdoing本身就是一个完整的网站，有很多文章和配置是我们不需要的，所以我们只好替换这些文章，自定义这些配置。我们先来看看我定制的主页的效果。这个主题很简单，看起来很舒服；项目文件基本都在docs目录下，我们来看看这些文件的作用；docs│index.md--首页配置├─.vuepress--用于存放全局配置、组件、静态资源等││config.js--配置文件入口文件││enhanceApp.js--客户端应用增强│├─config││head.js--配置注入页面
││htmlModules.js--插入自定义html模块││nav.js--顶部导航栏配置││plugins.js--插件配置││主题配置。js--主题配置│├─public--静态资源目录││└─img--用于存放图片│├─styles││palette.styl--主题demo配置│└─<结构化目录>├─@pages--自动生成的文件夹│archivesPage.md--存档页面│categoriesPage.md--分类页面│tagsPage.md--标签页面├─images--可以用来存放自己的图片└─_posts--专用文件夹用于存放零碎的博客文章不会自动生成目录。SpringBoot大家都用过。俗话说约定好于配置。Vdoing也有这种说法。如果我们要根据目录结构自动生成文章目录，需要给目录文件加上序号，比如下面的目录；在这种目录结构下，一级目录称为列，二级目录是列的内容。这些列彼此独立。上面的目录结构会生成下面结构的一侧，同时右边的大纲栏也会生成；如果要在栏目中添加目录页面，可以在00.目录页面文件夹中添加02.malllearningtutorial.md作为目录。目录页内容如下，permalink可以指定目录页的永久路径；---pageComponent:name:Catalogdata:key:02.mall学习教程imgUrl:/img/ui.pngdescription：商城学习教程，架构、业务、技术要点全面解析可以通过以下地址访问目录页面：http://localhost:8080/mall-le...当然也可以修改导航bar配置nav.js，访问起来会方便很多；module.exports=[{text:'首页',link:'/'},{text:'商城学习教程',link:'/mall-learning/',items:[{text:'序言',link:'/pages/72bed2/'},{text:'Architecture',link:'/pages/c68875/'},{text:'Business',link:'/pages/c981c1/'},{text:'Technicalpoints',link:'/pages/fab7d9/'},{text:'Deployment',link:'/pages/db2d1e/'},],}]添加成功后，导航栏显示如下，点击导航栏跳转到该目录；其实也可以在首页index.md中添加功能，实现快速访问。在这里，我们创建了三个功能；---home:true#heroImage:/img/web.pnghero文:macrozheng的blogtagline:Java后端技术博客，积步成千里，向每一位爱学习的人致敬。features:#optional-title:malllearningtutorial详情：mall学习教程，全面解析架构、业务、技术要点。link:/mall-learning/imgUrl:/img/ui.png-title:SpringCloudLearningTutorial详情：SpringCloudAlibaba、分布式事务Seata等大部分核心组件使用的一套SpringCloud教程。链接：/springcloud-learning/imgUrl：/img/other.png-标题：K8S学习教程详解：真正的K8S实战教程，专为Java入门人士打造！link:/springcloud-learning/#可选imgUrl:/img/web.png#可选---首页显示效果如下；每次我们为一篇文章创建Markdown文件时，都会自动生成frontmatter，比如下面的格式；---title:mall整合SpringBoot+MyBatis搭建基础骨架日期：2021-08-1916:30:11permalink:/pages/c68875/categories:-mall学习教程-架构标签：-SpringBoot-MyBatis---下面分别介绍这几个属性的作用：title：文章标题，默认为文件名；date：文章日期，默认为文件创建日期；permalink：文件访问永久链接，可自行修改；categories：文章分类，自动根据目录生成；tags：文章标签，方便碎片化文章的查找。仔细看文章列表，会发现有的文章会显示摘要，有的则不会。我们可以通过注解来控制摘要的显示。注释前的内容将作为摘要显示；文章列表是否显示摘要对比如下：如果要修改文章的作者信息、侧边栏是否折叠、社交信息、页面底部的版权信息等，可以修改主题配置文件themeConfig.js；//主题配置module.exports={nav,sidebarDepth:2,//侧边栏显示深度，默认1，最大2（显示为h3标题）logo:'/img/avatar.png',//导航栏logorepo:'macrozheng',//在导航栏右侧生成Github链接searchMaxSuggestions:10,//搜索结果显示最大数量lastUpdated:'LastUpdate',//启用更新时间并配置前缀文本字符串|boolean（值为git提交时间）docsDir:'docs',//已编辑文件夹editLinks:false,//启用编辑editLinkText:'editing',sidebar:{mode:'structuring',collapsable:false},//侧边栏“结构化”|{模式：'结构化'，可折叠：布尔值}|'汽车'|自定义提示：目录页数据依赖结构化侧边栏数据，如果不设置'structuring'，将无法使用目录页author:{//文章默认作者信息，可单独配置在md文件中{name:String,link:String}name:'macrozheng',//必填链接:'https://github.com/macrozheng',//可选},blogger:{//博主信息，显示在侧边栏首页头像：'/img/avatar.png'，名称：'macrozheng'，slogan:'这家伙很懒，什么都没写...',},social:{//社交图标，显示在博主信息栏和页脚栏中//iconfontCssFile:'//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css',//可选，阿里图标库在线css文件地址，没有主题的图标可以随意添加:[{iconClass:'icon-github',title:'GitHub',链接:'https://github.com/macrozheng',},{iconClass:'icon-gitee',title:'Gitee',链接:'https://gitee.com/macrozheng',},{iconClass:'icon-juejin',title:'掘金',link:'https://juejin.cn/user/958429871749192',}],},footer:{//页脚信息createYear:2019,//博客创建年份版权信息：'marcozheng|