1. 效果预览

2. 教程

第一步：在博客根目录下打开终端，运行以下指令：

1
npm install hexo-butterfly-swiper --save

第二步：在站点配置文件_config.yml添加配置信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 文章轮播
swiper:
  enable: true
  priority: 5 
  enable_page: / 
  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 css依赖
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper 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 # swiper初始化方法

第三步：自定义配置参数

  • 【选填】priority：过滤器优先级，数值越小，执行越早，默认为10，
  • 【必填】enable：是否开启
  • 【选填】enable_page：应用地址，主页就填/，分类页面就填/categories/，所有页面就填all，默认为all
  • 【选填】timemode：date为显示创建日期，updated为显示更新日期，默认为date
  • 【选填】layout.type：挂载容器类型id/class，不填则默认为id
  • 【必填】layout.name：挂载容器名称
  • 【选填】layout.index：当layout.type为class，此项用来确认究竟排在第几位
  • 【选填】default_descr text：默认文章描述

第四步：在文章的front-matter中使用

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

3. 参考链接

🪧引用站外地址，不保证站点的可用性和安全性！
Swiper Bar
Akilar