教程：Swiper Bar 轮播置顶文章卡片

原文链接：https://akilar.top/posts/8e1264d1/
作者：Akilar

简介

本项目是对冰卡诺老师「基于 Butterfly 主题的轮播手动置顶文章」进行重构：

  • 精简了部分样式
  • 适配 Pjax
  • 依赖项改为 CDN 链接
  • 去 jQuery

插件安装（推荐）

在博客根目录下运行：

1
npm install hexo-butterfly-swiper --save

配置

在站点配置文件 _config.yml 或主题配置文件 _config.butterfly.yml 中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
  enable: true
  priority: 5
  enable_page: all
  timemode: date
  layout:
    type: id
    name: recent-posts
    index: 0
  default_descr: 再怎么看我也不知道怎么描述它的啦！
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js
  custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css
  custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js

参数说明

参数 可选值 说明
enable true/false 控制开关
priority number 过滤器优先级，数值越小执行越早，默认 10
enable_page path / all 应用页面，/ 为首页，all 为全部页面
timemode date / updated 时间显示模式
layout.type id / class 挂载容器类型
layout.name text 容器名称
layout.index number 第几个容器
default_descr text 默认文章描述
swiper_css url Swiper CSS 依赖
swiper_js url Swiper JS 依赖
custom_css url 主题适配样式
custom_js url Swiper 初始化方法

使用方法

在文章的 Front Matter 中添加 swiper_index 配置项：

1
2
3
4
5
6
7
8
---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1  # 置顶轮播图顺序，非负整数，数字越大越靠前
---

效果

  • 首页文章列表上方显示轮播卡片
  • 左侧封面图 + 右侧标题/描述/日期
  • 右侧小圆点指示器（当前位置长条高亮）
  • 每 3 秒自动切换
  • 鼠标悬停暂停