如何使hexo显得自己更有逼格(二)——功能补充

主要介绍一些第三方插件的接入以及几个有趣的功能的实现。

next主题内置了对多说评论的支持,只需要在站点配置文件中加入duoshuo_shortname字段,并填入注册多说时使用的域名后缀即可,详情可以查看多说配置

留言板

官方的版本未提供对留言板的支持,不过这个可以通过一些方式很简单地实现。为了在导航菜单上添加留言板,需要修改主题配置文件(path='next/') 的menu项,加入message字段并给出页面路径,在menu_icons中加入图标的映射。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
menu: 
home: /
categories: /categories
about: /about
archives: /archives
tags: /tags
message: /message
menu_icons:
enable: true
#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
schedule: calendar
tags: tags
archives: archive
sitemap: sitemap
commonweal: heartbeat
message: comment

如果这时部署,你会发现菜单栏显示的标签为”menu.message”,这时由于语言文件中无对应项所致。语言文件的路径为:next/languages/,如果当前使用中文,修改路径下的zh-Hans.yml即可

1
2
3
menu:

message: 留言板

完成菜单创建以后还需要创建对应页面,只需要在站点的根目录下创建一个/message文件夹,在文件夹下建立index.md文件即可,具体内容根据实现方式而定。

使用多说评论实现

使用多说评论的实现方式比较简单而且效果比较好,可以添加最近访客,并且评论比较方便。

添加最近访客

对于已开启多说评论的站点加入以下代码即可,直接在index.md文件的结尾加入。

1
<div class="ds-recent-visitors" data-num-items="28" data-avatar-size="42" id="ds-recent-visitors"></div>

可以修改主题默认的多说样式来定义外观,stylus文件路径为next/source/css/_common/components/third-party/duoshuo.styl,加入以下配置:

1
2
3
4
5
6
#ds-recent-visitors .ds-avatar {
float:left;
}
#ds-recent-visitors .ds-avatar img {
//这里是自定义的多说最近访客头像样式css
}

页面文件index.md可以如下定义:

1
2
3
4
5
6
7
title: 留言板
date: 2017-01-21 15:21:45
---
<blockquote class="blockquote-center">欢迎留言</blockquote>
<br/>
> 最近访客
<div class="ds-recent-visitors" data-num-items="28" data-avatar-size="42" id="ds-recent-visitors"></div>

效果参考:

使用github issue实现

使用github issue也可以实现这一功能,github API为获取github的内容提供了支持,可以通过获取issue list或单个issue来实现。以单个issue的情况为例。

RESTful API:

1
GET /repos/:owner/:repo/issues/:number

Response:

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
Status: 200 OK

