Hexo-Butterfly主题优化-设置网站首页显示背景、文章最上方不显示背景

本文详细介绍了如何修改Butterfly主题的源码,以实现首页显示背景图片,而文章页面不显示顶部图片的需求。通过理解并编辑index.pug文件中的is_post()和is_home()判断逻辑,成功地让文章页面不显示缩略图,同时保持首页的背景图片显示。这一解决方案避免了使用disable_top_img导致首页图片消失的问题。
摘要由CSDN通过智能技术生成

我想保留 Butterfly主题网站主界面的图片 而不想每个文章中的上方都出现为其设置的缩略图

预期效果如下

主界面

文章页面

image-20220215232022741

Butterfly 的配置文件中只提供了 index_img设置主界面图片,文章上方的图片由文章属性 cover 控制,如果为空,则为默认的蓝色界面无法去除

默认界面:

image-20220215230149546

设置了 cover 属性的界面:

image-20220215230628865

如果想将文章界面上面的图片去掉,就需要设置 disable_top_img 但是这样,网站首页的图片也无法显示。(不知道作者为什么要这样设置~)

解决方法:修改源码

image-20220215231039048

首先在 vscode 中搜索出现 index_img 的文件,发现只有一个 index.pug
(index.pug位于 /themes/butterfly/layout/includes/header/index.pug)
打开之后显示:

image-20220215231132112

根据代码判断

  • is_post() 判断当前页面是不是文章界面
  • is_home() 判断当前页面是不是网站的主界面

为了达到我的要求,我把代码修改如下

image-20220215231300721

修改逻辑为:

  • 如果当前界面是文章的页面,那么设置top_imgfalse ,即文章界面不显示最上方的图片
  • 如果当前界面是网站的首页面,那么设置 top_img 为我们设置的 index_img

这样就满足了首页面有背景图片,文章最上方没有图片的要求。

评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zzqwtc

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值