魔改笔记二：首页分类，轮播卡片以及动画添加
一.首页动画效果：
首先我们需要下载一个插件：在博客的根目录下运行：
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了，只要不魔改应该够用。
二. 首页轮播图：
也是一样，首先在根目录安装插件：
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 #过滤器优先权按照我的文件配置即可
三. 分类卡片：
安装插件咯：
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链接后自主修改 |
注意事项：
- 注意修改其中的message为你的分类，这里我只有三个分类所以开了三个，尽量不要开过六个，我个人感觉滚动显示不好看
- 然后就是默认显示行数和列数，行数最好设置大一行，否则可能会出现滚动，列数保持到三就可以
- 如果配置了上方的swipper，最好不要动layout，当然我也不是很懂，但是至少这样能够正常运行haha
本次插件版魔改到此结束，后面我们将继续进行更深层次的魔改，欢迎大家常来玩啊~