转自

新建 Styl 文件

ROOT\themes\butterfly\source\css\_page 目录新建 topimg.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
// 顶部图
#page-header, #page-header:before
background-color: transparent !important
background-image: unset !important

.top-img
height: 12.5rem
display: block
margin: -50px -40px 50px -40px
border-top-left-radius: inherit
border-top-right-radius: inherit
background-position: center center
-webkit-background-size: cover
-moz-background-size: cover
background-size: cover
background-repeat: no-repeat
transition: all 0.3s

.read-mode
display: none

@media screen and (max-width: 768px)
margin: -1.8rem -0.7rem 1.8rem -0.7rem

[data-theme='dark'] &
filter: brightness(0.8)

修改 post.pug

然后前往 ROOT\themes\butterfly\layout 目录,打开 post.pug

1
2
3
4
5
6
block content
#post
if top_img === false
include includes/header/post-info.pug
+ .top-img.gist(style=`background-image: url(${url_for(top_img)})`)
article#article-container.post-content!=page.content

注意事项

注意事项:
cover 图片请勿加入 (), 因为括号会破坏 css 结构。导致无法加载 cover。
如 /img/1 (1).webp。会加载不出来的。建议用 - 1 等方式替代括号。