在vuepress上搭建自己的博客——进阶1(添加登录和评论功能)

  • 当你在丰富自己的博客的时候,你想来点更加高端一点的操作,想做一个类似博客园一样的平台,那就得要登录和评论功能,看看大家对自己的博客有什么更好的看法和意见。下面就给大家介绍一下怎么给自己的博客添加登录和评论功能。

登录

VuePress 是 Vuejs 官方提供的一个快速建设文档站点的工具,在简单配置好功能后,需要做的事情就剩下写好一个个 Markdown 文档。

因为 VuePress 提供了可以在 Markdown 中使用 Vue 的能力,所以有时候,希望可以在它的文档功能基础上增加部分常规功能,比如用户登录;有团队希望公司建设的文档内容仅公司员工可查看,因为有可能会有涉及内容保密的部分

VuePress 本身的安装配置过程不再赘述,可参考官方文档,本文将介绍使用 v-dialogs 对 VuePress 增加用户登录功能的进行改造,仅作为抛砖引玉,更多的需求,大家可以自由发挥想象。

安装插件

安装 v-dialogs 插件,将会使用它的模态窗口 (Modal) 和消息通知 (Alert) 的功能

# npm
npm i v-dialogs -D

# yarn
yarn add -D v-dialogs

创建登录表单

新增 Login.vue 文件用于登录表单,它将使用模态窗口(Modal)进行展示
这是构建一个登录框,基于v-dialogs插件的。

里面有一个简单的表单判断,代码里面预埋了一些username和password,有符合的就放过了,你也可以换成你接口的逻辑。

# .vuepress\login\Login.vue






账号和密码验证通过之后,我们往STORAGE_KEY写入了一个数据,以便后续刷新页面检查之前登录结果,详细判断见下文。
helper.js
这是一个用来判断是否登录验证通过的函数,如果返回true就算是验证通过,返回false那就没验证通过了。

# .vuepress\login\helper.js

export const STORAGE_KEY = 'user_auth_xxxxxxxxxxxx'

// Do user authorization verify
export function checkAuth () 
{
  var auth = JSON.parse(localStorage.getItem(STORAGE_KEY))
  return auth && Object.keys(auth).length
}

这个是判断是否登录过的函数,说直白点,就是上面的登录成功后,会往这个key里面写一个对象值,每次调用页面之前,先走这个函数做一个检查,如果拿出来的auth是你觉得合法的,你就true通过,不然就一直继续弹登录框了。

其实这里,我们也可以根据自己的需要,给拿到的auth对象进一步做判断,当然要怎么搞就看你自己了。比如我会加一个过期时间,一个小时过期:

export function checkAuth () 
{
  var auth = JSON.parse(localStorage.getItem(STORAGE_KEY))
  console.log(auth)
  if(auth && auth.time){
    var preTime = new Date(auth.time)
    var nowTime = new Date().setHours(-1)
    if(nowTime > preTime)
    {
        return false;
    }
    return auth && Object.keys(auth).length
  }
  else
  {
    return false;
  }
}

VuePress 配置

/.vuepress 位置新增 enhanceApp.js 文件,该文件是 VuePress 对 应用级别的配置 的配置文件,文件 export default 了一个钩子函数,并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件,或者增加额外的路由钩子等

import { checkAuth } from './login/helper'
import Login from './login/Login'

export default ({
  Vue,
  options,
  router,
  siteData
}) =>  {
  Vue.mixin({
    // 请确保只在 beforeMount 或者 mounted 访问浏览器 / DOM 的 API
    mounted() {
      const doCheck = () => {
        if (!checkAuth()) {
          this.$dlg.modal(Login, {
            width: 400,
            height: 350,
            title: '请登录您的账号',
            singletonKey: 'user-login',
            maxButton: false,
            closeButton: false,
            callback: data => {
              if (data === true) {
                // do some stuff after login
              }
            }
          })
        }
      }

      if (this.$dlg) {
        doCheck()
      } else {
        import('v-dialogs').then(resp => {
          Vue.use(resp.default)
          this.$nextTick(() => {
            doCheck()
          })
        })
      }
    }
  })
}

