本文为2021年教程，hexo以及主题版本迭代较快具有时效性，方法可能发生改变，酌情观看
效果预览
第一步添加设置项
- 在主题文件夹里面的source/js文件夹下新建一个sidelar.js文件，将以下内容填进去
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$(function(i) {
function t(t) {
this.options = {
container: "slider",
imgs: [],
link: [],
duration: "normal",
delay: 2e3,
direction: "left",
auto: !0,
arrows: !0,
width: 520,
height: 300
}, this.options = i.extend(this.options, t), this.time = null, this.nowIndex = 0, this.liWidth = this.options.width,
this.itemNum = this.options.imgs.length, this.id = this.options.container, this.init()
}
t.prototype.init = function() {
this.createDom(), this.bindEvent(), this.autoMove()
}, t.prototype.createDom = function() {
for (var t = this, s = this.options.imgs, n = this.options.link, e = i("<ul class='" + this.id + "-ul'></ul>"), o =
"", l = i("<div class='" + this.id + "-circlex'><ul class='" + this.id + "-circlex-ul'></ul></div>"), h = "", d =
0; d < s.length; d++) {
var a = 0 === d ? "active" : "";
o += "<li style='width: " + t.liWidth + "px;' class='" + this.id + "-ul-li'><a class='" + this.id +
"-ul-li-a' href='" + n[d] + "'><img class='" + this.id + "-ul-li-a-img' src='" + s[d] + "'></a></li>", d === s.length -
1 && (o += "<li class='" + this.id + "-ul-li'><a class='" + this.id + "-ul-li-a' href='" + n[0] +
"'><img class='" + this.id + "-ul-li-a-img' src='" + s[0] + "'></a></li>"), h += "<li class='" + this.id +
"-circlex-ul-li " + a + "'></li>"
}
var c = "<a class='" + this.id + "-btn-prev'><span class='" + this.id + "-btn-prev-span'></span></a>",
r = "<a class='" + this.id + "-btn-next'><span class='" + this.id + "-btn-next-span'></span></a>",
u = i("<div class='" + this.id + "-btn hide'>" + c + r + "</div>");
e.append(o), l.children().append(h), i("#" + this.id).css({
width: t.options.width,
height: t.options.height
}), i("#" + this.id).append(e).append(l).append(u)
}, t.prototype.changeStyle = function() {
i("." + this.id + "-circlex-ul-li.active").removeClass("active"), this.nowIndex === this.itemNum ? i("." + this.id +
"-circlex-ul-li").eq(0).addClass("active") : i("." + this.id + "-circlex-ul-li").eq(this.nowIndex).addClass(
"active")
}, t.prototype.move = function(t) {
"left" === t ? (this.nowIndex === this.itemNum && (this.nowIndex = 0, i("." + this.id + "-ul").css("left", 0)),
this.nowIndex++) : "right" === t ? (0 === this.nowIndex && (this.nowIndex = this.itemNum, i("." + this.id +
"-ul").css("left", -this.nowIndex * this.liWidth + "px")), this.nowIndex--) : this.nowIndex = t, this.changeStyle(),
this.slider()
}, t.prototype.autoMove = function() {
var i = this;
this.options.auto && (clearTimeout(i.time), i.time = setTimeout((function() {
i.move(i.options.direction)
}), i.options.delay))
}, t.prototype.slider = function() {
var t = this;
i("." + this.id + "-ul").stop().animate({
left: -t.nowIndex * t.liWidth + "px"
}, t.options.duration, (function() {
t.autoMove(t.options.direction)
}))
}, t.prototype.bindEvent = function() {
var t = this;
i("." + this.id + "-circlex-ul-li").on("click", (function() {
i(this).addClass("active").siblings().removeClass("active"), t.move(i(this).index())
})), i("." + this.id + "-btn-prev").on("click", (function() {
t.move("right")
})), i("." + this.id + "-btn-next").on("click", (function() {
t.move("left")
})), t.options.arrows && i("#" + this.id).on("mouseenter", (function() {
i(this).find("." + this.id + "-btn").removeClass("hide")
})).on("mouseleave", (function() {
i(this).find("." + this.id + "-btn").addClass("hide")
}))
}, i.fn.extend({
sliderImg: function(i) {
new t(i)
}
})
}(jQuery)); - 打开_config.volantis.yml文件,搜索 plugins ,在其下面添加如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23########### 图片轮播 ##############
slider:
enable: true
js: /js/sidelar.js
img_1: https://cdn.jsdelivr.net/gh/liaoblog/img@master/blogpage/lb1.jpg
link_1: /
img_2: https://cdn.jsdelivr.net/gh/liaoblog/img@master/blogpage/lb2.jpg
link_2: https://space.bilibili.com/334485942
#img_3: https://cdn.jsdelivr.net/gh/liaoblog/img@master/blogpage/Daily%20Reminder.jpg
#link_3: http://tblack.cn:9999
#img_4: https://cdn.jsdelivr.net/gh/liaoblog/img@master/blogpage/lb3.jpg
#link_4: /about/
# img_5: https://cdn.jsdelivr.net/gh/Goopher97/tuchuang@master/img/shiyongvolantisgengyouya.png
# link_5: /posts/16065.html
#增加的话在\layout\_third-party\slider里面imgs:和link:属性里面追加
########### 热门文章 ##############
hot_post:
###### 热门文章1 #####
pic_one: https://cdn.jsdelivr.net/gh/liaoblog/img@master/blogpage/Daily%20Reminder.jpg
post_one: http://tblack.cn:9999
###### 热门文章2 #####
pic_two: https://cdn.jsdelivr.net/gh/liaoblog/img@master/blogpage/lb3.jpg
post_two: /about/第二步修改ejs
- 打开layout/_partial/scripts/index.ejs文件, 找到这一行,在其上面添加:
1
<%- partial('../../_third-party/analytics/script') %>
1
2
3
4<% if (theme.plugins.slider.enable) { %>
<%- js(theme.plugins.slider.js) %>
<%- partial('../../_third-party/slider/script') %>
<% } %> - 打开layout/_third-party/文件夹,在里面新建一个名为slider的文件夹,再在里面新建一个名为layout.ejs的文件,其文件内容为:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<div class="slider">
<div id="slider" style="width: 520px; height: 300px;"></div>
<div class="hot_post">
<div class="index-banner">
<a href="<%- theme.plugins.hot_post.post_one %>" target="_self">
<img src="<%- theme.plugins.hot_post.pic_one %>">
</a>
</div>
<div class="index-banner forpadding">
<a href="<%- theme.plugins.hot_post.post_two %>" target="_self">
<img src="<%- theme.plugins.hot_post.pic_two %>">
</a>
</div>
</div>
</div> - 再新建一个名为script.ejs的文件,其内容如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14<script>
function pjax_slider() {
if($('#slider')[0]) {
$("#slider").sliderImg({
imgs: ["<%- theme.plugins.slider.img_1 %>", "<%- theme.plugins.slider.img_2 %>"],
link: ["<%- theme.plugins.slider.link_1 %>", "<%- theme.plugins.slider.link_2 %>"],
});
}
}
$(function () {
pjax_slider();
});
volantis.pjax.push(pjax_slider)
</script> - 之后打开layout/index.ejs文件,找到这一行,并在这一行上面添加:
1
<%- partial('_partial/archive') %>
1
2
3
4<% if (theme.plugins.slider.enable) { %>
<%- partial('_third-party/slider/layout') %>
<% } %>第三步新建样式
- 打开source/css/_plugins/文件夹,在里面新建一个名为slider.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.hide{
display: none;
}
.slider
display flex
align-items center
#slider{
@media screen and (max-width: 800px){
display: none
}
border-radius:10px
position: relative;
overflow: hidden;
max-height:400px
margin-top:auto;
}
.slider-ul{
position: absolute;
width: 999999999px;
height: 100%;
}
.slider-ul-li{
width: 520px;
height: 100%;
display: inline-block;
}
.slider-ul-li-a, .slider-ul-li-a-img{
width: 100%;
height: 100%;
}
.slider-circlex{
position: absolute;
bottom: 20px;
right: 0;
left: 0;
text-align: center;
}
.slider-circlex-ul{
display: inline-block;
border-radius: 8px;
background-color: red;
background: rgba(0, 0, 0, 0.3);
padding: 2px;
font-size: 0;
}
.slider-circlex-ul-li{
display: inline-block;
width: 7px;
height: 7px;
background-color: #FFF;
border-radius: 50%;
margin: 0 4px;
cursor: pointer;
}
.slider-circlex-ul-li.active{
background-color: red;
}
.slider-btn{
position: absolute;
top: 50%;
right: 0;
left: 0;
margin-top: -15px;
}
.slider-btn a{
position: absolute;
width: 30px;
height: 30px;
text-align: center;
cursor: pointer;
background-color: rgba(0, 0, 0, .5);
}
.slider-btn-next{
right: -5px;
border-radius: 50% 0 0 50%;
}
.slider-btn-prev{
left: -5px;
border-radius: 0 50% 50% 0;
}
.slider-btn-prev-span, .slider-btn-next-span{
display: inline-block;
width: 10px;
height: 20px;
margin-top: 4px;
position: relative;
}
.slider-btn-prev-span::after, .slider-btn-next-span::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 7px;
margin-top: -3.5px;
}
.slider-btn-prev-span::after{
border-left: 2px solid #FFF;
border-top: 2px solid #FFF;
transform: rotate(-45deg);
margin-left: -2px;
}
.slider-btn-next-span::after{
border-right: 2px solid #FFF;
border-bottom: 2px solid #FFF;
transform: rotate(-45deg);
margin-left: -7px;
}
.l_main .post-list {
margin-top: 15px
@media screen and (max-width: 800px) {
margin-top: 0px
}
}
.hot_post
display flex
flex 1
flex-direction column
margin-left 10px
@media screen and (max-width: 800px)
display none
.index-banner
flex 1
font-size 0
&.forpadding
margin-top 10px
.hot_post img
display inline-block
width 100%
border-radius 10px
height 145px - 然后打开同目录下的index.styl文件,找到在这两行的下面添加:
1
2if hexo-config('plugins.pjax.enable') and hexo-config('plugins.pjax.animation')
@import 'pjaxanimate'1
2if hexo-config('plugins.slider.enable')
@import 'slider'最后
1
hexo clean && hexo g && hexo s
移动端开启显示图片轮播(默认为关)
- 修改slider.styl文件即可
1
2
3
4
5
6
7
8
9
10#slider{
@media screen and (max-width: 800px){
display: none
}
border-radius:10px
position: relative;
overflow: hidden;
max-height:400px
margin-top:auto;
} - display: none将图片轮播隐藏了
1
2
3
4
5
6
7.hot_post
display flex
flex 1
flex-direction column
margin-left 10px
@media screen and (max-width: 800px)
display none - 同样是display none将热门文章隐藏了,你可以直接将其删除或者修改为自己想要的样式即可。
