魔改笔记一：首页分类，轮播卡片以及动画添加

一.首页动画效果：

首先我们需要下载一个插件：在博客的根目录下运行：

1
npm install hexo-butterfly-wowjs --save

在根目录下的 _config.yml 文件中添加配置信息：

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
# butterfly主页动画
wowjs:
  enable: true #控制动画开关。true是打开，false是关闭
  priority: 10 #过滤器优先级
  mobile: false #移动端是否启用，默认移动端禁用
  animateitem:
    - class: recent-post-item #必填项，需要添加动画的元素的class
      style: animate__zoomIn #必填项，需要添加的动画
      duration: 1500ms #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
      delay: 0ms #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
      offset: 0 #选填项，开始动画的距离（相对浏览器底部）
      iteration: 1 #选填项，动画重复的次数
    - class: card-widget
      style: animate__zoomIn
      duration: 1500ms #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
      delay: 0ms #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
      offset: 0 #选填项，开始动画的距离（相对浏览器底部）
      iteration: 1 #选填项，动画重复的次数
    - class: container
      style: animate__zoomIn
      duration: 1500ms #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
      delay: 0ms #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
      offset: 0 #选填项，开始动画的距离（相对浏览器底部）
      iteration: 1 #选填项，动画重复的次数
  animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
  wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
  wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js

二. 首页轮播图：

也是一样，首先在根目录安装插件：

1
2
npm install hexo-butterfly-swiper --save

在配置文件 _config.yml 文件中配置相关项目：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# hexo-butterfly-swiper 首页的轮播
# see https://akilar.top/posts/8e1264d1/
swiper:
  enable: true # 开关
  priority: 2 #过滤器优先权
  enable_page: all # 应用页面
  timemode: date #date/updated
  layout: # 挂载容器类型
    type: class
    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初始化方法

或（本文使用下方方式）

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 #date/updated
  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初始化方法

注意事项

这个里面我感觉需要注意的就是layout选项，如果按照我的配置，分类会在轮播图下面显示，但是如果按照文档默认，这两个可能会导致前后顺序不对造成的问题，没有保存截图就不放了可以自己试试，注意需要设置 priority: 2 #过滤器优先权 按照我的文件配置即可

文章添加轮播需要在文章最前面新增配置 完整配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
title: 建站首发：Markdown语法开篇
tags:
  - Markdown
  - 语言
categories: 语言
sticky: 1
katex: true
cover: http://qiniu.gocit.cn/blog_posts_1/cover_img.jpeg
top_img: http://qiniu.gocit.cn/blog_posts_1/top_img.png
date: 2022-08-02 09:28:56
abbrlink: 1
swiper_index: 1
description: 务必阅读：适用于新手快速入门的Markdown语法使用教程，运用Markdown语法是建立blog的必要前提!zf

本文实际添加：

1
2
3
katex: true
abbrlink: 1
swiper_index: 1

三. 分类卡片：

安装插件咯：

1
2
npm install hexo-butterfly-categories-card --save

将以下参数也是放到根目录下的_config.yml中即可：

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
# hexo-butterfly-categories-card
# see https://akilar.top/posts/a9131002/
categoryBar:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: / # 应用页面
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 1
  column: odd # odd：3列 | even：4列
  row: 2 #显示行数，默认两行，超过行数切换为滚动显示
  message:
    - descr: 学习资料
      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover1.webp
    - descr: 日常分享
      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover2.webp
    - descr: 博客魔改
      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover3.webp
#    - descr: 个人日记
#      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover4.webp
#    - descr: 诗词歌赋
#      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover5.webp
#    - descr: 杂谈教程
#      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover6.webp
  custom_css: https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css

注意事项：

注意修改其中的message为你的分类，这里我只有三个分类所以开了三个，尽量不要开过六个，我个人感觉滚动显示不好看
然后就是默认显示行数和列数，行数最好设置大一行，否则可能会出现滚动，列数保持到三就可以
如果配置了上方的swipper，最好不要动layout，当然我也不是很懂，但是至少这样能够正常运行haha

参考参数解释等：

https://blog.csdn.net/weixin_42464282/article/details/130989629

https://blog.liushen.fun/posts/6af2a5bb/#%E4%B8%80-%E9%A6%96%E9%A1%B5%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C%EF%BC%9A