HEXO持续优化

可爱的看板娘

官方的live2d已经满足不了我的跳动的心了,偶然间看见别人的live2d贼炫酷,我也去搞来试一试。
张书樵的项目而来

1.png

教程

将项目下载到spfk/source/目录下

1
https://github.com/stevenjoezhang/live2d-widget

修改部分代码
vim live2d-widget/autoload.js

1
2
const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/"; #删除
为const live2d_path = "/live2d-widget/"; #添加

vim layout/layout.ejs

1
2
<!--看板娘-->
<script src="/live2d-widget/autoload.js"></script> #添加

vim live2d-widget/waifu.css

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
#waifu {
position:fixed;
right:30px;
bottom:0;
z-index:1;
line-height:0;
transition:transform .3s ease-in-out;
transform:translateY(3px)
}
#waifu:hover {
-webkit-transform:translateY(0);
transform:translateY(0)
}
@media (max-width:768px) {
#waifu {
display:none
}
}#waifu-tips {
opacity:0;
margin:-20px 20px;
padding:5px 10px;
padding:5px 10px;
border:1px solid rgba(224,186,140,.62);
border-radius:12px;
background-color:rgba(236,217,188,.5);
box-shadow:0 3px 15px 2px rgba(191,158,118,.2);
font-size:14px;
line-height:24px;
color:#DDDDDD;
word-break:break-all;
text-overflow:ellipsis;
overflow:hidden;
position:absolute;
animation-delay:5s;
animation-duration:50s;
animation-iteration-count:infinite;
animation-name:shake;
animation-timing-function:ease-in-out
}
#waifu #live2d {
position:relative;
cursor:grab;
cursor:-webkit-grab;
}
}#waifu-tips {
opacity:0;
margin:-20px 20px;
padding:5px 10px;
padding:5px 10px;
border:1px solid rgba(224,186,140,.62);
border-radius:12px;
background-color:rgba(236,217,188,.5);
box-shadow:0 3px 15px 2px rgba(191,158,118,.2);
font-size:14px;
line-height:24px;
color:#DDDDDD;
word-break:break-all;
text-overflow:ellipsis;
overflow:hidden;
position:absolute;
animation-delay:5s;
animation-duration:50s;
animation-iteration-count:infinite;
animation-name:shake;
animation-timing-function:ease-in-out
}

修改看板娘大小、位置、格式、文本内容等,可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。更多配置可以参考我的GitHub

Valine评论系统

教程

编辑主题配置文件_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
youyan:
#on: true
id:
# 是否开启友言评论,http://www.uyan.cc/index.php
# id 中填写你的友言用户数字ID,注册后进入后台管理即可查看
# 友言服务在 Web 环境下运行,普通本地环境无法查看,请部署后在线上测试。

valine:
#on: true # 如果要使用Valine,请设置on: true
appId: #your leancloud appId
appKey: #your leancloud appKey
guest_info: nick,mail,link #valine comment header info
placeholder: Just go go # valine comment input placeholder(like: Please leave your footprints )
avatar: mm # gravatar style https://valine.js.org/avatar
pageSize: 10 # comment list page size
verify: false # valine verify code (true/false)
notify: false # valine mail notify (true/false)
lang: zh-cn

# >>> Style Customisation 样式自定义 <<<

layout/_partial/after-footer.ejs

1
2
3
4
5
<%- js('//cdn.bootcss.com/jquery/1.11.1/jquery.min.js') %>
<%- js('js/main') %>
<%- partial('background') %>
<%- partial('analytics/google-analytics') %>
<%- partial('analytics/baidu-analytics') %>

layout/_partial/article.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
            </div>
</div>
</div>
<script type="text/javascript" src="//cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script type="text/javascript">
···········································································
<%- partial('comments/disqus', {
shortname: config.disqus_shortname
}) %>
<% } else if (theme.valine.on) { %>
<%- partial('comments/valine') %>
<% } %>
<% } %>

layout/_partial/comments/valine.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
<section id="comments">
<div id="valine_thread" style="margin: 30px;"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
var GUEST_INFO = ['nick','mail','link'];
var guest_info = '<%= theme.valine.guest_info %>'.split(',').filter(function(item){
return GUEST_INFO.indexOf(item) > -1
});
var notify = '<%= theme.valine.notify %>' == true;
var verify = '<%= theme.valine.verify %>' == true;
var valine = new Valine();
valine.init({
el: '#valine_thread',
notify: notify,
verify: verify,
appId: "<%= theme.valine.appId %>",
appKey: "<%= theme.valine.appKey %>",
placeholder: "<%= theme.valine.placeholder %>",
pageSize:'<%= theme.valine.pageSize %>',
avatar:'<%= theme.valine.avatar %>',
lang:'<%= theme.valine.lang %>'
})
</script>
</section>

layout/_partial/share/showshare.ejs

1
2
3
4
5
6
7
</defs>
</svg>
<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/TweenMax.min.js"></script>
<script src="/js/TweenMax.js"></script>
<script>

layout/_partial/toc.ejs

1
2
3
4
5
6
7
</div>
<input type="button" id="tocButton" value="隐藏目录" title="点击按钮隐藏或者显示文章目录">

<%- js('//cdn.bootcss.com/jquery/1.11.1/jquery.min.js') %>
<script>
var valueHide = "隐藏目录";
var valueShow = "显示目录";

效果图
2.png

等待更新

到此结束

如有错误请联系lanbaidetanlang@qq.com

文章目录
  1. 1. 可爱的看板娘
    1. 1.1. 教程
  2. 2. Valine评论系统
    1. 2.1. 教程
  3. 3. 等待更新
  4. 4. 到此结束