为啥使用网易云跟帖?

006bYVyvgy1fh83qsruxnj30hg0fdgtz.jpg
多说不能用了,自己正好有个域名(注:网易云跟帖只能使用一级域名。[honjun.github.io这种是二级域名])

第一步注册

不告诉你

第二步填写站点信息

006bYVyvgy1fh9fvzrrrij30xk0f0gly.jpg

第三步获取代码

006bYVyvgy1fh9fuc4a9aj30xk0ftwfs.jpg

第四步使用代码

在对应模板文件评论地方加上网易云跟帖的代码
比如jsimple模板在\themes\jsimple\layout_partial\comments.ejs

1
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版的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
.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

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