手牵手基于vuepress2搭建自己的博客，并集成了评论、打赏、搜索等常用功能。目前独家静态博客系统。并且一直更新维护至今。博客不断定制了自己的个性化首页和列表页，扩展了评论、页脚、复制、图片预览等博客常用功能，效果和UI实现还是比较满意的。但是自从vuepress升级到2.X后，一直急于升级现有的博客，但平时比较忙（懒癌晚期），所以一直没有付诸行动。最近有空，打算搬家。这次虽然是从头开始重建，但其实很多逻辑都和1.0差不多，所以我的博客1.0还是可以借鉴的。如果你也是vuepress1.X版本，也可以参考官方迁移文档VuePress2亮点介绍至尊支持vue3.0，简单易用。支持打字稿，学习和发展必要的技能。Vite包很快。多语言支持VuePress等博客系统可以对比官方介绍ProjectConstructionProjectCreation&Initialization#创建并进入博客文件mkdirvuepress-blogcdvuepress-blog#初始化gitarninit#安装vuepress本地依赖yarnadd-Dvuepress@next#添加忽略内容echo'node_modules'>>.gitignoreecho'.temp'>>.gitignoreecho'.cache'>>.gitignore#添加第一个md文档mkdirdocsecho'#HelloVuePress'>docs/index.md添加package.json中的一些脚本{"scripts":{"docs:dev":"vuepressdevdocs","docs:build":"vuepressbuilddocs"}}在命令行运行如下代码，即可顺利启动一个热重载的博客项目yarndocs:dev搭建首页vuepress允许我们依赖Frontmatter->layout来自定义页面布局；再来说说首页docs/.vuepress/Layouts文件中新增的Home.vue文件，因为自定义页面说白了也是一个组件，所以我们可以按照平时写vue3组件的方式来写首页内容Homepage在docs/.vuepress/client.ts文件中注册Home组件import{defineClientConfig}from'@vuepress/client'importHomefrom'./Layouts/Home.vue'exportdefaultdefineClientConfig({layouts:{Home,}})在一开始创建的docs/index.md文件中，来自定义布局组件介绍---title:首页布局：首页---至此，我们的首页就生成了，比较简单吧，不用着急，下面的列表页是最复杂的列表页列表页面最重要的是如何获取所有文章的数据内容。这里依赖官方的插件API来实现，因为我们需要创建很多md文件，但是并不是所有的文件都需要在列表页显示出来，所以我们首先要约定好文件是什么格式的我们需要的博客文件：我们可以设置一个黑名单排除，当然我这里使用的正则匹配方式是https://slbyml.github.io/**/**就是我们需要的博客文件，否则就是是其他文件，没有统计，比如：https://slbyml.github.io/,https://slbyml.github.io/*.html第一步：创建插件文件。vuepress/plugins/page.js:exportdefault{name:'vuepress-plugin-page',onInitialized(app){constlists=[]app.pages.forEach((item:Page)=>{//排除不必要的pageif(/^\/[\s\S]*\/[\s\S]*/.test(item.path)){//为了减少传输大量不需要的数据lists.push({path:item.data.path,title:item.data.title,frontmatter:item.data.frontmatter,git:item.data.git})}//将组装我们的列表传递给列表页面if(item.path==='/list.html'){item.data={...item.data,lists}}});//这里需要简单的排序lists.sort((s1,s2)=>{return+newDate(s2.git.lastUpdated)-+newDate(s1.git.lastUpdated)})}}当然，要将数据传输到列表页，你也可以参考官方的解决方案：传递数据给客户端代码步骤二：创建自定义列表layout.vuepress/Layouts/List.vue{{item.title}}{{item.frontmatter.description}}
