gitbook集成leancloud

发表于 | 分类于 | 评论： | 阅读次数：

背景

之前将hexo集成了gitbook，由于hexo的阅读量使用的是leancloud，而gitbook用的是gitbook-plugin-pageview-count的一个插件。

找了一圈也没找到leancloud相关的gitbook插件，想了想，干脆自己写一个算了。虽然基本没写过js，但依葫芦画瓢应该还是可以的。

gitbook 插件

先看看原生的gitbook插件gitbook-plugin-pageview-count:

1
2
3
4
5
6
7
8
9
➜  gitbook-plugin-pageview-count git:(master) ✗ tree -L 2
.
├── LICENSE
├── README.md
├── assets
│   ├── plugin.css
│   └── plugin.js
├── index.js
└── package.json

plugin.css主要是显示的样式，先不用管。plugin.js就是主要的统计阅读量的内容了。

plugin.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var gitbook = window.gitbook;

/*
<!-- Start of CuterCounter Code -->
<a href="http://www.cutercounter.com/" target="_blank"><img src="http://www.cutercounter.com/hit.php?id=gmvufxqck&nd=1&style=116" border="0" alt="visitor counter"></a>
<!-- End of CuterCounter Code -->
*/

var iconSVg = '<svg t="1543310294340" \
            class="icon" style="" viewBox="0 0 1024 1024" version="1.1" \
            xmlns="http://www.w3.org/2000/svg" p-id="1104" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14"><defs><style type="text/css"></style></defs>\
            <path d="M512 416a96 96 0 1 0 0 192 96 96 0 0 0 0-192z m511.952 102.064c-0.016-0.448-0.064-0.864-0.096-1.296a8.16 8.16 0 0 0-0.08-0.656c0-0.32-0.064-0.624-0.128-0.928-0.032-0.368-0.064-0.736-0.128-1.088-0.032-0.048-0.032-0.096-0.032-0.144a39.488 39.488 0 0 0-10.704-21.536c-32.672-39.616-71.536-74.88-111.04-107.072-85.088-69.392-182.432-127.424-289.856-150.8-62.112-13.504-124.576-14.064-187.008-2.64-56.784 10.384-111.504 32-162.72 58.784-80.176 41.92-153.392 99.696-217.184 164.48-11.808 11.984-23.552 24.224-34.288 37.248-14.288 17.328-14.288 37.872 0 55.216 32.672 39.616 71.52 74.848 111.04 107.056 85.12 69.392 182.448 127.408 289.888 150.784 62.096 13.504 124.608 14.096 187.008 2.656 56.768-10.4 111.488-32 162.736-58.768 80.176-41.936 153.376-99.696 217.184-164.48 11.792-12 23.536-24.224 34.288-37.248 5.712-5.872 9.456-13.44 10.704-21.568l0.032-0.128a12.592 12.592 0 0 0 0.128-1.088c0.064-0.304 0.096-0.624 0.128-0.928l0.08-0.656 0.096-1.28c0.032-0.656 0.048-1.296 0.048-1.952l-0.096-1.968zM512 704c-106.032 0-192-85.952-192-192s85.952-192 192-192 192 85.968 192 192c0 106.048-85.968 192-192 192z"\
            fill="#CCC" p-id="1105"></path></svg>'

function requestCount(targetUrl) {
  return $.ajax('https://hitcounter.pythonanywhere.com/count',{
    data:{url:encodeURIComponent(targetUrl)},
  })
}

require(["gitbook", "jQuery"], function (gitbook, $) {

  function resetViewCount() {
    var bookHeader = $('.book-header')
    var lastChild = bookHeader.children().last()

    var renderWrapper = $('<div class="page-view-wrapper dropdown pull-left">\
        <span class="btn toggle-dropdown">'+ iconSVg + '</span>\
        <span class="page-view-counter" title="阅读数">-</span>\
      </div>')

    if(lastChild.length){
      renderWrapper.insertBefore(lastChild)
    }else{
      bookHeader.append(renderWrapper)
    }


    requestCount(location.href).then(function(data){
      renderWrapper.find('.page-view-counter').html(data)
    })
  }

  gitbook.events.bind("page.change", resetViewCount)
});

统计阅读量靠requustCount函数完成，通过renderWrapper.find('.page-view-counter').html(data)将阅读量传递给.page-view-counter的变量。

所以将leancloud统计阅读量的结果通过renderWrapper.find('.page-view-counter').html(data)返回就行。

leanlcoud

plugin.js

改造后的plugin.js如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
var gitbook = window.gitbook;

/*
<!-- Start of CuterCounter Code -->
<a href="http://www.cutercounter.com/" target="_blank"><img src="http://www.cutercounter.com/hit.php?id=gmvufxqck&nd=1&style=116" border="0" alt="visitor counter"></a>
<!-- End of CuterCounter Code -->
*/

