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_idapp_key,所以需要将其写在gitbookbook.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_idapp_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_idapp_key自己去leancloud创建账号即可生成,就不详述了。