搭建Hexo博客

环境搭建


安装git
安装node.js

部署到coding、github


(待更…)

更换主题


HexoTheme 查找主题,并找到对应的 github 地址,hexo 主题资源放置在 themes 下,所以要先将主题项目clone到这里, 以Maupassant为例

1
git clone git@github.com:tufu9441/maupassant-hexo.git    themes\maupassant

更换主题只需在根目录的_config.yml中更改theme的值即可

1
2
# Themes: https://hexo.io/themes/
theme: concises

不过多数主题需要依赖其他库来编译安装,Maupaasant需要先安装两个依赖

1
2
npm install hexo-renderer-pug --save
npm install hexo-renderer-sass --save

通过主题的_config.yml来个性化自己的博客样式,主题可能需要一并提交到代码库,这是需要删除主题项目下的git配置文件夹,否则git不能将含有git配置的文件夹提交到博客项目。

添加文章浏览量(基于LeanCloud)


准备工作

LeanCloud 注册账号,实名认证开发者,进入控制台创建应用

新创建的应用如下,进入应用,为我们的博客创建文章浏览统计Class

创建名为Counter的类,权限设置为无限制,否则文章被浏览时阅读量增加会出问题

在应用的设置里拿到此应用的AppID/AppKey,在配置博客来控制这个应用的时候需要使用此key,

在blog->设置->安全中心,设置Web安全域名,即当通过域名访问文章时,可从leancloud的容器读取文章的浏览量或写入浏览量,

至此,博客添加浏览量功能的准备工作基本完成。当文章被访问,counter类容器会新增记录

浏览量配置

在当前theme的_config.yml添加leancloud节点,并写入 AppID/AppKey

1
2
3
4
5
# add post views
leancloud:
enable: true
app_id: Sow*******************Hsz
app_key: 9Lo****************WOf3

·基于 .ejs

在 theme/layout/_partial/article.ejs中,找到header之类的标签,在适当位置加入如下代码

1
2
3
4
<% if (theme.leancloud.enable) { %>
<span>&nbsp;| view</span>
<span id="<%- url_for(post.path) %>" class="leancloud_visitors" data-title="<%= post.title %>"></span>
<% } %>

即在标题位置下加入浏览量标签,大致效果如下

| ——

在 theme/layout/_widget下新建leancloud.ejs文件,加入如下代码

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
76
77
78
79
80
81
82
83
84
85
<% if (theme.leancloud.enable){ %>
<!-- leancloud支持js文件 -->
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
<!-- 初始化应用 -->
<script>AV.initialize("<%= theme.leancloud.app_id %>", "<%= theme.leancloud.app_key %>");</script>
<script>
function showTime(Counter) {
var query = new AV.Query(Counter);
document.querySelectorAll(".leancloud_visitors").forEach(function(item) {
console.log(item.id);
var url = item.id.trim();
query.equalTo("url", url);
query.find({
success: function(results) {
if (results.length == 0) {
document.getElementById(url).innerHTML = 0;
return;
}
for (var i = 0; i < results.length; i++) {
var object = results[i];
document.getElementById(url).innerHTML = object.get('time');
}
},
error: function(object, error) {
console.log("Error: " + error.code + " " + error.message);
}
});
});
}
function addCount(Counter) {
var Counter = AV.Object.extend("Counter");
// url 和 title 为AV.query的两个参数,用来指定读取或新增指定文章的浏览量
url = document.querySelector(".leancloud_visitors").id.trim();
title = document.querySelector(".leancloud_visitors").getAttribute('data-title').trim();
var query = new AV.Query(Counter);
query.equalTo("url", url);
query.find({
success: function(results) {
if (results.length > 0) {
var counter = results[0];
counter.fetchWhenSave(true);
counter.increment("time");
counter.save(null, {
success: function(counter) {
document.getElementById(url).innerHTML = counter.get('time');
},
error: function(counter, error) {
console.log('Failed to save Visitor num, with error message: ' + error.message);
}
});
} else {
var newcounter = new Counter();
newcounter.set("title", title);
newcounter.set("url", url);
newcounter.set("time", 1);
newcounter.save(null, {
success: function(newcounter) {
console.log("newcounter.get('time')="+newcounter.get('time'));
document.getElementById(url).innerHTML = newcounter.get('time');
},
error: function(newcounter, error) {
console.log('Failed to create');
}
});
}
},
error: function(error) {
console.log('Error:' + error.code + " " + error.message);
}
});
}
(function() {
var Counter = AV.Object.extend("Counter");
// 如果页面只有一个 leancloud_visitors 则认为它是文章页面
// 如果有多个,认为它是列表页
if (document.querySelectorAll('.leancloud_visitors').length == 1) {
console.log('increase view')
addCount(Counter);
} else if (document.querySelectorAll('.leancloud_visitors').length > 1) {
console.log('show views')
showTime(Counter);
}
})();
</script>
<% } %>

在 theme/layout/layout.js引入此.ejs文件,即可实现单个文章的浏览量功能

1
<%- partial('_widget/leancloud') %>