给博客添加网易云跟帖评论
为啥使用网易云跟帖?
多说不能用了,自己正好有个域名(注:网易云跟帖只能使用一级域名。[honjun.github.io这种是二级域名])
第一步注册
不告诉你
第二步填写站点信息
第三步获取代码
第四步使用代码
在对应模板文件评论地方加上网易云跟帖的代码
比如jsimple模板在\themes\jsimple\layout_partial\comments.ejs1
2
3
4
5
6
7
8
9
10
11
12<% if (config.netease && page.comments) { %>
<div id="cloud-tie-wrapper" class="cloud-tie-wrapper"></div>
<script>
var cloudTieConfig = {
url: document.location.href,
sourceId: "",
productKey: "<%=config.netease %>",
target: "cloud-tie-wrapper"
};
</script>
<script src="https://img1.cache.netease.com/f2e/tie/yun/sdk/loader.js"></script>
<% } %>
为了方便,productKey写在hexo配置文件中1
2# 网易云跟帖
netease: hahahahahahahahahahahaha
第四步优化css
添加night版的css1
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.night-mode #yun-tie-sdk-wrap ,.night-mode #yun-tie-sdk-wrap .tie-title-bar .tie-title{
background: #373737;
color: #b1b1b1;
}
.night-mode #yun-tie-sdk-wrap .input-box {
border: solid 1px #3f3f3f;
}
.night-mode #yun-tie-sdk-wrap .input-box.z-fcs{
border-color: #5f5f5f;
}
.night-mode #yun-tie-sdk-wrap .tie-title-bar .active-wrap .tie-join-txt {
color: #b1b1b1;
}
.night-mode #yun-tie-sdk-wrap .input-box .tie-submit-row {
position: relative;
height: 40px;
background-color: #3f3f3f;
}
.night-mode #yun-tie-sdk-wrap .single-tie {
background-color: #3f3f3f;
border-top: solid 1px #5f5f5f;
}
.night-mode #yun-tie-sdk-wrap .single-tie:hover {
background-color: #5f5f5f;
}
.night-mode #yun-tie-sdk-wrap .tie-tab-bar li.z-fcs {
border: solid 1px #5f5f5f;
background-color: #3f3f3f;
}
.night-mode #yun-tie-sdk-wrap .tie-tab-bar {
border-bottom: solid 1px #5f5f5f;
}
.night-mode #yun-tie-sdk-wrap .no-more {
border-top: solid 1px #5f5f5f;
}
上面是pc版的,至于移动端 >_> 一个深坑。它html代码在跨域iframe中,当前域的css影响不到。博主这在试着用js解决这问题,目前只能先将就一下。by-17/7/3
To Be Continued
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号