点击查看更新记录

更新记录

2020-12-19:内测版v3.1

  1. 基于冰老师的磁贴方案进行修改(1.0和2.0为冰老师编写)
  2. 修改了样式,转为styl
  3. 磁贴信息不再自动获取,转为手动填写
  4. 无需再引入jquery或者vue
  5. 适配pjax
  6. 增加配置项,可选宽屏模式下是1行4列还是1行3列

2021-01-06:内测版v3.2

  1. 增加配置项,可选是否开启单行显示。

2021-01-06:正式版v4.0

  1. 完全重构教程内容。可以看做全新的磁贴教程。
  2. 使用纯CSS仿写原版磁贴样式。
  3. 无需引入任何额外js。
  4. 完美支持pjax。
  5. 自动获取分类和文章数。
  6. 自定义配置行数。可选三列还是四列。
  7. 磁贴只显示一级分类。
  8. 自定义配置磁贴封面及描述。

2021-01-20:正式版v4.1

  1. 篇数图标使用fontawesome的Unicode实现伪类显示图标

2021-01-31:正式版v4.1.1

  1. 新增butterfly_v3.6.0提示
点击查看参考教程
参考方向教程原贴
沿用样式教程:基于Butterfly主题的分类磁贴2.0版

写在最前

本项目是对冰卡诺老师写的教程:基于Butterfly主题的分类磁贴2.0版进行重构,去除了所有繁杂的引入js的过程,所以也就无需引入jquery和vue,也完美支持pjax。当前4.0版本可以自动获取分类及文章数。封面和描述配置项直接嵌入配置文件。支持自定义行数,超过自动切换为滚动显示。可选择三列或四列显示。

资源下载

由于本教程涉及的所有修改对缩进格式等有严格要求,担心自己控制不好的可以直接下载静态资源。参照教程进行修改。

3.0磁贴旧版内容

