1 一图流background
参考文档：https://android99.com/p/butterfly-top-image-modify/
前提为安装cherrio插件环境
主题配置项
1
2
3
4
5
6
| index_img: transparent
footer_img: transparent
background: /assets/xxxx
index_top_img_height: 400px
mask:
header: false
|
同时在添加css文件的读取路径
1
2
3
| inject:
head:
- <link rel="stylesheet" href="/css/modify.css">
|
外部引用css
Butterfly/Sourse/css/modify.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
| @import 'nib'
#page-header
background: transparent !important
&.post-bg, &.not-home-page
height: 280px !important
#post-info
bottom: 40px !important
text-align: center
#page-site-info
top: 140px !important
@media screen and (max-width: 768px)
&.not-home-page
height: 200px !important
#post-info
bottom: 10px !important
#page-site-info
top: 100px !important
.top-img
height: 250px
margin: -50px -40px 50px
border-top-left-radius: inherit
border-top-right-radius: inherit
background-position: center
background-size: cover
transition: all .3s
@media screen and (max-width: 768px)
height: 230px
margin: -36px -14px 36px
[data-theme='dark'] &
filter: brightness(.8)
// 页脚
#footer:before
background-color: alpha(#FFF, .5)
[data-theme='dark'] &
background-color: alpha(#000, .5)
#footer-wrap, #footer-wrap a
color: #111
transition: unset
[data-theme='dark'] &
color: var(--light-grey)
|
注意：此文件更新不会被覆盖，但是勤备份。截止2025/2/17以上代码未做修改
外部引用JS
butterfly/scripts/modify.js
以下为代码备份。未修改。
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
| 'use strict';
const { filter } = hexo.extend;
const cheerio = require('cheerio');
function insertTopImg($) {
const header = $('#page-header');
if (header.length === 0) return;
const background = header.css('background-image');
if (!background) return;
$('#post, #page, #archive, #tag, #category').prepend(`<div class="top-img" style="background-image: ${background};"></div>`);
}
filter.register('after_render:html', (str, data) => {
const $ = cheerio.load(str, {
decodeEntities: false
});
insertTopImg($);
return $.html();
});
|
2 主页card竖图排版并列+微调
Themes/butterfly/source/css/_page/homepage.styl
注意，主题配置中排列模式输入：6
以下是整个文件的copy。逐条修改也是重点关注有关于6的代码
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
| $indexLayout = hexo-config('index_layout') || 1
$indexEnable = hexo-config('cover.index_enable')
#recent-posts
.recent-post-item
@extend .cardHover
position: relative
overflow: hidden
margin-bottom: 20px
if $indexLayout == 6 || ($indexLayout == 7)
display: inline-block
width: calc(100% / 2 - 12px)
height: 730px
vertical-align: top
+maxWidth768()
height: 410px
width: calc(100% / 2 - 6px)
+minWidth2000()
width: calc(100% / 2 - 6px)
height: 410px
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
display: flex
flex-direction: row
align-items: center
height: 16.8em
+maxWidth768()
flex-direction: column
height: auto
+minWidth2000()
height: 18.8em
&:hover
.post-bg
transform: scale(1.1)
&.ads-wrap
display: block !important
height: auto !important
.post_cover
overflow: hidden
if ($indexLayout != 5 && ($indexLayout != 7))
+maxWidth768()
width: 100%
height: 230px
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
width: 42%
height: 100%
&.right
order: 1
+maxWidth768()
order: 0
if $indexLayout == 4 || ($indexLayout == 5 || ($indexLayout == 6 || ($indexLayout == 7)))
width: 100%
if ($indexLayout == 5 || ($indexLayout == 7))
height: 17em
else
height: 530px
if ($indexLayout == 5 || ($indexLayout == 7)) && $indexEnable
&:before
position: absolute
z-index: 1
width: 100%
height: 100%
background-color: rgba(18, 18, 18, .4)
content: ''
backdrop-filter: blur(2px)
.post-bg
z-index: -4
@extend .imgHover
& >.recent-post-info
+maxWidth768()
padding: 12px 12px 16px
width: 100%
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
padding: 0 40px
width: 58%
if $indexLayout == 4 || ($indexLayout == 5 || ($indexLayout == 6 || ($indexLayout == 7)))
padding: 30px 30px 40px
if ($indexLayout == 5 || ($indexLayout == 7)) && $indexEnable
&:not(.no-cover)
position: absolute
top: 50%
z-index: 2
width: 100%
color: var(--text-highlight-color)
transform: translateY(-50%)
--text-highlight-color: rgba(255, 255, 255, 1)
--card-meta: rgba(255, 255, 255, .7)
&.no-cover
+maxWidth768()
padding: 30px 20px
if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
width: 100%
if $indexLayout == 4 || ($indexLayout == 5 || ($indexLayout == 6 || ($indexLayout == 7)))
padding: 35px 30px
& > .article-title
@extend .limit-more-line
color: var(--text-highlight-color)
font-size: 1.55em
line-height: 1.4
transition: all .2s ease-in-out
-webkit-line-clamp: 2
.sticky
margin-right: 10px
color: $sticky-color
transform: rotate(45deg)
+maxWidth768()
font-size: 1.35em
&:hover
color: $text-hover
& > .article-meta-wrap
margin: 6px 0
color: var(--card-meta)
font-size: .82em
& > .post-meta-date
cursor: default
i
margin: 0 4px 0 0
.fa-spinner
margin: 0
.article-meta-label
if hexo-config('post_meta.page.label')
padding-right: 4px
else
display: none
.article-meta-separator
margin: 0 6px
.article-meta-link
margin: 0 4px
if hexo-config('post_meta.page.date_format') == 'relative'
time
display: none
a
color: var(--card-meta)
&:hover
color: $text-hover
text-decoration: underline
& > .content
@extend .limit-more-line
-webkit-line-clamp: 2
font-size: .98em
|
3 首页logo尺寸+site-name，site-slogan色彩
Themes/butterfly/source/css/_layout/head.styl
以下需要搜索字段逐条修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .site-icon
margin-right: 6px
height: 52px
vertical-align: middle
#site-title
margin: 0
color: rgb(219 158 60 / 90%)
font-size: 1.85em
#site-subtitle
color: rgb(219 158 60 / 90%)
font-size: 1.15em
|
4 引用块的美化
Themes/butterfly/source/css/var.styl
改动的只有blockquote-color，改字体颜色（其实不改也没啥的）
1
2
| $line-height-code-block = 1.6
$blockquote-color = #7689a3bd
|
Themes/butterfly/source/css/_mode/darkmode.styl
只改第一项
1
2
| --blockquote-color: $blockquote-color
--blockquote-bg: lighten(#121212, 10)
|
Themes/butterfly/source/css/_global/index.styl
去除引用的左边色块。直接注释掉就行
1
2
3
4
5
6
7
| blockquote
margin: 0 0 20px
padding: 7px 15px
//border-left: 4px solid $blockquote-padding-color
background-color: var(--blockquote-bg)
color: var(--blockquote-color)
addBorderRadius()
|
折叠块的美化及使用
其实是提醒下自己这个语法。。display替换为提示内容。color我已经懒得改了现在的白底黑字也算醒目。
1
2
3
| {% hideToggle display,bg,color %}
content
{% endhideToggle %}
|