{
"id": 1,
"url": "https://api.github.com/repos/octocat/Hello-World/issues/1347",
"repository_url": "https://api.github.com/repos/octocat/Hello-World",
"labels_url": "https://api.github.com/repos/octocat/Hello-World/issues/1347/labels{/name}",
"comments_url": "https://api.github.com/repos/octocat/Hello-World/issues/1347/comments",
"events_url": "https://api.github.com/repos/octocat/Hello-World/issues/1347/events",
"html_url": "https://github.com/octocat/Hello-World/issues/1347",
"number": 1347,
"state": "open",
"title": "Found a bug",
"body": "I'm having a problem with this.",
"user": {
"login": "octocat",
"id": 1,
"avatar_url": "https://github.com/images/error/octocat_happy.gif",
"gravatar_id": "",
"url": "https://api.github.com/users/octocat",
"html_url": "https://github.com/octocat",
"followers_url": "https://api.github.com/users/octocat/followers",
"following_url": "https://api.github.com/users/octocat/following{/other_user}",
"gists_url": "https://api.github.com/users/octocat/gists{/gist_id}",
"starred_url": "https://api.github.com/users/octocat/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/octocat/subscriptions",
"organizations_url": "https://api.github.com/users/octocat/orgs",
"repos_url": "https://api.github.com/users/octocat/repos",
"events_url": "https://api.github.com/users/octocat/events{/privacy}",
"received_events_url": "https://api.github.com/users/octocat/received_events",
"type": "User",
"site_admin": false
},
"labels": [
{
"id": 208045946,
"url": "https://api.github.com/repos/octocat/Hello-World/labels/bug",
"name": "bug",
"color": "f29513",
"default": true
}
],
"assignee": {
"login": "octocat",
"id": 1,
"avatar_url": "https://github.com/images/error/octocat_happy.gif",
"gravatar_id": "",
"url": "https://api.github.com/users/octocat",
"html_url": "https://github.com/octocat",
"followers_url": "https://api.github.com/users/octocat/followers",
"following_url": "https://api.github.com/users/octocat/following{/other_user}",
"gists_url": "https://api.github.com/users/octocat/gists{/gist_id}",
"starred_url": "https://api.github.com/users/octocat/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/octocat/subscriptions",
"organizations_url": "https://api.github.com/users/octocat/orgs",
"repos_url": "https://api.github.com/users/octocat/repos",
"events_url": "https://api.github.com/users/octocat/events{/privacy}",
"received_events_url": "https://api.github.com/users/octocat/received_events",
"type": "User",
"site_admin": false
},
"milestone": {
"url": "https://api.github.com/repos/octocat/Hello-World/milestones/1",
"html_url": "https://github.com/octocat/Hello-World/milestones/v1.0",
"labels_url": "https://api.github.com/repos/octocat/Hello-World/milestones/1/labels",
"id": 1002604,
"number": 1,
"state": "open",
"title": "v1.0",
"description": "Tracking milestone for version 1.0",
"creator": {
"login": "octocat",
"id": 1,
"avatar_url": "https://github.com/images/error/octocat_happy.gif",
"gravatar_id": "",
"url": "https://api.github.com/users/octocat",
"html_url": "https://github.com/octocat",
"followers_url": "https://api.github.com/users/octocat/followers",
"following_url": "https://api.github.com/users/octocat/following{/other_user}",
"gists_url": "https://api.github.com/users/octocat/gists{/gist_id}",
"starred_url": "https://api.github.com/users/octocat/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/octocat/subscriptions",
"organizations_url": "https://api.github.com/users/octocat/orgs",
"repos_url": "https://api.github.com/users/octocat/repos",
"events_url": "https://api.github.com/users/octocat/events{/privacy}",
"received_events_url": "https://api.github.com/users/octocat/received_events",
"type": "User",
"site_admin": false
},
"open_issues": 4,
"closed_issues": 8,
"created_at": "2011-04-10T20:09:31Z",
"updated_at": "2014-03-03T18:58:10Z",
"closed_at": "2013-02-12T13:22:01Z",
"due_on": "2012-10-09T23:39:01Z"
},
"locked": false,
"comments": 0,
"pull_request": {
"url": "https://api.github.com/repos/octocat/Hello-World/pulls/1347",
"html_url": "https://github.com/octocat/Hello-World/pull/1347",
"diff_url": "https://github.com/octocat/Hello-World/pull/1347.diff",
"patch_url": "https://github.com/octocat/Hello-World/pull/1347.patch"
},
"closed_at": null,
"created_at": "2011-04-22T13:33:48Z",
"updated_at": "2011-04-22T13:33:48Z",
"closed_by": {
"login": "octocat",
"id": 1,
"avatar_url": "https://github.com/images/error/octocat_happy.gif",
"gravatar_id": "",
"url": "https://api.github.com/users/octocat",
"html_url": "https://github.com/octocat",
"followers_url": "https://api.github.com/users/octocat/followers",
"following_url": "https://api.github.com/users/octocat/following{/other_user}",
"gists_url": "https://api.github.com/users/octocat/gists{/gist_id}",
"starred_url": "https://api.github.com/users/octocat/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/octocat/subscriptions",
"organizations_url": "https://api.github.com/users/octocat/orgs",
"repos_url": "https://api.github.com/users/octocat/repos",
"events_url": "https://api.github.com/users/octocat/events{/privacy}",
"received_events_url": "https://api.github.com/users/octocat/received_events",
"type": "User",
"site_admin": false
}
}

