写前哔哔
近期重建博客，想用一种简洁的分类条，最终也是选择了清羽飞扬的样式，但是在复现抄袭的过程中遇到了最终的样式和演示效果不一致的问题，如图所示。
问题解决
通过请教清羽飞扬本人，原来是我用的最新butterfly版本和旧版本文件不一致有关，解决办法就是在跳过原教程中的category.pug和index.pug添加代码步骤，然后打开[BlogRoot]\themes\butterfly\layout\includes\mixins\indexPostUI.pug文件，添加以下两行代码，删除+号
1
2
3
4
5
6
7
8
| mixin indexPostUI()
- const indexLayout = theme.index_layout
- const masonryLayoutClass = (indexLayout === 6 || indexLayout === 7) ? 'masonry' : ''
#recent-posts.recent-posts.nc(class=masonryLayoutClass)
+ #category-bar.category-bar
+ include ../categoryBar.pug
.recent-post-items
each article, index in page.posts.data
|
具体的样式在[BlogRoot]\themes\butterfly\source\css\_layout\category-bar.styl中调整：
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| #category-bar
padding 7px 11px
background var(--card-bg)
border-radius 8px
display flex
white-space nowrap
overflow hidden
transition 0.3s
height 50px
width 100%
justify-content space-between
user-select none
align-items center
margin-bottom 20px
font-size 17px
font-family "shou"
font-weight 500
.category-bar-right
display flex
border-radius 8px
align-items center
.category-bar-more
margin-left 4px
margin-right 4px
border-radius 8px
padding 0 8px
color var(--text-highlight-color)
&:hover
background var(--btn-hover-color)
color #FFFFFF
&.select
a
background var(--btn-bg)
color var(--btn-color)
&:hover
background var(--btn-hover-color)
color #FFFFFF
.category-bar-items
width 100%
white-space nowrap
overflow-x scroll
scrollbar-width: none
-ms-overflow-style: none
overflow-y hidden
display flex
border-radius 8px
align-items center
height 30px
&::-webkit-scrollbar
display: none
.category-bar-item
a
padding .1rem .5rem
margin-right 6px
border-radius 8px
display flex
align-items center
height 30px
color var(--text-highlight-color)
&:hover
background var(--btn-hover-color)
color #FFFFFF
&.select
a
background var(--btn-bg)
font-weight 550
color var(--btn-color)
&:hover
background var(--btn-hover-color)
color #FFFFFF
|
最终的效果：
参考教程
