DIY自己的gitbook文章阅读量插件

背景

个人开发者普遍拥有属于自己的个人博客站点。常见的框架无论是Hexo
、Gitbook
，亦或是Docsify
，这些框架本身并不支持文章阅读量或者站点访问量的功能，需要各种对应的插件支持。

之前基于memfire的数据库功能实现了一个gitbook文章阅读量插件。美中不足的是，这个插件需要提供一个后端服务来连接memfire数据库。当后端服务异常时，插件也就无法工作。

但是！

最近MemFire Cloud 推出了基于Supabase与MemFireDB打造的后端服务，一个开源工具的组合，主要包含了以下功能特性：

• 兼容PG的MemFireDB数据库托管，自动拓展
• 对象存储，存储大文件，比如图像，视频等
• 身份验证和授权，用于注册用户和编辑数据库访问规则
• 自动生成的API，无需编写API
• 仪表盘，一分钟内启动和管理你的数据库

简单来说，就是不需要我自己再构建一个后端服务了！

赶紧来尝尝鲜！

概述

基于memfire推出的新特性，脱离自身后端服务来优化我们的统计gitbook文章访问量的插件。

实现

账户管理

登录/注册账户

需要在http://memfiredb.com上注册账户（已有账户跳过此步）。

应用管理

创建应用

按照提示步骤创建我们的应用

新建数据库表

进入应用，新建我们插件需要的数据库表

记录api秘钥

Anon public是客户端API密钥。它允许“匿名访问”我们的数据库，直到用户登录。登录后，密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。

在后续示例代码中，需要提供Anon public
和网址。

修改插件

仓库地址：https://github.com/TiannV/gitbook-plugin-mf-pageview

引用supabase

module.exports = {
    book: {
        assets: "./book",
        js: [
            "plugin.js"
        ],
        css: [
            "plugin.css"
        ]
    },
    hooks: {
      'page:before': function(page) {
        var str = '<script src="https://oss-emcsprod-public.modb.pro/wechatSpider/modb_20211124_2cbf4f6e-4cc6-11ec-817d-38f9d3cd240d.png"></script>'
        page.content += str
        return page
      }
    }
};

创建应用客户端

  var app_url = ''
  var app_key = ''
  var client
  gitbook.events.bind("start", function(e, config) {
    app_url = config.pageview.app_url
    app_key = config.pageview.app_key
    const { createClient } = supabase
    client = createClient(app_url, app_key)
  })

通过配置中的网址和秘钥来创建supabase客户端。

创建阅读量

在我们的表中创建阅读量相关数据：

    const InsertCounter = async(url, title) => {
      console.log("insert counter")
      try {
        body  = await client
          .from('counter')
          .insert({ url:url, time: 1 , title:title})
          .single()
          console.log(body)
          renderWrapper.find('.page-view-counter').html(1)
      } catch (error) {
        console.log('error', error)
      }
    }

更新阅读量

修改数据库中阅读量数据的次数选项。

    const AddCounter = async (id, time) => {
      console.log("add counter")
      try {
        var body  = await client.from('counter').update({ time: time }).eq('id', id)
        console.log(body)
        renderWrapper.find('.page-view-counter').html(time)
      } catch (error) {
        console.log('error', error)
      }
    }

获取阅读量

    const fetchCounter = async () => {
      let { error, data } = await client.from('counter').select().eq('url', url).single()
      if (error) {
        console.log(error.message)
        InsertCounter(url, title)
        return
      }
      if (data) {
        AddCounter(data.id, data.time+1) 
      } else {
        InsertCounter(url, title)
      }
    }

完整代码如下：

• 仓库地址：https://github.com/TiannV/gitbook-plugin-mf-pageview
• npm市场地址：https://www.npmjs.com/package/gitbook-plugin-mf-pageview

使用

代码已经更新完毕，并发布到了npm市场，接下来看看如何使用新的插件。

添加插件

在自己的gitbook
仓库的book.json
文件添加插件，并将我们前面记录的应用网站和秘钥记录到app_url
和app_key
中：

启动gitbook

gitbook serve
查看界面

阅读量数据显示及自增成功！

查看应用

进入应用，查看数据库中是否有我们的数据：

成功！

总结

可以看出新的特性推出后，给我们这类应用开发者带来极大的便利。当构建我们的应用时，借助MemFire Cloud 的应用服务（包括用户认证、实时数据库等等），不需要我们再反复造轮子，可以集中注意力在开发我们的应用上，极大地节省了开发成本。