搭建我的博客(扩展)

前言

昨天中午写了篇博文使用VuePress快速搭建我的博客，其中扩展提到留言板的功能,因此这算是续集了,下图是昨天立的flag

那今天趁着中午午休就给安排上。

留言板

增长留言板tab

在config.js配置中的nav里增长一个link配置项

{ "text": '留言板', "link": '/blogs/views/messageBoard.html', "icon": 'reco-suggestion' }
复制代码

实现效果：

这时候是有增长这个留言板模块，可是没有对应功能，因此请往下看。

reco主题关于留言板的实现(这部分可跳过，也可点击查看详情)

→点击查看详情←

首先选的主题[vuepress-theme-reco](https://vuepress-theme-reco.recoluan.com/)里是有提供这个插件的

主题内置评论插件 @vuepress-reco/vuepress-plugin-comments，能够根据本身的喜爱选择 Valine 或者 Vssue；

若是你想默认不加载评论，而只在某些页面显示评论功能，能够在 valineConfig 或 vssueConfig 中设置 showComment: false，并在须要展现评论的页面 设置 isShowComments: true。

若是仅是某篇文章不想设置开启评论功能，能够在 front-matter 设置 isShowComments: false。

1. 浏览量 仅在使用 Valine 时显示；
2. 由于 浏览量 须要在页面加载时去调用相关接口，因此列表页的全部数据会一块儿加载下来，若是文章数量不少会影响加载速度，因此在 1.2.0 以后去掉文章列表的浏览量。

其余参数参考 Valine配置。

Valine

从Valine官网也能够发现

因此咱们打开leancloud官网建立应用去获取APP ID 和 APP Key。这里按步骤注册和验证邮箱而后就能够创建本身的应用，能够在设置中查看本身对应的appid和appkey。

配置

在博客上的config.js增长配置

module.exports = {
  theme: 'reco',
  themeConfig: {
    valineConfig: {
      appId: '...',// your appId
      appKey: '...', // your appKey
    }
  }  
}
复制代码

配置后的效果：

能够从上图发现能够留言和回复，并且多了个浏览数。到这就完成了博客留言板的实现，代码已更新上传。

持续更新中...

我理想中的博客我也没底 就是想到什么加什么 只但愿它愈来愈好 后续持续更新内容都将放在本文。下一步应该是朝着美化博客页面去了，增长一些背景和动效，就像上篇中提到的案例。

结束语

附上博客和模板预览连接

• 个人博客
• 博客模板预览

而后又是不要脸的求点赞!

---

求点赞！求点赞！求点赞！