hexo博客首页添加轮播图 - Sanarous的博客

hexo博客首页添加轮播图

由于我个人使用的是next主题,所以以下均为next主题设置步骤介绍,其它hexo博客主题使用方法类似,建议自己尝试修改。

第一步:添加配置

首先我们需要进入themes\next\layout下的index文件,找到如下代码:

1
{% block content %}

然后在这段代码的下面添上一行代码:

1
{% include '_macro/carousel.swig' %}

第二步:添加文件

由于上面添加了文件,所以这里我们需要创建该文件。

themes\next\layout\macro文件下创建carousel.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
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
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
{% if theme.carousel.enable %}
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">

.glyphicon-chevron-left{
position: absolute;
width: 25px;
height: 35px;
line-height: 36px;
text-align: center;
opacity: .5;
vertical-align: middle;
background: rgba(0,0,0);
left: 5px;
top: 45%;
color: #fff;
font-family: "宋体";
font-size: 20px;
font-weight: bold;
display: inline-block;
cursor: pointer;
display: none;
}

.glyphicon-chevron-left:before{
content: "<";
}
.glyphicon-chevron-right{
position: absolute;
width: 25px;
height: 35px;
line-height: 36px;
text-align: center;
opacity: .5;
vertical-align: middle;
background: rgba(0,0,0);
top: 45%;
right: 5px;
color: #fff;
font-family: arial;
font-size: 20px;
font-weight: bold;
display: inline-block;
cursor: pointer;
font-family: "宋体";
display: none;
}
.glyphicon-chevron-right:before{
content: ">";
}

/*设置鼠标移入显示左右切换按钮*/
#myCarousel:hover .glyphicon-chevron-left,
#myCarousel:hover .glyphicon-chevron-right{
display: block;
}

/*设置手机端不展示轮播图*/
@media (max-width: 767px){
.rights{
display: none;
}
.carousel{
display: none;
}
.slide{
width: 100% !important;
height: 100% !important;
}
.tag-cloud{
display: none;
}
}

.carousel{
width: 65%;
height: 100%;
position: relative;
}

.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}

.carousel-inner > .item {
display: none;
position: relative;
-webkit-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item {
-webkit-transition: -webkit-transform 0.6s ease-in-out;
-moz-transition: -moz-transform 0.6s ease-in-out;
-o-transition: -o-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
left: 0;
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
left: 0;
}
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
background-color: rgba(0, 0, 0, 0);
}
.carousel-control.left {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
left: auto;
right: 0px;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control:hover,
.carousel-control:focus {
outline: 0;
color: #fff;
text-decoration: none;
}


.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left{
left: 9px;
}

.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
right: 0px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 20px;
height: 20px;
line-height: 1;
font-family: serif;
}

.carousel-indicators {
opacity: 0.4;
position: absolute;
bottom: 2px;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
}
.carousel-indicators li {
display: inline-block;
width: 30px;
height: 3px;
margin: 5px;
text-indent: -999px;
border: 1px solid #bbb;
cursor: pointer;
background-color: rgba(0,0,0,.24);
}
.carousel-indicators .active {
width: 30px;
height: 3px;
background-color: #fff;
}
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .btn {
text-shadow: none;
}
@media screen and (min-width: 768px) {
.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
margin-left: -10px;
}
.carousel-caption {
left: 20%;
right: 20%;
padding-bottom: 30px;
}
.carousel-indicators {
bottom: -14px;
}
}
</style>
<div width="100%" height="320px" style="border: 0px; overflow: hidden; border-radius: 10px;" scrolling="no">

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3500" >
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
{% set index = 0 %}
{% for item in theme.carousel.item %}

<li data-target="#myCarousel" data-slide-to="{{index}}"></li>
{% set index = index+1 %}

{% endfor %}
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner" style="height: 280px; border-radius: 10px; width: 100%;">

{% set act = 0 %}
{% for item in theme.carousel.item %}

{% if act===0 %}
<a class="item active" href="{{ url_for(item.link) }}" target="_blank" style="height: 100%;">
<img src="{{item.img}}" style="width: 100%; height: 100%" >
</a>
{% set act = 1 %}
{% elseif act===1 %}
<a class="item" href="{{ url_for(item.link) }}" target="_blank" style="height: 100%;">
<img src="{{item.img}}" style="width: 100%; height: 100%;" >
</a>
{% endif %}

{% endfor %}


</div>
<!-- 轮播(Carousel)导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

</a>
</div>
</div>

{% endif %}

第三步:配置文件中配置图片及链接

在next主题(其它主题也可以)中的_config.xml主题配置文件中末尾添加如下配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
#Home carousel map, from means link, img means picture
carousel:
enable: true
item: [
{
'link':'文章链接1',
'img':'图片链接1'
},
{
'link':'文章链接2',
'img':'图片链接2'
},
]

要有几张轮播图就配置几个数组内容即可,比如我的是:

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
# 配置首页轮播图
carousel:
enable: true
item: [
{
'link':'/messageboard/',
'img':'https://blogimage-1258928558.cos.ap-guangzhou.myqcloud.com/%E8%BD%AE%E6%92%AD%E5%9B%BE/my-blog.png'
},
{
'link':'https://github.com/996icu/996.ICU',
'img':'https://blogimage-1258928558.cos.ap-guangzhou.myqcloud.com/%E8%BD%AE%E6%92%AD%E5%9B%BE/996.png'
},
{
'link':'/tags/JVM/',
'img':'https://blogimage-1258928558.cos.ap-guangzhou.myqcloud.com/%E8%BD%AE%E6%92%AD%E5%9B%BE/JVM.png'
},
{
'link':'/posts/258aee07.html',
'img':'https://blogimage-1258928558.cos.ap-guangzhou.myqcloud.com/%E8%BD%AE%E6%92%AD%E5%9B%BE/%E5%A4%9A%E7%BA%BF%E7%A8%8B.png'
},
{
'link':'/tags/博客/',
'img':'https://blogimage-1258928558.cos.ap-guangzhou.myqcloud.com/%E8%BD%AE%E6%92%AD%E5%9B%BE/hexo.png'
},
{
'link':'https://promotion.aliyun.com/ntms/act/campus2018.html',
'img':'https://blogimage-1258928558.cos.ap-guangzhou.myqcloud.com/%E8%BD%AE%E6%92%AD%E5%9B%BE/19010107.jpg'
},
]

第四步:清除缓存,重新生成渲染

素质三连:hexo clean && hexo g && hexo s即可本地看到效果。


注意:开启这种轮播图形式的时候,在主题配置文件中不要开启fancybox,这个设置需要设置为false,不然在点击图片进行跳转时会出现The requested content cannot be loaded.Please try again later.错误
如果这篇文章对您很有帮助,不妨
-------------    本文结束  感谢您的阅读    -------------
0%