代码中使用了 Vue.mixin 对全局进行了混入操作,所以在每个文档页面被访问后都会触发该 mounted() 生命周期进行用户权限的校验。在这里需要特别说明的是,原来对于权限检查的操作,本是希望在 Vue Router 的路由守卫中处理,但由于 浏览器的 API 访问限制 原因,Vue 插件在注册的过程中因为需要使用到浏览器的API (window 或 document),但在编译为静态文件的过程中,需要通过 Node.js 服务端渲染,因此所有的 Vue 相关代码都应当遵循 编写通用代码 的要求。简而言之,请确保只在 beforeMount 或者 mounted 访问浏览器 / DOM 的 API

v-dialogs 在注册的过程中需要使用到 document 这个对象,所以在编译的过程中会出现 document is not defined 的错误信息,基于上述的原因,对于功能权限的检查在 mounted 生命周期中执行,并将该操作进行全局混入,才能达到全局校验的效果

上述的代码编写部署并重新构建后,就会在每个文档页面中执行用户身份校验

  • 未登录,则弹出模态窗口要求输入身份信息进行校验
  • 已登录时就显示正确的文档内容
    最终效果:
    image.png

    nice~~~
    这样登录功能就好啦

评论

由于你的页面是“静态”的,你没有数据库和后端 API 的支持。但是你希望让你的页面拥有评论功能,让用户可以登录和发表评论。 代码托管平台(如 Github、Gitlab、Bitbucket、Coding 等平台,示例选择了github)提供了 OAuth API , 在它们的帮助下,Vssue 可以让用户通过这些平台的帐号登录,将评论存储在这些平台的 Issue 系统中,并在当前页面展示。
评论插件:

npm install @vssue/vuepress-plugin-vssue
npm install @vssue/api-github-v3 或者 npm install @vssue/api-github-v4

使用插件

// .vuepress/config.js

module.exports = {
  plugins: {
    '@vssue/vuepress-plugin-vssue': {
      // 设置平台,而不是 `api` 
      platform: 'github-v4',

      // 其他的 Vssue 配置
      owner: 'OWNER_OF_REPO', // 仓库的拥有者的名称
      repo: 'NAME_OF_REPO', // 存储 Issue 和评论的仓库的名称
      clientId: 'YOUR_CLIENT_ID', // 刚保存下来的  Client ID
      clientSecret: 'YOUR_CLIENT_SECRET', //  刚才保存下来的 Client secrets
    },
  },
};
  • @vssue/api-github-v3 和@vssue/api-github-v4的区别是v3不用登录,但是有调用次数限制,v4必须登录但没有次数限制 v3的platform是github,v4的是github-v4 用的是github的评论功能,所以必须有github账号

如何获取clientId和clientSecret

第一步:
登录github后点击 settings


image

第二步:点击 Developer settings

image

第三步:点击 New OAuth App

image.png

第四步:点击注册按钮

image.png

这里的Client IDClient Secret就是我们想要的了。

使用

Vssue 已经注册为 Vue 组件,你可以在你的 VuePress Markdown 文件中直接使用它。



# Vssue Demo


自动创建评论

但是这样启用的话,我们需要为每个文章手动 click to create issue 创建评论,这显然不是我们需要的。

找到我们的 config.js 在插件@vssue/vuepress-plugin-vssue配置中,手动添加如下代码:

image.png

这样就不用我们每次去点击 click to create issue了。

自动为每个页面添加 Vssue

首先我们在之前下载的依赖中的 \node_modules\@vuepress路径下的theme-default文件夹复制到.vuepress目录下,并重命名为theme

image.png

接着我们重写 默认主题的样式,也就是 theme 文件夹下 layouts文件夹下的 Layout.vue组件。
找到该组件的 Page 组件部分,在插槽下方把我们的 组件给写进去,即可在每个页面都拥有评论。

这里的 :options="{ locale: 'zh' }" 意思是把地区改为中国。
由于该组件默认没有VuePress的居中效果,我们在页面中找了一个带有居中效果的类 copy 过来即可居中。

在这里插入图片描述

最终效果:


image.png

非常nice,你也试试哇~~~

你可能感兴趣的:(在vuepress上搭建自己的博客——进阶1(添加登录和评论功能))