博客首页
两年前,我弃用了原来的hexo博客系统,并用vuepress1.4.1版本快速搭建了自己现在的专属静态博客系统。并一直更新维护至今。博客内陆陆续续的定制了自己的个性首页和列表页,扩展了评论、footer、复制、图片预览等等博客常见功能,效果和UI实现还是让我比较满意的。但是自从vuepress升级到2.X后,就一直心动的想要将现有博客进行升级,奈何平时比较忙(懒癌晚期),所以一直没有付诸行动,最近闲下来,所有打算动起来。
这次虽然是重新从零搭建,但其实很多逻辑和1.0是相通的,所以我的博客1.0还是可以用来参考的,如果你也是vuepress1.X版本,也可以参考官方的迁移文档
简介至上
支持vue3.0,就是好用。
支持typescript,学习、开发必备技能。
vite打包,就是快。
-
多语言支持
VuePress和其它博客系统的对比可以参看官方给出的介绍
项目创建&初始化
在 中添加一些scripts
命令行内运行下面代码,就可以顺利的启动一个热重载的博客项目了
vuepress允许我们依赖来自定义页面布局;下面说一下首页
-
文件内新建文件,因为自定义的页面说白了也是一个组件,所以我们可以按照平时写vue3组件的方式去写首页内容
-
在 文件中注册Home组件
-
在一开始创建的文件内,讲自定义布局组件进行引入
到这我们的首页就生成好了,还是比较简单的对吧,别急,下面的列表页才是最复杂的地方
列表页最关键的就是要如何才能拿到所有文章的数据内容,这里我们依赖官方的插件API来实现
因为我们需要创建很多md文件,但是并不一定所有的文件都需要显示在列表页,所以我们首先要约定下什么格式的文件才是我们需要的博客文档:我们可以设置黑名单来进行排除,当然我这里用的正则匹配的方式,即是我们需要的博客文件,否则就是其他文件,不进行统计,比如:、
第一步:创建插件文件:
当然,向列表页传递数据也可以参考官方给的方案:向客户端代码传递数据
第二步:创建自定义列表布局
第三步:注册列表布局
第四步:创建列表文件,将我们的自定义布局引入进去
至此我们最重要的首页和列表页就完成了
先来看看我文章内最重要的两个
:文章自定义的描述信息,在列表页内方法可以拿到
-
就是我们文章的自定义标签,通过就可以获得了,我是在列表页用到的
我们既然可以拿到所有的文章列表的数组,那么我们就可以通过来自定义我们的分页逻辑了,还是比较简单的,对吧!
具体文章页如果只需要官方默认的布局那可以不看这部分内容,我做的事情主要是继承了官方默认布局,并扩展了阅读进度、评论、打赏、footer等功能;
创建
添加默认布局组件
好了,完成这一步后,我们所有文章页都会使用这个布局方式来渲染。
观察组建可以发现我们都是通过插槽来实现的扩展,更多布局插槽可以参考官方继承,相信聪明的博友应该能过痛过它实现更有意思的东西
评论是一个博客的灵魂,为博客提供了互动的能力,上一版博客我是用的GITALK来实现的,它是基于来实现的,所以它有一些不好的地方让我不是很满意,比如:评论无法叠楼层、需要博主先登录文章页去初始化评论功能,所以这次我决定改用基于的Giscus来实现;当然,如果你依然对情有独钟,可以参考这篇文章。
通过上一步的布局扩展发现,我们可以将评论组件放置在插槽内,贴心的问我们提供了各种常用的引用方式:、、等方式;我们可以使用自己喜欢的方式进行安装引用。
我们主要说一下、、、怎么去获得:
首先进入Giscus官网,按照流程填写必要信息,注意仓库地址不要带https,填写完后,下面就会生成必要信息,我们直接在组件内替换对应的参数就可以了
一个完整、个性、有意思的博客肯定还会有很多自定义的JS内容要实现,比如copy自动添加版权、控制台默认输出定制log、动态页面title等等;这些大部分都有第三方组件来协助我们完成这些东西,但是如果找不到我们就需要自己去写,我们以为例(这个也有三方插件,可以自行搜索):
新建文件
修改文件:
代表函数不运行在服务端(SSR)下;这个常量是Vuepress为我们提供的,更多变量参考常量
很多时候我们可能会同时写多篇笔记和文章,或者是写完后暂时不想发出去,这个时候,就需要一个草稿箱来暂时存储我们的文章,以防影响发表别的文章,我们有两种方式来实现
第一种就是修改文件,通过在代码中过滤掉特定格式的文件来实现不讲文件链接往外暴露,这种方式间接的实现了草稿箱功能,但是如果知道链接或者通过搜索功能搜索到了这个页面还是可以进去的
第二种也是我现在正在用的方式:通过官方提供的功能,它可以避免某个文件被 VuePress 处理,所以我们可以通过这个功能来实现想要的效果,我是将所有下划线开头的文件作为草稿文件的
修改
博客只有在别人能够搜索的到才有更多创作的意义,因此我们需要生成站点地图:,它做seo必不可少的文件,首先安装装这个插件;然后修改
然后我们就可以将生成的文件进行百度收录、谷歌收录、360、搜狗、Bing等等能提交的都提交下
我的源码文件和打包文件是分开来存储的,一个私有,一个公开。主要是因为源码中包含一些备注文件不太方便公开,因此为了方便,写了一个自动打包上传的方法,
Package.json中添加一个script:·"deploy": "bash deploy.sh"·,这样就可以通过一键操作了,还是比较香的