旧版教程需要手动填写,不建议使用
  1. [Blogroot]\themes\butterfly\layout\includes\目录下新建catalogMagnet.pug

    #catalogMagnet
    if site.data.magnet
    each ci in site.data.magnet
    figure.gallery-group.color-card
    img.gallery-group-img.loaded(src=url_for(ci.cover) alt='' data-ll-status='loaded')
    figcaption
    .gallery-group-name.magnetname
    span |
    a(href=url_for(ci.link))= ci.name
    li.category-list-item
    span.category-list-count
    i.fas.fa-book
    span= ci.count
    p= ci.descr
    a(href=url_for(ci.link))
  2. [Blogroot]\themes\butterfly\source\css\_layout\目录下新建catalogMagnet.styl

    if hexo-config('catalogMagnet.enable')
    #catalogMagnet
    .category-list-count
    font-weight bold
    &:after
    content ' 篇'

    .fa-book
    padding-right 5px

    .category-list-item
    list-style-type none

    figure
    &.gallery-group
    p
    font-weight bold
    if hexo-config('catalogMagnet.style') == 'odd'
    .color-card
    width: 32.3%!important
    height: 180px!important
    margin: 5px 0.5%!important
    else if hexo-config('catalogMagnet.style') == 'even'
    .color-card
    width: 24%!important
    height: 180px!important
    margin: 5px 0.5%!important
    @media screen and (max-width: 650px)
    .color-card
    width: 48%!important
    height: 150px!important
    margin: 0.3rem 1%!important

    .magnetname:after
    background white!important

    figure
    .gallery-group
    &.color-card
    box-shadow rgba(50, 50, 50, 0.4) 3px 3px 18px 0px inset
    figcaption
    background-image linear-gradient(rgba(0, 0, 0, 0.4) 25%, rgba(16, 16, 16, 0) 100%)
    color white
    padding 0.8rem
    & > figure
    & > figcaption
    & > div
    & > a
    & > span
    color white
    font-size 1rem!important
    if hexo-config('catalogMagnet.max-height')
    div#catalogMagnet
    max-height 190px
    overflow auto
    &::-webkit-scrollbar
    width 0!important
    @media screen and (max-width: 650px)
    div#catalogMagnet
    max-height 160px
  3. 修改[Blogroot]\themes\butterfly\layout\index.pug,添加磁贴卡片,注意butterfly_v3.6.0取消了缓存配置,转为完全默认,需要将{cache:theme.fragment_cache}改为{cache: true}

      extends includes/layout.pug

    block content
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts
    + if theme.catalogMagnet.enable
    + .recent-post-item.photo-tag(style='width:100%;height:auto;float:left;padding:5px;flex-wrap:wrap;justify-content : center;flex-direction: row;')
    + !=partial('includes/catalogMagnet', {}, {cache:theme.fragment_cache})
    +postUI
    include includes/pagination.pug

    为了整体美观,如果你还添加了其他首页魔改,需要调整卡片之间的间隔。此处以gitcalendar为例。需要添加margin-top:20px;样式属性。


    extends includes/layout.pug

    block content
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts
    .recent-post-item(style='width:100%')
    !=partial('includes/gitcalendar', {}, {cache:theme.fragment_cache})
    if theme.catalogMagnet.enable
    .recent-post-item.photo-tag(style='width:100%;height:auto;float:left;padding:5px;flex-wrap:wrap;justify-content : center;flex-direction: row;margin-bottom:20px; margin-top:20px;')
    !=partial('includes/catalogMagnet', {}, {cache:theme.fragment_cache})
    +postUI
    include includes/pagination.pug

  4. 新建[Blogroot]\source\_data\magnet.yml,没有_data文件夹就自行新建。在magnet.yml中填写磁贴信息。

    - name: 磁贴名称
    link: 磁贴链接(站内链接填写相对链接)
    cover: 磁贴背景图片
    descr: 磁贴描述
    count: 分类文章数目
    # 示例
    - name: 🍡Akilarの糖葫芦
    link: /categories/%F0%9F%8D%A1Akilar%E3%81%AE%E7%B3%96%E8%91%AB%E8%8A%A6/
    cover: https://cdn.jsdelivr.net/npm/akilar-candyassets/image/cover2.webp
    descr: 杂谈及教程
    count: 45
  5. 修改[Blogroot]\_config.butterfly.yml,添加磁贴配置项

    catalogMagnet:
    enable: true
    style: odd # 磁贴每行显示数量:odd:3列 | even:4列
    max-height: true #单行显示,超过则转为滚动显示
  6. hexo cl && hexo g之后就能看到磁贴效果了。

