店长原教程:源计划-方舟:首页轮播图

点击查看预览效果

布置教程

  1. 这里如果有安装其它轮播图插件的用cmd终端卸载,最好用管理员身份执行,可以自己去根目录下的package.json文件下查询你有安装哪些插件。

    1
    2
    # 后面加载为你安装的swiper轮播图插件
    npm uninstall hexo-butterfly-swiper --save
  2. 本篇需要用到iconfont作为卡片底部的装饰性图标。去阿里图标库加载引入到文章,务必确保symbol方案能够使用后再进行下方内容。

    anzhiyu主题可以直接引入,butterfly主题要引入阿里图标配置项。详情看hexo-butterfly主题美化记录。(引入后放入如下位置。)

    • anzhiyu主题

      1
      2
      3
      4
      icons:
      ali_iconfont_js: # 阿里图标symbol 引用链接,主题会进行加载 symbol 引用
      fontawesome: true #是否启用fontawesome6图标
      fontawesome_animation_css: #fontawesome_animation 如果有就会加载,示例值:https://npm.elemecdn.com/[email protected]/lib/assets/font-awesome-animation.min.css
    • butterfly主题

      1
      2
      3
      4
      5
      inject:
      head:
      # - <link rel="stylesheet" href="/css/custom.css"> # 自定义css文件
      bottom:
      - <script src="//at.alicdn.com/t/c/font_3855261_r5lzgvwjjsm.js"></script>
  3. [Blogroot]\themes\butterfly\scripts\helpers\目录下新建ark_icon.js,这个js的作用是返回一个随机的图标值,注意以下icon[]内部的图标均为个人图标库内的图标名称。请务必记得替换成你自己的图标。且这是个内部函数,必须保证在scripts目录下,不要自作聪明建在别的目录还到inject配置项去引入

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    hexo.extend.helper.register('arkicon', function () {
    var icon = [
    '#icon-a-42_data-analysisai-m-olap',
    '#icon-a-68_devcloud-collaboration',
    '#icon-a-355_wsa',
    '#icon-V',
    ]
    var index = Math.floor(Math.random()*icon.length);
    return icon[index]
    });
  4. [Blogroot]\themes\butterfly\scripts\helpers\目录下新建swiperbar.js文件,这个脚本的作用是返回在front-matter设置了swiper_index数值的文件,如果有在md写过这个应该很熟悉。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    'use strict'

    hexo.extend.helper.register('swiper_list', function (locals) {
    var posts_list = hexo.locals.get('posts').data;
    var swiper_list = []
    // 若文章的front_matter内设置了index和描述,则将其放到swiper_list内
    for (var item of posts_list) {
    if (item.swiper_index) {
    swiper_list.push(item)
    }
    }
    // 对swiper_list进行处理,使其按照index大小进行排序
    function sortNumber(a, b) {
    return a.swiper_index - b.swiper_index
    }
    swiper_list = swiper_list.sort(sortNumber);
    // 排序反转,使得数字越大越靠前
    swiper_list = swiper_list.reverse();
    return swiper_list;
    })
  5. [Blogroot]\themes\butterfly\layout\includes\custom\目录下新建ark_swiperBar.pug,下面的有些内容和店长的不一样了,这里是进行了更改过的样式。

    这里使用的是安知鱼的主题的可以不用创建另一个custom文件夹,可以把它放入到anzhiyu文件夹内,用这个目录的要更改index.pug路径(看第6个布置)。

    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
    .recent-post-item#swiperBar
    #ark-swiper-container
    .swiper-wrapper.ark-swiper-wrapper
    //- 文章卡片
    if theme.pjax.enable
    each item in swiper_list()
    //- 内容版块
    .swiper-slide.ark-swiper-item
    //- 封面
    .ark-swiper-item-cover
    img.article-cover(src=item.cover title='' onerror=`this.src=` + theme.swiperBar.error_img + `; this.onerror = null;`)
    //- 时间
    if (theme.swiperBar.timemode === 'updated' )
    .ark-swiper-item-time
    span= item.updated.format('YYYY-MM-DD')
    else
    .ark-swiper-item-time
    span= item.date.format('YYYY-MM-DD')
    //- 标题和描述
    .ark-swiper-item-info
    a.ark-swiper-item-title(onclick=`pjax.loadUrl("` + item.path + `");` title='')
    .ark-swiper-item-title-link= item.title
    a.ark-swiper-item-description(onclick=`pjax.loadUrl("` + item.path + `");` title='')
    .ark-swiper-item-description-text!= item.description ? item.description : theme.swiperBar.default_descr
    //- 装饰图标盲盒
    svg.icon.ark-swiper-item-decoration(aria-hidden="true")
    use(xlink:href=arkicon())
    else
    each item in swiper_list()
    //- 内容版块
    .swiper-slide.ark-swiper-item
    //- 封面
    a.ark-swiper-item-cover(href=item.path title='')
    img.article-cover(src=item.cover title='' onerror=`this.src=` + theme.swiperBar.error_img + `; this.onerror = null;`)
    //- 时间
    if (theme.swiperBar.timemode === 'updated' )
    .ark-swiper-item-time
    span='updated:'
    span= item.updated.format('YYYY-MM-DD')
    else
    .ark-swiper-item-time
    span='updated:'
    span= item.date.format('YYYY-MM-DD')
    //- 标题和描述
    .ark-swiper-item-info
    a.ark-swiper-item-title(href=item.path title='')
    .ark-swiper-item-title-link= item.title
    a.ark-swiper-item-description(href=item.path title='')
    .ark-swiper-item-description-text!= item.description ? item.description : theme.swiperBar.default_descr
    //- 装饰图标盲盒
    svg.icon.ark-swiper-item-decoration(aria-hidden="true")
    use(xlink:href=arkicon())
    .swiper-pagination.ark-swiper-pagination

    script(defer src=url_for(theme.swiperBar.swiper_js))
    script(defer data-pjax src=url_for(theme.swiperBar.swiper_init_js))
  6. [Blogroot]\themes\butterfly\layout\目录下找到index.pug文件,在其中引入轮播图组件。

    强调:这里用的路径自行更改,不要后面报错了都不知道是哪里的问题。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
      extends includes/layout.pug

    block content
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts
    + if theme.swiperBar.enable
    + !=partial('includes/custom/ark_swiperBar', {}, {cache: true})
    if theme.categoryBar.enable
    !=partial('includes/custom/categoryBar', {}, {cache: true})
    +postUI
    include includes/pagination.pug
  7. [Blogroot]\themes\butterfly\source\css\_layout\目录下新建ark_swiper_bar.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
    //default color:
    :root
    --ark-post-item-screen: rgba(61, 146, 204,0.6) //描述卡片背景
    --ark-post-item-font-color: #fff //字体颜色
    --ark-post-item-box-shadow: rgba(111, 160, 225,0.8) //边框光晕颜色
    [data-theme="dark"]
    --ark-post-item-screen: rgba(61, 146, 204,0.6) //描述卡片背景
    --ark-post-item-font-color: rgb(233, 233, 233)//字体颜色
    --ark-post-item-box-shadow: rgba(252, 252, 252, 0.8) //边框光晕颜色
    .icon
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    .recent-post-item
    &#swiperBar
    width: 100%;
    position: relative
    #ark-swiper-container
    width: 100%;
    height: 230px;
    overflow: hidden;
    position: relative;
    border-radius: 15px;
    .ark-swiper-wrapper
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: row;
    .ark-swiper-item
    position: relative
    width: 100%;
    height: 260px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 0 3px inset var(--ark-post-item-box-shadow);
    .ark-swiper-item-cover
    height: 100%;
    display: flex;
    position: absolute;
    top: 0
    left: 0
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 0
    img
    object-fit: cover;
    width: 100%;
    height: 100%
    z-index: 1;
    opacity: 0.8
    .ark-swiper-item-time
    width: 100%;
    color: var(--ark-post-item-font-color);
    font-size: 25px;
    text-shadow: 2px 2px 3px black;
    background: var(--heo-theme);
    font-family: 'UnidreamLED';
    display: flex;
    position: absolute;
    height: 43px;
    top: calc(50% - -90px);
    align-items: center;
    justify-content: center;
    z-index: 2;
    span
    margin: 0 3px
    .ark-swiper-item-info
    flex-direction: column;
    background: var(--heo-zhuti)
    height: 100%;
    display: flex;
    position: absolute
    top: 0
    right: 0
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    overflow: hidden;
    z-index: 0;
    a.ark-swiper-item-title
    width: 100%;
    height: 50%;
    color: var(--ark-post-item-font-color);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    .ark-swiper-item-title-link
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    ark_post_item_link_hover()
    .ark-swiper-item-description
    color: var(--ark-post-item-font-color);
    display: flex;
    text-align: start;
    width: 100%;
    height: 50%;
    justify-content: center;
    align-items: center;
    .ark-swiper-item-description-text
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    .ark-swiper-item-decoration
    width: 130px;
    height: 130px;
    opacity: 1;
    position: absolute;
    top: calc(50% - 80px);
    left: calc(50% - 65px);
    z-index: -1
    animation: avatar_turn_around 1.5s ease-in-out infinite;
    display: inline-block;
    .ark-swiper-pagination
    bottom: 0px;
    left: 0;
    right: 0;
    margin: 40px auto;
    //宽屏样式
    @media screen and (min-width:768px)
    .recent-post-item
    &#swiperBar
    height: 260px;
    &::after
    content: ""
    display: block
    height: 86%
    width: 100%
    position: absolute
    background:var(--heo-theme)
    z-index: 3
    left: 0
    top: 0
    clip-path: polygon(50% 50%, 45px 50%, 45px 45px, 60px 45px, 65px 40px, 40px 40px, 40px calc(50% - 10px), 45px calc(50% - 10px), 45px 50%, 25px 50%, 25px calc(50% - 15px), 10px calc(50% - 15px), 10px calc(50% - 10px), 25px calc(50% - 10px), 25px calc(50% - 2.5px), 0 calc(50% - 2.5px), 0 50%, 50% 50%, 45px 50%, 45px calc(100% - 45px), 60px calc(100% - 45px), 65px calc(100% - 40px), 40px calc(100% - 40px), 40px calc(50% + 10px), 45px calc(50% + 10px), 45px 50%, 25px 50%, 25px calc(50% + 15px), 10px calc(50% + 15px), 10px calc(50% + 10px), 25px calc(50% + 10px), 25px calc(50% + 2.5px), 0 calc(50% + 2.5px), 0 50%, 50% 50%, calc(100% - 45px) 50%, calc(100% - 45px) 45px, calc(100% - 60px) 45px, calc(100% - 65px) 40px, calc(100% - 40px) 40px, calc(100% - 40px) calc(50% - 10px), calc(100% - 45px) calc(50% - 10px), calc(100% - 45px) 50%, calc(100% - 25px) 50%, calc(100% - 25px) calc(50% - 15px), calc(100% - 10px) calc(50% - 15px), calc(100% - 10px) calc(50% - 10px), calc(100% - 25px) calc(50% - 10px), calc(100% - 25px) calc(50% - 2.5px), 100% calc(50% - 2.5px), 100% 50%, 50% 50%, calc(100% - 45px) 50%, calc(100% - 45px) calc(100% - 45px), calc(100% - 60px) calc(100% - 45px), calc(100% - 65px) calc(100% - 40px), calc(100% - 40px) calc(100% - 40px), calc(100% - 40px) calc(50% + 10px), calc(100% - 45px) calc(50% + 10px), calc(100% - 45px) 50%, calc(100% - 25px) 50%, calc(100% - 25px) calc(50% + 15px), calc(100% - 10px) calc(50% + 15px), calc(100% - 10px) calc(50% + 10px), calc(100% - 25px) calc(50% + 10px), calc(100% - 25px) calc(50% + 2.5px), 100% calc(50% + 2.5px), 100% 50%, 50% 50%)
    #ark-swiper-container
    .ark-swiper-wrapper
    .ark-swiper-item
    .ark-swiper-item-cover
    width: 100%;
    .ark-swiper-item-time
    transform: rotateZ(-0deg);
    .ark-swiper-item-info
    width: 100%;
    text-shadow: 2px 2px 3px #000;
    a.ark-swiper-item-title
    padding: 30px 40px;
    font-size: 30px;
    line-height: 50px;
    .ark-swiper-item-title-link
    -webkit-line-clamp: 2
    .ark-swiper-item-description
    padding: 0px 40px 70px;
    font-size: 16px;
    line-height: 30px;
    .ark-swiper-item-description-text
    -webkit-line-clamp: 3

    @media screen and (max-width:768px)
    .recent-post-item
    &#swiperBar
    height: 200px;
    padding: 0px 0px
    #ark-swiper-container
    width: 100%;
    height: 170px;
    position: relative;
    .ark-swiper-wrapper
    .ark-swiper-item
    .ark-swiper-item-cover
    width: calc(50% + 50px);
    clip-path: polygon(0 0,100% 0,calc(100% - 100px) 100%,0 100%);
    .ark-swiper-item-time
    transform: rotateZ(-69deg);
    top: calc(50% - 20px);
    height: 25px;
    font-size: 17px;

    .ark-swiper-item-info
    width: calc(50% + 50px);
    clip-path: polygon(100% 0,100% 100%,0 100%,100px 0 );
    padding: 0 0 0 60px;
    a.ark-swiper-item-title
    padding: 10px 16px 0 45px;
    font-size: 16px;
    line-height: 20px;
    .ark-swiper-item-title-link
    -webkit-line-clamp: 2
    .ark-swiper-item-description
    padding: 0px 15px 10px 5px;
    font-size: 14px;
    line-height: 20px;
    .ark-swiper-item-description-text
    padding-bottom: 100px
    -webkit-line-clamp: 4

    #ark-swiper-container
    .ark-swiper-pagination
    bottom: 0px;
    margin: 0px auto;
  8. 在主题配置文件[Blogroot]/_config.butterfly.yml中添加配置项用以控制轮播图。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # 源计划-方舟:首页轮播图
    # see https://akilar.top/posts/658f52d0/
    swiperBar:
    enable: true # 开关
    timemode: updated #date/updated
    error_img: /img/loading.gif #默认封面。记得换成自己的。
    default_descr: 就算再怎么看我也不知道怎么描述它好啦!
    swiper_css: https://npm.elemecdn.com/[email protected]/swiper-bundle.min.css #swiper css依赖
    swiper_js: https://npm.elemecdn.com/[email protected]/swiper-bundle.min.js #swiper js依赖
    swiper_init_js: /js/custom/swiper_init.js # swiper初始化方法
  9. 在你的创建的文章Front-matter下写如下:

    1
    swiper_index: 1 #置顶轮播图顺序,非负整数,数字越大越靠前
  10. 如果想要颜色随机变化,添加下面的链接样式文件(也可以自己拷贝到本地进行修改)。

    1
    - <script src="https://npm.elemecdn.com/[email protected]/categoryBar.js"></script>