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

一.首页动画效果：

首先我们需要下载一个插件：在博客的根目录下运行：
1
npm install hexo-butterfly-wowjs --save

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

# 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

参数解释：

参数	备选值/类型	释义
enable	true/false	【必选】控制开关
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
mobile	true/false	控制移动端是否启用，默认移动端禁用
animateitem.class	class	【可选】添加动画类名，只支持给class添加
animateitem.style	text	【可选】动画样式，具体类型参考animate.css
animateitem.duration	time	【可选】动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
animateitem.delay	time	【可选】动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
animateitem.offset	number	【可选】开始动画的距离（相对浏览器底部）。
animateitem.iteration	number	【可选】动画重复的次数
animate_css	URL	【可选】animate.css的CDN链接，默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
wow_js	URL	【可选】wow.min.js的CDN链接，默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
wow_init_js	URL	【可选】wow_init.js的CDN链接，默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js

注意事项：

下面三项的内容最好自己保存到本地，如果有条件的话，当然就这么写也可以
animateitem项的内容需要根据自己的配置进行调整，比如上面我的实例中添加了一个container，这是因为我的网站中有一个class为container的项目，我想将其添加为动画，当然上面两项已经可以满足90%的butterfly了，只要不魔改应该够用。

二. 首页轮播图：

也是一样，首先在根目录安装插件：
1
npm install hexo-butterfly-swiper --save

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

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

解释其中参数：

参数	备选值/类型	释义
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enable	true/false	【必选】控制开关
enable_page	path/all	【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为all
timemode	date/updated	【可选】时间显示，date为显示创建日期，updated为显示更新日期,默认为date
layout.type	id/class	【可选】挂载容器类型，填写id或class，不填则默认为id
layout.name	text	【必选】挂载容器名称
layout.index	0和正整数	【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
default_descr	text	默认文章描述
swiper_css	url	【可选】自定义的swiper依赖项css链接
swiper_js	url	【可选】自定义的swiper依赖项加js链接
custom_css	url	【可选】适配主题样式补丁
custom_js	url	【可选】swiper初始化方法

注意事项

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

三. 分类卡片：

安装插件咯：

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

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

# 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

参数解释：

参数	备选值/类型	释义
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enable	true/false	【必选】控制开关
enable_page	path/all	【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为’/‘
layout.type	id/class	【可选】挂载容器类型，填写id或class，不填则默认为id
layout.name	text	【必选】挂载容器名称
layout.index	0和正整数	【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
column	odd/even	【可选】显示列数，考虑到比例问题，只提供3列和4列，odd为3列， even为4列
row	number	【可选】显示行数，默认两行，超过行数切换为滚动显示
message.descr	text	分类描述,需要和你自己的文章分类一一对应。
message.cover	url	分类背景,需要和你自己的文章分类一一对应。
custom_css	url	【可选】自定义样式，会替换默认的css链接，可以下载文档给出的cdn链接后自主修改