4.0磁贴新版教程

  1. 修改[Blogroot]\themes\butterfly\layout\index.pug

      extends includes/layout.pug

    block content
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts
    + if theme.categoryBar.enable
    + .recent-post-item(style='height:auto;width:100%;padding:0px;')
    + #categoryBar!= list_categories(site.categories,{class: 'categoryBar',depth: 1})
    +postUI
    include includes/pagination.pug

    为了整体美观,如果你还添加了其他首页魔改,需要调整卡片之间的间隔。此处以gitcalendar为例。需要添加margin-top:20px;样式属性。(也可能不需要,视实际情况添加该属性)


      extends includes/layout.pug

    block content
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts
    .recent-post-item(style='width:100%')
    !=partial('includes/custom/gitcalendar', {}, {cache:theme.fragment_cache})
    + if theme.categoryBar.enable
    + .recent-post-item(style='height:auto;width:100%;padding:0px;margin-top:20px;')
    + #categoryBar!= list_categories(site.categories,{class: 'categoryBar',depth: 1})
    +postUI
    include includes/pagination.pug

  2. 新建[Blogroot]\themes\butterfly\source\css\_layout\categoryBar.styl

    if hexo-config('categoryBar.enable')
    #categoryBar
    width 100%!important
    ul
    &.categoryBar-list
    margin 5px 5px 0 5px!important
    padding 0!important

    li
    &.categoryBar-list-item
    font-weight bold
    display inline-block
    height 180px!important
    margin 5px .5% 0 .5%!important
    background-image linear-gradient(rgba(0, 0, 0, 0.4) 25%, rgba(16, 16, 16, 0) 100%)
    border-radius 10px
    padding 25px 0 25px 25px!important
    box-shadow rgba(50, 50, 50, 0.3) 50px 50px 50px 50px inset
    overflow hidden
    background-size 100%!important
    background-position center!important
    &:hover
    background-size 110%!important
    box-shadow inset 500px 50px 50px 50px rgba(50,50,50, 0.6)
    span
    &.categoryBar-list-count
    &::after
    transition all .5s
    transform translate(-100%, 0)
    a
    &.categoryBar-list-link
    color white!important
    font-size 20px!important
    &::before
    content '|'!important
    color white!important
    font-size 20px!important
    &:after
    content ''
    position relative
    width 0
    bottom 0
    display block
    height 3px
    border-radius 3px
    background-color white
    &:hover
    &:after
    width 90%
    left 1%
    transition all 0.5s

    span
    &.categoryBar-list-count
    display block!important
    color white!important
    font-size 20px!important
    &::before
    content '\f02d'!important
    padding-right 15px!important
    @extend .fontawesomeIcon
    &::after
    padding 5px
    display block!important
    color white!important
    font-size 20px!important
    position relative
    right -100%
    covers = hexo-config('categoryBar.cover')
    for cover,i in covers
    li.categoryBar-list-item:nth-child({i+1})
    background unquote(cover)
    descrs = hexo-config('categoryBar.descr')
    for descr,i in descrs
    li.categoryBar-list-item:nth-child({i+1})>span::after
    content descr!important
    if hexo-config('categoryBar.column') == 'odd'
    li
    &.categoryBar-list-item
    width 32.3%!important
    else if hexo-config('categoryBar.column') == 'even'
    li
    &.categoryBar-list-item
    width 24%!important
    @media screen and (max-width: 650px)
    li
    &.categoryBar-list-item
    width 48%!important
    height 150px!important
    margin 5px 1% 0 1%!important

    $caterow = hexo-config('categoryBar.row')?hexo-config('categoryBar.row'):2
    .categoryBar-list
    max-height 190px * $caterow
    overflow auto
    &::-webkit-scrollbar
    width 0!important
    @media screen and (max-width: 650px)
    .categoryBar-list
    max-height 160px * $caterow
  3. [Blogroot]\_config.butterfly.yml添加配置项:
    categoryBar:
    enable: true
    column: odd # 显示列数,odd:3列 | even:4列
    row: 1 #显示行数,默认两行,超过行数切换为滚动显示
    descr:
    - 长篇小说连载
    - 杂谈教程
    - 玩转Win10
    - Ubuntu指南
    - 个人日记
    - 诗词歌赋
    cover:
    - url('https://cdn.jsdelivr.net/npm/akilar-candyassets/image/cover1.webp')
    - '#abcdef' # HEX格式色值需要用''包裹,不然会被识别成注释
    - rgba(45,67,89,0.7)
    - linear-gradient(rgba(0, 0, 0, 0.4) 25%, rgba(200,16 , 16, 0) 100%)
    - url('https://cdn.jsdelivr.net/npm/akilar-candyassets/image/cover5.webp')
    - url('https://cdn.jsdelivr.net/npm/akilar-candyassets/image/cover6.webp')
参数名可选参数参数释义
enabletruefalse必填项。控制磁贴开关,true为开启,false为关闭
columeoddeven必填项。控制磁贴显示列数,odd为3列,even为4列
raw123…(大于0的整数即可)选填项,默认显示两行。控制磁贴显示行数,超过自动切换为滚动显示。
descrstring格式,任意字符串均可选填项,默认为空。磁贴描述,根据磁贴从左到右,从上到下的顺序配置。每行用-开头,如果要跳着填写,前一行需要留空。
cover- url('/img/cover.png')
- '#abcdef'
- rgba(45,67,89,0.7)
- linear-gradient(rgba(0, 0, 0, 0.4) 25%, rgba(200,16 , 16, 0) 100%)
选填项,默认深蓝色渐变背景。磁贴封面,根据磁贴从左到右,从上到下的顺序配置。可以配置纯色、渐变色、图片,如果要跳着填写,前一行需要留空。

TO DO

重构磁贴方案

新增配置项控制,支持两种样式

pjax适配

去jquery,vue

重写list_categories()方法直接生成磁贴样式