主题配置

上次主要是对主题的使用作下简答的说明,现在说的是主题的美化,注意此处讨论的主题为Tranquilpeak,如有不适请自行Google。

添加搜索

搜索功能采用的是algolia提供的服务,国际惯例注册账号,然后创建index,然后是安装插件hexo-algoliasearch,网上教程安装的是hexo-algolia插件,由于Tranquilpeak的原作者文档说明使用的hexo-algoliasearch,故所有配置基于hexo-algoliasearch,具体配置参考hexo-algoliasearch

注意:配置完成后需要执行hexo algolia命令更新索引。

添加live2d

首先安装npm install --save hexo-helper-live2d插件,然后安装npm install live2d-widget-model-xxxx,此处的xxxx代表具体的主题样式,如我采用的live2d-widget-model-koharu,再在hexo的工程下面的_config.yml文件中添加如下代码用于控制模型的显示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
enable: true
scriptFrom: local
model:
use: live2d-widget-model-koharu
display:
position: right
width: 100
height: 200
vOffset: -60
mobile:
show: true
scale: 0.5
react:
opacityDefault: 0.9
opacityOnHover: 0.1

具体的属性可参考:L2Dwidget.js文件。下面列出了安装后能够看到效果的module,自行选择食用。

live2d-widget-model-chitose

llive2d-widget-model-epsilon2_1

live2d-widget-model-gf

live2d-widget-model-haruto

llive2d-widget-model-hibiki

live2d-widget-model-hijiki

live2d-widget-model-izumi

llive2d-widget-model-koharu

live2d-widget-model-miku

live2d-widget-model-ni-j

live2d-widget-model-nico

live2d-widget-model-nipsilon

live2d-widget-model-nito

live2d-widget-model-shizuku

live2d-widget-model-tororo

live2d-widget-model-tsumiki

live2d-widget-model-unitychan

live2d-widget-model-wanko

live2d-widget-model-z16.png

添加网站访问统计

引入js文件

1
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

在footer中添加如下代码:

1
2
3
4
5
6
7
8
9
<span id="busuanzi_container_site_uv">
Total <span id="busuanzi_value_site_uv"></span> visitors.
</span>
<!--如果是文章页面则显示阅读统计>-->
<% if (is_post()) { %>
<span id="busuanzi_container_page_pv">
Total reading <span id="busuanzi_value_page_pv"></span> times.
</span>
<% } %>

添加博客时长

在footer中添加博客时长,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<span id="timeDate">0</span><span id="times">0</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("06/06/2016 06:06:00");//此处修改你的建站时间或者网站上线时间
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "Blog age: "+dnum+" day ";
document.getElementById("times").innerHTML = hnum + " h " + mnum + " m " + snum + " s";
}
setInterval("createtime()",250);
</script>

请注意将时间改为自己的时间。

赞赏

氪金?NoNoNo,这是对他人劳动的尊重。将以下代码添加到评论区的上方,需要将支付宝和微信的收款码替换成自己的:

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
<div class ="post-donate">
<div id="donate_board" class="donate_bar center">
<a id="btn_donate" class="btn_donate" href="javascript:;" title="打赏">打脸赞赏戳这里OwO</a>
<br>
</div>
<div id="donate_guide" class="donate_bar center hidden" >
<!-- 支付宝打赏图案 -->
<img src="你的支付宝收款码图片" alt="支付宝打赏">
<!-- 微信打赏图案 -->
<img src="你的微信收款码图片" alt="微信打赏">
</div>
<script type="text/javascript">
let btnDonate = document.getElementById('btn_donate');
btnDonate.onclick = function(){
var qr=document.getElementById("donate_guide");
if ("none"===qr.style.display) {
qr.style.display="block"
btnDonate.innerText = "我再想想->.->"
} else {
qr.style.display="none"
btnDonate.innerText = "打脸赞赏戳这里OwO"
}
}
</script>
</div>

在线聊天

通过daovoice可以很方便的浏览者进行在线聊天,进入Daovoice注册账号、然后创建一个聊天,如果需要邀请码的话可以使用:2fc1f5b3。后续操作如下:

  • 将下面代码粘贴在页面的 之前

    1
    <script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/2fc1f5b3.js","daovoice")</script>
  • 调用下面的 JavaScript 与匿名访客沟通(这里采用的是匿名沟通)

    1
    2
    3
    4
    daovoice('init', {
    app_id: "你的id"
    });
    daovoice('update');

为了控制daovoice的打开和关闭,以及id的统一管理现将其抽出到themes下的config文件中去

1
2
3
# Online contact
daovoice: true #是否启用
daovoice_app_id: 你的id

完整的配置为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<% if (theme.daovoice) { %>
<script>(function (i, s, o, g, r, a, m) {
i["DaoVoiceObject"] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
a.charset = "utf-8";
m.parentNode.insertBefore(a, m)
})(window, document, "script", ('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0ba5a2ce.js", "daovoice")
daovoice('init', {
app_id: "<%=theme.daovoice_app_id %>"
});
daovoice('update');
</script>
<% } %>

其它的daovoice配置,可在dashboard页面中进行设置。

添加版权信息

新建themes/tranquilpeak/layout/_partial/post/copyright.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
<% if (page.copyright) { %>
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

<!-- JS库 sweetalert 可修改路径 -->
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<p><span>本文标题:</span><a href="<%= url_for(page.path) %>"><%= page.title %></a></p>
<p><span>文章作者:</span><a href="/" title="访问 <%= config.copyright %> 的个人博客"><%= config.copyright %></a></p>
<p><span>发布时间:</span><%= page.date.format("YYYYMMDD- HH:MM") %></p>
<p><span>最后更新:</span><%= page.updated.format("YYYYMMDD- HH:MM") %></p>
<p><span>原始链接:</span><a href="<%= url_for(page.path) %>" title="page.title"><%= page.permalink %></a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="<%= page.permalink %>" aria-label="复制成功!"></i></span>
</p>
<p><span>许可协议:</span><i class="fab fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({
title: "",
text: '复制成功',
icon: "success",
showConfirmButton: true
});
});
});
</script>
<% } %>

样式为:

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
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2em auto 0;
margin-top: 2em;
margin-bottom: 2em;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 1.7rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255, 255, 255, 0.4);
}

.my_post_copyright p {
margin: 0;
}

.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}

.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}

.my_post_copyright a {
color: #808080;
border-bottom: 0;
}

.my_post_copyright a:hover {
color: #349ef3;
text-decoration: underline;
}

.my_post_copyright:hover .fa-clipboard {
color: #000;
}

.my_post_copyright .post-url:hover {
font-weight: normal;
}

.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+ mobile() {
display: none;
}
}

.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}

然后添加到文章列表内容的底部和品论框的上面<%- partial('post/copyright') %>

最后

本次只是列出了自己用到的一些配置,如果你还有需要可以根据自己需求添加,好了,下次再见。