抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

本文为2021年教程,hexo以及主题版本迭代较快具有时效性,方法可能发生改变,酌情观看

效果预览

第一步添加设置项

  1. 在主题文件夹里面的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));
  2. 打开_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

  3. 打开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') %>
    <% } %>
  4. 打开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>
  5. 再新建一个名为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>
  6. 之后打开layout/index.ejs文件,找到
    1
    <%- partial('_partial/archive') %>
    这一行,并在这一行上面添加:
    1
    2
    3
    4
    <% if (theme.plugins.slider.enable) { %>
    <%- partial('_third-party/slider/layout') %>
    <% } %>

    第三步新建样式

  7. 打开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
  8. 然后打开同目录下的index.styl文件,找到
    1
    2
    if hexo-config('plugins.pjax.enable') and hexo-config('plugins.pjax.animation')
    @import 'pjaxanimate'
    在这两行的下面添加:
    1
    2
    if hexo-config('plugins.slider.enable')
    @import 'slider'

    最后

    1
    hexo clean && hexo g && hexo s

    移动端开启显示图片轮播(默认为关)

  9. 修改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;
    }
  10. 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
  11. 同样是display none将热门文章隐藏了,你可以直接将其删除或者修改为自己想要的样式即可。

评论