前言

今天添加了我们矩阵安卓大佬的友链,然后就看到了大佬的文章页一页到底:

image-20210118234105000

那么怎么样修改才能做到这一点呢?

安装教程

适用范围:butterfly3.3.0-3.5.1。更低版本以及更高有没有效果不能保证。

新建Styl文件

在ROOT\themes\butterfly\source\css\page目录新建topimg.styl

page目录为_page,因为markdown的渲染问题会导致\无法显示

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

此前出问题的同学们是因为我这里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

然后一键hexo三连即可看到效果。

注意事项

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

如:cover: https://cdn-1.nesxc.com/cdn-3/yydd(1).webp

的写法会导致css结构破坏,如有这种建议更改为:

cover: https://cdn-1.nesxc.com/cdn-3/yydd-1.webp以区分

修改原理

基本原理就是插入一个新的标签作为头图,再用css隐藏旧头图和定义新头图的样式

效果

修改之前:

image-20210118235509934

修改之后:

image-20210118235536883

鸣谢:

矩阵大佬