var iconSVg = '<svg t="1543310294340" \
            class="icon" style="" viewBox="0 0 1024 1024" version="1.1" \
            xmlns="http://www.w3.org/2000/svg" p-id="1104" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14"><defs><style type="text/css"></style></defs>\
            <path d="M512 416a96 96 0 1 0 0 192 96 96 0 0 0 0-192z m511.952 102.064c-0.016-0.448-0.064-0.864-0.096-1.296a8.16 8.16 0 0 0-0.08-0.656c0-0.32-0.064-0.624-0.128-0.928-0.032-0.368-0.064-0.736-0.128-1.088-0.032-0.048-0.032-0.096-0.032-0.144a39.488 39.488 0 0 0-10.704-21.536c-32.672-39.616-71.536-74.88-111.04-107.072-85.088-69.392-182.432-127.424-289.856-150.8-62.112-13.504-124.576-14.064-187.008-2.64-56.784 10.384-111.504 32-162.72 58.784-80.176 41.92-153.392 99.696-217.184 164.48-11.808 11.984-23.552 24.224-34.288 37.248-14.288 17.328-14.288 37.872 0 55.216 32.672 39.616 71.52 74.848 111.04 107.056 85.12 69.392 182.448 127.408 289.888 150.784 62.096 13.504 124.608 14.096 187.008 2.656 56.768-10.4 111.488-32 162.736-58.768 80.176-41.936 153.376-99.696 217.184-164.48 11.792-12 23.536-24.224 34.288-37.248 5.712-5.872 9.456-13.44 10.704-21.568l0.032-0.128a12.592 12.592 0 0 0 0.128-1.088c0.064-0.304 0.096-0.624 0.128-0.928l0.08-0.656 0.096-1.28c0.032-0.656 0.048-1.296 0.048-1.952l-0.096-1.968zM512 704c-106.032 0-192-85.952-192-192s85.952-192 192-192 192 85.968 192 192c0 106.048-85.968 192-192 192z"\
            fill="#CCC" p-id="1105"></path></svg>'

var options ={};

require(["gitbook", "jQuery"], function (gitbook, $) {

  gitbook.events.bind("start", function(e, config) {
      options = config['leancloud-pageview'] || {};
  });

  gitbook.events.bind("page.change", function() {
    var bookHeader = $('.book-header')
    var lastChild = bookHeader.children().last()

    var renderWrapper = $('<div class="page-view-wrapper dropdown pull-left">\
        <span class="btn toggle-dropdown">'+ iconSVg + '</span>\
        <span class="page-view-counter" title="阅读数">-</span>\
      </div>')

    if(lastChild.length){
      renderWrapper.insertBefore(lastChild)
    }else{
      bookHeader.append(renderWrapper)
    }

    var Counter = function (method, url, data) {
      var auth = options.app_id.substr(0, 8).toLowerCase();
      return $.ajax({
        method: method,
        url : `https://${auth}.api.lncld.net/1.1${url}`,
        headers: {
          'X-LC-Id': options.app_id,
          'X-LC-Key': options.app_key,
          'Content-Type': 'application/json',
          },
        data: data,
      });
    };

    var url = location.href.replace(/^http:\/\/[^/]+/, "").trim();
    url = decodeURI(url);
    var s = url.split("/").pop();
    var title = s.substr(0, s.length - 5);
    var time = 0;

    Counter('get', '/classes/Counter', { where: JSON.stringify({ url }) }).done(function ({ results }) {
        console.log(results)
        if (results.length > 0) {
        var counter = results[0];
        Counter('put', `/classes/Counter/${counter.objectId}`, JSON.stringify({ time: { "__op":"Increment", "amount":1 } })).done(function () {
          console.log(counter.time);
          time = counter.time+1;
          renderWrapper.find('.page-view-counter').html(time)
        })
      } else {
        Counter('post', '/classes/Counter', JSON.stringify({ title: title, url: url, time: 1})).done(function ({ results }) {
            renderWrapper.find('.page-view-counter').html(1)
        })
      }
    });

  })
});

配置

因为leancloud的接口需要提供其app_id和app_key，所以需要将其写在gitbook的book.json文件中

1
2
3
4
5
6
7
8
9
{
    "plugins": ["leancloud-pageview"],
    "pluginsConfig": {
        "leancloud-pageview": {
            "app_id": "XXXXXXX",
            "app_key": "xxxxxx",
        }
    }
}

然后在我们的plugin.js中，通过

1
2
3
gitbook.events.bind("start", function(e, config) {
    options = config['leancloud-pageview'] || {};
});

将配置读取出来。

counter

通过app_id和app_key生成leancloud的接口

1
2
3
4
5
6
7
8
9
10
11
12
13
var Counter = function (method, url, data) {
  var auth = options.app_id.substr(0, 8).toLowerCase();
  return $.ajax({
    method: method,
    url : `https://${auth}.api.lncld.net/1.1${url}`,
    headers: {
      'X-LC-Id': options.app_id,
      'X-LC-Key': options.app_key,
      'Content-Type': 'application/json',
      },
    data: data,
  });
};

统计

最后通过Counter接口进行统计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var url = location.href.replace(/^http:\/\/[^/]+/, "").trim();
url = decodeURI(url);
var s = url.split("/").pop();
var title = s.substr(0, s.length - 5);
var time = 0;

Counter('get', '/classes/Counter', { where: JSON.stringify({ url }) }).done(function ({ results }) {
    console.log(results)
    if (results.length > 0) {
    var counter = results[0];
    Counter('put', `/classes/Counter/${counter.objectId}`, JSON.stringify({ time: { "__op":"Increment", "amount":1 } })).done(function () {
      console.log(counter.time);
      time = counter.time+1;
      renderWrapper.find('.page-view-counter').html(time)
    })
  } else {
    Counter('post', '/classes/Counter', JSON.stringify({ title: title, url: url, time: 1})).done(function ({ results }) {
        renderWrapper.find('.page-view-counter').html(1)
    })
  }
});

到这里基本就完成了。

使用

新生成的package包已上传到npm,可食用。
npm地址：https://www.npmjs.com/package/gitbook-plugin-leancloud-pageview
github地址: https://github.com/TiannV/gitbook-plugin-leancloud-pageview

gitbook使用方法，在book.json文件中添加插件即可。

1
2
3
4
5
6
7
8
9
{
    "plugins": ["leancloud-pageview"],
    "pluginsConfig": {
        "leancloud-pageview": {
            "app_id": "XXXXXXX",
            "app_key": "xxxxxx",
        }
    }
}

app_id和app_key自己去leancloud创建账号即可生成，就不详述了。