一.首页动画效果:

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

    1
    npm install hexo-butterfly-wowjs --save
  2. 在根目录下的 _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
  3. 参数解释:

    参数备选值/类型释义
    enabletrue/false【必选】控制开关
    prioritynumber【可选】过滤器优先级,数值越小,执行越早,默认为10,选填
    mobiletrue/false控制移动端是否启用,默认移动端禁用
    animateitem.classclass【可选】添加动画类名,只支持给class添加
    animateitem.styletext【可选】动画样式,具体类型参考animate.css
    animateitem.durationtime【可选】动画持续时间,单位可以是ms也可以是s。例如3s,700ms。
    animateitem.delaytime【可选】动画开始的延迟时间,单位可以是ms也可以是s。例如3s,700ms。
    animateitem.offsetnumber【可选】开始动画的距离(相对浏览器底部)。
    animateitem.iterationnumber【可选】动画重复的次数
    animate_cssURL【可选】animate.css的CDN链接,默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
    wow_jsURL【可选】wow.min.js的CDN链接,默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
    wow_init_jsURL【可选】wow_init.js的CDN链接,默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js
  4. 注意事项:

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

二. 首页轮播图:

  1. 也是一样,首先在根目录安装插件:

    1
    npm install hexo-butterfly-swiper --save
  2. 在配置文件 _config.yml 文件中配置相关项目:

    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: 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初始化方法
  3. 解释其中参数:

    参数备选值/类型释义
    prioritynumber【可选】过滤器优先级,数值越小,执行越早,默认为10,选填
    enabletrue/false【必选】控制开关
    enable_pagepath/all【可选】填写想要应用的页面的相对路径(即路由地址),如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面,就填’all’,默认为all
    timemodedate/updated【可选】时间显示,date为显示创建日期,updated为显示更新日期,默认为date
    layout.typeid/class【可选】挂载容器类型,填写id或class,不填则默认为id
    layout.nametext【必选】挂载容器名称
    layout.index0和正整数【可选】前提是layout.type为class,因为同一页面可能有多个class,此项用来确认究竟排在第几个顺位
    default_descrtext默认文章描述
    swiper_cssurl【可选】自定义的swiper依赖项css链接
    swiper_jsurl【可选】自定义的swiper依赖项加js链接
    custom_cssurl【可选】适配主题样式补丁
    custom_jsurl【可选】swiper初始化方法
  4. 注意事项

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

三. 分类卡片:

  1. 安装插件咯:

    1
    npm install hexo-butterfly-categories-card --save
  2. 将以下参数也是放到根目录下的_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
    # 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
  3. 参数解释:

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

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

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

四. 参考文章:

https://akilar.top/
如有侵权请联系01@liushen.fun删除,谢谢!