基于Butterfly主题的分类磁贴
点击查看更新记录
更新记录
- 基于冰老师的磁贴方案进行修改(1.0和2.0为冰老师编写)
- 修改了样式，转为styl
- 磁贴信息不再自动获取，转为手动填写
- 无需再引入jquery或者vue
- 适配pjax
- 增加配置项，可选宽屏模式下是1行4列还是1行3列
- 增加配置项，可选是否开启单行显示。
- 完全重构教程内容。可以看做全新的磁贴教程。
- 使用纯CSS仿写原版磁贴样式。
- 无需引入任何额外js。
- 完美支持pjax。
- 自动获取分类和文章数。
- 自定义配置行数。可选三列还是四列。
- 磁贴只显示一级分类。
- 自定义配置磁贴封面及描述。
点击查看参考教程
| 参考方向 | 教程原贴 |
|---|---|
| 沿用样式 | 教程：基于Butterfly主题的分类磁贴2.0版 |
写在最前
本项目是对冰卡诺老师写的教程：基于Butterfly主题的分类磁贴2.0版进行重构，去除了所有繁杂的引入js的过程，所以也就无需引入jquery和vue，也完美支持pjax。当前4.0版本可以自动获取分类及文章数。封面和描述配置项直接嵌入配置文件。支持自定义行数，超过自动切换为滚动显示。可选择三列或四列显示。
资源下载
由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。
3.0磁贴旧版内容
旧版教程需要手动填写，不建议使用
- 在
[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)) - 在
[Blogroot]\themes\butterfly\source\css\_layout\目录下新建catalogMagnet.stylif 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 修改
[Blogroot]\themes\butterfly\layout\index.pug，添加磁贴卡片：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新建
[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/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_2/img/cover2.webp
descr: 杂谈及教程
count: 45- 修改
[Blogroot]\_config.butterfly.yml,添加磁贴配置项catalogMagnet:
enable: true
style: odd # 磁贴每行显示数量：odd：3列 | even：4列
max-height: true #单行显示，超过则转为滚动显示 hexo cl && hexo g之后就能看到磁贴效果了。
4.0磁贴新版教程
修改
[Blogroot]\themes\butterfly\layout\index.pugextends 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新建
[Blogroot]\themes\butterfly\source\css\_layout\categoryBar.stylif 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 '📚'!important
padding-right 15px!important
&::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- 在
[Blogroot]\_config.butterfly.yml添加配置项：categoryBar:
enable: true
column: odd # 显示列数,odd：3列 | even：4列
row: 1 #显示行数，默认两行，超过行数切换为滚动显示
descr:
- 长篇小说连载
- 杂谈教程
- 玩转Win10
- Ubuntu指南
- 个人日记
- 诗词歌赋
cover:
- url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_2/img/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/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_2/img/cover5.webp')
- url('https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_2/img/cover6.webp')
| 参数名 | 可选参数 | 参数释义 |
|---|---|---|
| enable | true、false | 必填项。控制磁贴开关，true为开启，false为关闭 |
| colume | odd、even | 必填项。控制磁贴显示列数，odd为3列,even为4列 |
| raw | 1、2、3…(大于0的整数即可) | 选填项，默认显示两行。控制磁贴显示行数，超过自动切换为滚动显示。 |
| descr | string格式，任意字符串均可 | 选填项，默认为空。磁贴描述，根据磁贴从左到右，从上到下的顺序配置。每行用-开头，如果要跳着填写，前一行需要留空。 |
| 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()方法直接生成磁贴样式
这些内容也很不错哦！
评论
TwikooWaline
| {{date}} | {{temperature}} | {{humidity}} | ||
| {{time}} | ||||
| {{ip}} | {{city}} | {{daylight}} | ||
