Hexo下Next主题使用多说评论插件样式优化

多说评论系统

前言

因为Next主题最新版也结合了多说了一些插件,只需要在主题配置文件里设置参数就可以看到效果,但我发现样式还不够好看,就从几个方面来进行了优化。也会讲解如何使用多说的评论、分享、热评文章功能。

启用多说评论功能

使用多说前需要先在 多说 创建一个站点。具体步骤如下:

准备

1·登录后在首页选择 “我要安装”。

2·创建站点,填写表单。多说域名 这一栏填写的即是你的 duoshuo_shortname,如图:
多说评论系统
3·创建站点完成后在 主题配置文件 中新增 duoshuo_shortname 字段,值设置成上一步中的值。

修改或添加代码

修改主题配置文件代码

1
2
# Duoshuo ShortName
duoshuo_shortname: cduyzh //改为你自己的

### 启用ua
这个是为了显示评论者使用的系统和浏览器属性,以及是否显示博主的昵称信息。
修改代码如下

1
2
3
4
5
duoshuo_info:
ua_enable: true
admin_enable: true
user_id: 6224774254659896065
admin_nickname: 水美眉(博主)

获取user_id

登录你的多说账户信息主页
多说评论系统
点击你的名字进入的页面后,地址最后有个ID就是它了!!!


多说评论系统

启用多说分享功能

修改或添加代码

修改主题配置文件代码

1
2
# Share
duoshuo_share: true

启用多说热评文章功能

修改或添加代码

1
2
# 多说热评文章 true 或者 false
duoshuo_hotartical: true

修改评论头像样式

评论模块样式

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
/*隐藏多说底部版权*/
#ds-thread #ds-reset .ds-powered-by {
display: none;
}
#ds-reset .ds-avatar img:hover,
#ds-recent-visitors .ds-avatar img:hover {
/*设置鼠标悬浮在头像时的CSS样式*/ box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
transform: rotateZ(360deg); /*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
#ds-reset .ds-avatar img,
#ds-recent-visitors .ds-avatar img {
width: 54px;
height: 54px; /*设置图像的长和宽,这里要根据自己的评论框情况更改*/
border-radius: 27px; /*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/
-webkit-border-radius: 27px; /*圆角效果:兼容webkit浏览器*/
-moz-border-radius: 27px;
box-shadow: inset 0 -1px 0 #3333sf; /*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out; /*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/
-moz-transition: -moz-transform 0.4s ease-out;
}

我把这段代码放在了多说的后台设置中的自定义CSS里的。
多说评论系统

修改ua信息样式

动机

主要看别人博客里,别人的样式有这个,然后用了他们的方法比如引入CSS什么的,发现没用,后来发现必须要用到JS获取你的浏览器版本信息和操作系统信息,给他加上对应的标签的样式,然后通过你自己定义的CSS样式来实现对ua信息样式的美化
因为默认的ua样式太丑了不美观,在此我也不贴图了。大家自己第一次启用这个功能的时候能感受得到。

修改代码

博主的next为最新的5.1.0版本不知道以前版本的情况,在我的next主题里,分析源码的时候找到了一个关于多说的文件,

