写这个东西是因为前段时间我将主页改为了无限瀑布流,但是改成无限瀑布流之后侧边栏下面的卡片就无法被显示出来了,所以又写了一个卡片选择器来控制卡片的显隐。

  卡片选择器的效果见本站主页。

  注意:本教程基于 butterfly 主题修改,如果你不是 btf 主题,请自行修改代码。若为指出,本教程的所有路径均位于主题源目录下。

教程

  修改/layout/includes/widget/index.pug(我不保证我的这个文件内容和 btf 内容一样,请勿直接复制替换!):

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
80
81
82
83
+ mixin createCardSelector(cardList)
+ // 生成卡片选择器,具体教程见:https://kmar.top/posts/5c06ceee/
+ /*
+ 对 cardList 的解释(样例见 is_home() 下方):
+ `key` 表示卡片的唯一类名,如果不唯一或没有类名需要手动添加一个
+ 每一个对象中的值含义如下:
+ + `checked` 是否为默认选择(仅有一个能设置 true)
+ + `config` 配置项名称(theme.aside.[config].enable)
+ + `enable` 是否显示该卡片的选项,该项用于不通过常规设置控制卡片显隐时使用,填写该项后无需填写 `config`
+ + `text` 卡片标题,不填写时使用 `_p(aside.[config])`
+ */
+ for value, key in cardList
+ input(id = `selector-${key}` type = 'radio' name = 'card-selector' checked = value.checked)
+ .card-widget.card-selector
+ .item-headline
+ i.iconfont.icon-single-select
+ span 卡片选择器
+ .selector-content
+ input(type='checkbox').iconfont
+ for value, key in cardList
+ if value.enable || (value.config && theme.aside[value.config].enable)
+ label(class=key for=`selector-${key}`)
+ = value.text || _p(`aside.${value.config}`)
+
#aside-content.aside-content
//- post
if is_post()
- const tocStyle = page.toc_style_simple
- const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
if showToc && tocStyleVal
.sticky_layout
include ./card_post_toc.pug
else
!=partial('includes/widget/card_author', {}, {cache: true})
!=partial('includes/widget/card_announcement', {}, {cache: true})
!=partial('includes/widget/card_top_self', {}, {cache: true})
.sticky_layout
+ // 如果想在文档页启用卡片选择器,请取消下方函数调用的注释(注意填写参数)
+ //+createCardSelector()
if showToc
include ./card_post_toc.pug
if theme.related_post && theme.related_post.enable
!=partial('includes/widget/card-related-post', {}, {cache: true})
//!= related_posts(page,site.posts)
//!=partial('includes/widget/card_recent_post', {}, {cache: true})
!=partial('includes/widget/card_ad', {}, {cache: true})
else
//- page
!=partial('includes/widget/card_author', {}, {cache: true})
!=partial('includes/widget/card_top_self', {}, {cache: true})
!=partial('includes/widget/card_announcement', {}, {cache: true})

+ // 如果你想同时在主页和分页打开卡片选择器
+ // 请取消下一行的注释,同时将 is_home() 下方调用注释掉(注意填写参数)
.sticky_layout.index
+ //+createCardSelector()
if showToc
include ./card_post_toc.pug
if is_home()
+ -
+ const cardList = {
+ 'card-recent-post': {config: 'card_recent_post'},
+ 'ads-wrap': {text: '广告', enable: theme.ad && theme.ad.aside},
+ 'card-categories': {
+ text: _p(theme.aside.categories),
+ enable: theme.aside.card_categories.enable && site.categories.length
+ },
+ 'card-tags': {config: 'card_tags', checked: true},
+ 'card-archives': {config: 'card_archives'},
+ 'card-webinfo': {text: _p('aside.card_webinfo.headline'), config: 'card_webinfo'}
+ }
+ -
+ +createCardSelector(cardList)
!=partial('includes/widget/card_recent_post', {}, {cache: true})
!=partial('includes/widget/card_ad', {}, {cache: true})
!=partial('includes/widget/card_newest_comment', {}, {cache: true})
!=partial('includes/widget/card_categories', {}, {cache: true})
!=partial('includes/widget/card_tags', {}, {cache: true})
!=partial('includes/widget/card_archives', {}, {cache: true})
!=partial('includes/widget/card_bottom_self', {}, {cache: true})
else
!=partial('includes/widget/card_tags', {}, {cache: true})
!=partial('includes/widget/card_webinfo', {}, {cache: true})

  然后引入如下样式:

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
:root
--km-link-bg #0084ff
--km-toc-active #e2cbff99

[them-data='dark']
--km-link-bg #0056ac
--km-toc-active #313534

#aside-content
// 侧边栏卡片选择器
// 选择器列表,`key` 是卡片类名,`value` 是卡片的图标
cardList = {
// 这里仅给出例子,请自己填写需要的卡片图标
card-tags: '\e885'
}

// 卡片图标使用的字体
cardIcon = 'Font Awesome 6 Free'

.sticky_layout
&.index
top 0

& > input
display none

+minWidth901()
insertValue(name)
{'#selector-' + name + ':checked'}
{'& ~ .card-selector label.' + name}
background var(--km-link-bg)
color white

{'& ~ .card-widget:not(.card-selector):not(.' + name + ')'}
height 0
padding 0
margin 0
border 0

.sticky_layout
for name, _ in cardList
insertValue(name)

.card-selector
i
transition all .3s

.item-headline
& > i:first-child
font-weight bold
font-size 1.5em
width .9em

.selector-content
white-space nowrap
overflow-x overlay

label
display inline-block
position relative
overflow hidden
padding 4px 6px
border-radius 5px
transition all .3s

&:not(:last-child)
margin-right 5px

&:hover
background var(--km-toc-active)

&:before
font-family cardIcon
font-size 1.25
margin-right 4px

for name, icon in cardList
{'&.' + name + ':before'}
content icon

& > input
appearance none
position absolute
top 27px
right 20px
transition all .4s
color var(--font-color)
cursor pointer

&:before
content '\e66e'

&:checked
transform rotateZ(180deg)

& ~ label
display block
margin 0

&:not(:last-child)
margin-bottom 5px

&:hover
color var(--km-link-bg)

  修改完毕后即可查看效果。


创作不易,扫描下方打赏二维码支持一下吧ヾ(≧▽≦*)o