前言 {#前言}

看到了大佬的文章页一页到底，效果如下图所示：

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

教程 {#教程}

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

新建Styl文件 {#新建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 | // 顶部图 #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 {#修改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://img.cdn.nesxc.com/upload/wordpress/yydd(1).webp

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

cover: https://img.cdn.nesxc.com/upload/wordpress/yydd-1.webp以区分

修改原理 {#修改原理}

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

效果演示 {#效果演示}

修改之前：

修改之后：

参考链接：https://www.imcharon.com/60/