1
我的路径为 D:\hexo\blog\themes\next\layout\_scripts\third-party\comments\duoshuo.swig
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
{% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}
{% if theme.duoshuo %}
{% set duoshuo_shortname = theme.duoshuo.shortname %}
{% else %}
{% set duoshuo_shortname = theme.duoshuo_shortname %}
{% endif %}
<script type="text/javascript">
var duoshuoQuery = {short_name:"{{duoshuo_shortname}}"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.id = 'duoshuo-script';
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<script type="text/javascript">
if (typeof DUOSHUO !== 'undefined')hookDUOSHUO_tp();
else $('[src="http://static.duoshuo.com/embed.js"]')[0].onload=hookDUOSHUO_tp;
var hookDUOSHUO_bl=false;
function hookDUOSHUO_tp(){
if(hookDUOSHUO_bl)return;
else hookDUOSHUO_bl=true;
var _D_post=DUOSHUO.templates.post;
DUOSHUO.templates.post=function (e,t){
var rs=_D_post(e,t);
if(e.agent&&/^Mozilla/.test(e.agent))rs=rs.replace(/<\/div><p>/,show_ua(e.agent)+'</div><p>');
return rs;
}
}
function show_ua(string){
$.ua.set(string);
var sua=$.ua;
if(sua.os.version=='x86_64')sua.os.version='x64';
return '<span class="this_ua browser '+sua.browser.name+'">'+sua.browser.name+' | '+sua.browser.version+'</span>'+'<span class="this_ua platform '+sua.os.name+'">'+sua.os.name+' '+sua.os.version+'</span>';
}
</script>
{% if theme.duoshuo_info.ua_enable %}
{% if theme.duoshuo_info.admin_enable %}
{% set ua_parser_internal = url_for(theme.vendors._internal) + '/ua-parser-js/dist/ua-parser.min.js?v=0.7.9' %}
<script src="{{ theme.vendors.ua_parser | default(ua_parser_internal) }}"></script>
<script src="{{ url_for(theme.js) }}/src/hook-duoshuo.js?v={{ theme.version }}"></script>
{% else %}
{% set ua_parser_internal = url_for(theme.vendors._internal) + '/ua-parser-js/dist/ua-parser.min.js?v=0.7.9' %}
<script src="{{ theme.vendors.ua_parser | default(ua_parser_internal) }}"></script>
<script src="{{ url_for(theme.js) }}/src/hook-duoshuo.js"></script>
{% endif %}
{% endif %}

解读代码

这段代码是我自己的修改后的,大家对照着自己看,主要是添加了一段代码而已。
里面有2个script标签里闭合的是JS函数,其他的script标签都是引用JS文件,大家自己去看。
第一个就是多说评论系统默认的JS添加代码,多说官网有,这段代码必须要用。我这是集成了的所以没有改动。
第二个是我添加的,主要实现用JS获取用户的浏览器类型和操作系统,并把这些信息添加到标签内加入对应的CSS样式名,后面就通过对CSS样式进行优化就能达到如下效果
多说评论系统
顺便贴出我自己对UA写的的CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//多说评论样式
.theme-next #ds-reset .duoshuo-ua-platform, .theme-next #ds-reset .duoshuo-ua-browser {
color: #fff;
}
.duoshuo-ua-browser{background-color: #ccc!important;border-radius: 4px;padding: 0 5px!important;margin: 0 1px!important;
border: 1px solid #BBB!important;color: #fff;
}
.duoshuo-ua-platform{background-color: #ccc!important;border-radius: 4px;padding: 0 5px!important;margin: 0 1px!important;
border: 1px solid #BBB!important;color: #fff;}
.duoshuo-ua-platform-windows{background-color: #39b3d7!important;border-color: #46b8da!important;}
.duoshuo-ua-platform-linux {background-color: #3A3A3A!important;border-color: #1F1F1F!important;}
.duoshuo-ua-platform-android {background-color: #00C47D!important;border-color: #01B171!important;}
.duoshuo-ua-platform-ios{background-color: #ccc!important;border-color: #ccc!important;}
.duoshuo-ua-browser-chrome{background-color: #5cb85c!important;border-color: #4cae4c!important;}
.duoshuo-ua-browser-firefox{background-color: #f0ad4e!important;border-color: #eea236!important;}
.duoshuo-ua-browser-ie{background-color: #428bca!important;border-color: #357ebd!important;}
.duoshuo-ua-browser-opera{background-color: #d9534f!important;border-color: #d43f3a!important;}
.duoshuo-ua-browser-mobile safari{background-color: #ccc!important;border-color: #ccc!important;}

这段代码其实一看是没有对IOS系统和对应的safri浏览器进行CSS样式的编写,大家自己可以去定义,如果不定义有一个默认样式,会对这些无法识别的系统和浏览器有样式效果,就是灰色的背景而已。

End

最后有什么不懂的,或者一些没讲到的,欢迎在下面评论,因为目前2017年相关的hexo下next主题教程几乎没有,所以为了大家少走弯路,希望多提出意见。


关于这个next主题的优化,基本上算是讲完了,如果有网友有其他需求讲解可以私下找我。
我后面会出的有关文章类型,大概方向为:
网站seo优化——网站收录心得、站点地图使用、爬虫协议等简单介绍和使用
网站性能优化——用OSS对象存储来放图片等

坚持原创技术分享,您的支持将鼓励我继续创作!
Fork me on GitHub