写前哔哔

由于我的博客是背景一图流，使用头图的话会很影响整体美观，官方文档的方法是在每篇文章Post Front-matter的处添加top_img: transparent配置选项来单独实现，但对我来说每次都要配置很是繁琐。

正文开始

  • 方法一：根据店长关于背景一图流的教程中有提到过，可以在custom.css中添加如下代码解决：
1
2
3
#page-header{
  background: transparent!important;
}

它的作用是选择页面中 ID 为 page-header 的元素，将其背景设置为透明（transparent），并且通过 !important 声明强制提高该样式的优先级，确保它会覆盖其他可能存在的、针对该元素背景的样式规则。

  • 方法二：直接从源码入手，打开[Blogroot]\themes\butterfly\layout\includes\header\index.pug文件，将原来的 top_img = page.top_img || page.cover || theme.default_top_img 改为 top_img = page.top_img ? page.top_img : 'transparent'：
1
2
3
4
if !theme.disable_top_img && page.top_img !== false
  case globalPageType
    when 'post'
      - top_img = page.top_img ? page.top_img : 'transparent'

意思是：仅当明确设置 top_img 时，使用指定图片；不设置时，默认赋值为 'transparent'（透明标识）