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

2024-05-30 21:08:05 浏览数 (2)

一.首页动画效果：

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

代码语言：javascript复制
npm install hexo-butterfly-wowjs --save

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

代码语言：javascript复制
# 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了，只要不魔改应该够用。

二. 首页轮播图：

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

代码语言：javascript复制
npm install hexo-butterfly-swiper --save

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

代码语言：javascript复制
# 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 #过滤器优先权 按照我的文件配置即可

三. 分类卡片：

安装插件咯：

代码语言：javascript复制
npm install hexo-butterfly-categories-card --save

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

代码语言：javascript复制
# 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

本次插件版魔改到此结束，后面我们将继续进行更深层次的魔改，欢迎大家常来玩啊~

四. 参考文章：

https://akilar.top/

动画 配置 移动端 容器 笔记

0 人点赞