四、开始输入文章吧
按照上面进行配置,一个基本的博客就搭建好了,现在就可以开始疯狂输入文章了,所有的文章只需要以.md
文件格式放在blogs
文件夹下即可
我们创建一篇文章试试吧~
--- title: 我的第一篇文章 date: 2021-05-07 categories: - 分类1 tags: - 标签1 - 标签2 --- 这是我的第一篇文章
这里有四个属性可以配置,分别是title
、date
、categories
、tags
这四个属性在页面上的体现如下图所示:
其中,date
的时间也会在时间轴中呈现出来,即你所有的文章会按date
的时间从上到下按时间新->旧
的顺序进行排序
另外,我们本文使用的主题框架还为文章提供了一个很不错的功能:加密,只需要在文章中给keys属性赋值一个md5
加密后的字符串即可
比如我们将密码设为zero2one
,那么打开在线md5加密 (opens new window)[5]网站,将密码输入到框中,就能得到一串密文,该密文就是我们要设置的keys
的值
--- title: 我的第一篇文章 date: 2021-05-07 categories: - 分类1 tags: - 标签1 - 标签2 keys: - 'ababf713be53f3d10366196bf0297c30' --- 这是我的第一篇文章
来看下效果:
五、添加评论模块
其实这个主题框架已经内置了评论插件@vuepress-reco/vuepress-plugin-comments
,我们需要做的就是做一些额外的配置
首先去Valine官网 (opens new window)[6]注册一下Valine
账号,注册好后进行登录,然后进入控制台,点击左下角创建应用
应用创建好以后,进入刚刚创建的应用,选择左下角的设置
>应用Key
,然后就能看到你的APP ID
和APP Key
了:
拿到APP ID
和APP Key
后,我们来到我们项目中.vuepress/config.js
中的themeConfig
属性中,按如下设置即可:
module.exports = { // ... themeConfig: { // .... valineConfig: { // valine 评论功能配置信息 appId: '在这输入你的appid',// your appId appKey: '在这输入你的appKey', // your appKey placeholder: '尽情留下你想说的话吧~', // 评论框占位符 avatar: 'wavatar', // 评论用户的头像类型 highlight: true, // 代码高亮 recordIP: true, // 记录评论者的IP }, } // ... }
这样我们就能看到我们每篇文章的最底部都有留言功能了
当然如果我们不想让某篇文章有留言板,也可以设置isShowComments
属性为false
即可
--- title: 我的第一篇文章 date: 2021-05-07 categories: - 分类1 tags: - 标签1 - 标签2 keys: - 'ababf713be53f3d10366196bf0297c30' isShowComments: false --- 这是我的第一篇文章
此时留言板就不存在了
六、总结
到此为止,基本上一个博客该有的功能就都具备了。其实本文介绍的这个主题脚手架他还提供了一个插件广场(支持实现各种各样的功能),目前这个插件广场中有:打赏插件、回到顶部插件、音乐播放器插件、可爱光标插件、流程图插件等等
最后,大家也可以访问一下我搭建的个人博客[7] ,我正在我的个人博客里打造一套完整的宝典,欢迎关注~