hexo博客valine评论样式美化 - Sanarous的博客

hexo博客valine评论样式美化

valine是一款比较轻量级的纯前端的评论系统,目前很多个人博客都在使用valine评论系统,并且支持匿名留言。
Valine的Github地址
我个人也是很喜欢这一款评论系统的,之前用过来必力、Gitalk等评论系统,都觉得很难用,尤其是来必力,这款韩国人做的评论系统在国内使用很容易出现加载非常慢的情况,往往博客内容都加载完成评论系统还需要好久才加载完,在国内体验比较差吧。
那么valine默认的样式其实比较素,当然不同人喜欢的风格都不一样,如果有喜欢我这种评论样式的,不妨留个言并且在文章末尾给个五星好评吧~

注意:本valine美化目前只适应于valine1.3.4版本的,如果是其它版本的可能css样式会错乱。

具体更改valine版本的话,主要是更改valine的js版本,比如我的是next主题,那么就在主题目录下next\layout\_third-party\comments\valine.swig中找到引入valine.js<script></script>语句,我是将valine的1.3.4版本的js放到目录本地的,所以将引入js的语句改成了:<script src="/js/src/valine1.3.4.js"></script>
当然不同版本的next主题中valine.swig中内容也不同。
比如next6主题的valine.swig中代码是这样的:

1
2
3
4
5
{% set valine_uri = '//unpkg.com/valine/dist/Valine.min.js' %}
{% if theme.vendors.valine %}
{% set valine_uri = theme.vendors.valine %}
{% endif %}
<script src="{{ valine_uri }}"></script>

而next5主题的就在valine.swig开头,内容如下:

1
2
3
{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>

而url中//unpkg.com/valine/dist/Valine.min.js默认是引入最新的valine.js文件,所以不管是next5还是next6主题都是修改这个url地址,只要修改成valine1.3.4版本的js文件即可。

然后打开主题目录下next\source\css\_custom\custom.styl,在文件末尾添加如下代码:

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
/*valine 评论系统样式*/
div#comments.comments.v{
margin-top: 0px !important;
margin-left: 0px !important;
margin-right: 0px !important;
}

div.vheader.item2{
border-bottom: 1px solid #5f5f5f;
height: 35px !important;
}

.v .vwrap .vheader.item2 .vinput{
height: 30px !important;
border: 0px !important;
width: 25% !important;
margin: 0px !important;
}

input.vnick.vinput{
border-right: 2px solid #a4d8fa !important;
}

div.vcontrol{
padding-top: 0px !important;
}

div#comments.comments.v{
border: 0px;
}


.v .vwrap{
border: 2px solid black !important;
height: 250px !important;
border-radius: 6px !important;
overflow: visible !important;
counter-reset: avater;
}

.v .vwrap .vedit .vemojis{
width: 600px !important;
background-color: #fff !important;
border-radius: 5px !important;
}

.v .vwrap .vedit .vpreview {
width: 600px !important;
background-color: #fff !important;
border-radius: 5px !important;
}

.v .vbtn{
background-color: #971212 !important;
color: #fff !important;
}

.v .vwrap .vedit .vctrl{
text-align: left !important;
}

.v .vwrap .vedit .vctrl span{
background-color: #7f7f7f !important;
color: #fff !important;
border-radius: 3px !important;
padding: 3px !important;
}

.v .vwrap .vedit .vctrl{
padding: 0px !important;
margin: 0px !important;
}

.v .vlist .vcard .vquote .vcontent {
font-size: 15px;
font-weight: 200;
}

div.vedit{
height: 120px;
}
div.vcontrol{
margin-top: 30px;
}

.v .veditor{
min-height: 70px !important;
height: 100px !important;
}

.v .vlist .vcard {
border: 1px solid #ccc !important;
padding-left: 14px !important;
padding-right: 14px !important;
margin-bottom: 20px !important;
border-radius: 10px !important;
}
.v .vlist .vquote .vcard{
border: 0px !important;
margin-bottom: 0px !important;
border-radius: 0px !important;
padding: 0px !important;
}

.v .vlist .vcard .vhead .vsys{
display:none !important;
background-color: #fff !important;
}
.v .vlist .vcard .vh .vmeta .vat{
background-color: #177714 !important;
color: #fff !important;
border-radius: 3px !important;
padding-left: 10px !important;
padding-right: 10px !important;
}

.v .vlist .vcard .vimg{
margin: 0 12px 0 0;
counter-increment: avater;
}

/*设置评论头像旋转*/
.v .vlist .vcard .vimg:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-transform: rotate(360deg);
}

.v .vlist .vcard .vquote{
margin-left: 40px;
}

.v .vlist .vcard .vquote{
counter-reset: avaters;
}

.v .vlist .vcard .vquote .vimg{
display: avaters !important;
}

.v .vlist .vcard .vquote .vhead:before{
display: block;
float: left;
width: 38px;
height: 38px;
line-height: 38px;
margin: 0 12px 0 0;
color: #fff;
font-size: 15px;
font-weight: bold;
font-style: normal;
background-color: #2d4e41;
border: 3px solid #60a1e5;
border-radius: 50%;
text-align: center;

/*content: counter(avater)'.'counter(avaters);
counter-increment: avaters;*/
}

.v .vlist .vcard p {
top: -1.5em;
position: relative;
z-index: 1;
margin: unset;
}

.v .vlist .vcard .vquote a.at {
font-size: 13px;
color: #bea124;
text-decoration: none;
border: unset;
position: relative;
top: -40px;
}
.v .vlist .vcard .vquote .vcontent{
font-size: 15px;
font-weight: 200;
}

.v .vlist .vcard .vcontent {
margin-top: 58px !important;
font-size: 15px !important;
font-weight: 500 !important;
padding-top: 0 !important;
margin-bottom: unset !important;
}

.v .vlist .vcard .vquote .vhead .vnick {
color: #5af !important;
font-weight: 300 !important;
font-size: 15px !important;
}
.v .vlist .vcard .vhead .vnick {
font-size: 18px !important;
font-weight: 500 !important;
color: #5b6b68 !important;
}

.v .vlist .vcard{
padding-top: 8px !important;
}

.v .vlist .vcard .vhead{
float: left !important;
}

.v .vlist .vcard .vh .vmeta{
float: right !important;
}

.v .vlist .vcard .vcontent.expand:after{
content: "点击查看全部" !important;
font-weight: 400 !important;
}
/**/

其中有需要自己修改的地方可以在浏览器中F12自行修改css样式即可。

如果这篇文章对您很有帮助,不妨
-------------    本文结束  感谢您的阅读    -------------
0%