可以利用异步加载提高载入速度,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
var ghComment = $("#gh-comments") ;
//var ghComment_count = $("gh-comments-count") ;

function formatNumber(val, len) {
var num = "" + val;
len = len || 2;
while (num.length < len) {
num = "0" + num;
}
return num;
}

function formatDate(str) {
var date = new Date(Date.parse(str) ) ;
return formatNumber(date.getFullYear() ) + '-' + formatNumber(date.getMonth() + 1) + '-' + formatNumber(date.getDate() ) +
" " + formatNumber(date.getHours() ) + ":" + formatNumber(date.getMinutes() ) + ":" + formatNumber(date.getSeconds() ) ;
}

function loadComments(data) {
console.log("load comments") ;
document.getElementById("gh-comments-count") .innerHTML = data.length.toString() ;
for (var i = 0; i < data.length; i++) {
var cuser = data[i].user.login;
var cuserlink = 'https://www.github.com/' + data[i].user.login;
var cbody = data[i].body_html;
var cavatarlink = data[i].user.avatar_url;
var cdate = formatDate(data[i].created_at) ;
console.log(cbody) ;
ghComment.append('<div class="gh-single-comment"><div class="commentgravatar"><a href="'+
+ cuserlink +'" target="_blank"><img src="'
+ cavatarlink + '"></a></div><div class="commentheader"><a class="commentuser" href="'
+ cuserlink + '" target="_blank">' + cuser + '</a><span class="commentdate">'
+ cdate + '</span></div><div class="commentbody">' + cbody + '</div></div>') ;
}
}

$.ajax('https://api.github.com/repos/aak1247/aak1247.github.io/issues/1/comments?per_page=100', {
headers: {
Accept: 'application/vnd.github.full+json'
},
dataType: 'json',
success: loadComments
}) ;

将JS文件保存到next/js路径下。

添加issue.swig文件到next/latout/_custom/,其内容为:

1
2
3
4
5
6
7
8
9
10
<blockquote class="blockquote-center leave-message">快来留言吧!~请在 <a href="https://github.com/aak1247/aak1247.github.io/issues/1" target="_blank">Github issue</a> 页面完成操作</blockquote>
<div id="messages">
<div id="gh-comments-info">
<a href="javascript:void(0) ;">
<span id="gh-comments-count">0</span>条留言</a>
</div>
<div id="gh-comments" style="opacity: 1"></div>
</div>
<script src="https://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="{{ url_for(theme.js) }}/src/issue.js"></script>

修改page.swig文件,在<div id="posts" class="posts-expand">中,找到

1
{% endif %}

在其上方加入如下:

1
2
{% elif page.type === 'issue' %}
{% include '_custom/issue.swig' %}

使添加的issue.swig文件能够包含进来。

然后在index.md中写入:

1
2
3
4
5
title: 留言板
date: 2017-01-17 16:27:30
type: "issue"
comments: false
---

效果如下:

搜索功能

next主题内置了对algolia-search/tinysearch/swiftsearch的支持,同时也提供了一个local search的插件,考虑到第三方服务的不稳定性以及可能付费等等问题,推荐使用local search,只需要在站点配置文件中加入:

1
2
3
4
5
search: 
path: search.xml
field: post
format: html
limit: 10000

同时在package.json中加入"hexo-generator-search": "^1.0.2"依赖项即可。本地部署的可以手动输入npm i完成依赖项的安装,使用Travis自动部署时无需修改配置脚本。效果可以在黑境 中预览。

简繁切换

这是一个通用的方法,使用js处理可以避免后端语言的差异,代码来自网上。只需要将 cookdomain修改为你的页面地址即可。链接:tw-cn.js

站点地图

只需要在站点配置文件中加入:

1
2
3
4
sitemap: 
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

package.json中加入依赖项"hexo-generator-sitemap": "^1.1.2"即可。

觉得有用的话赞助一点吧~