前言

个人的预期是,将 page 的设定的 top_img 改成 bg 图,本来 top_img 的占位改成半透明;

至于 post ,则是将 postcover 改成 bg 图,本来 cover 的占位改成半透明。

参考店长的糖果屋微调合集[1],的确实现了这种效果。

但还有一点点瑕疵:页面的 top_img 一开始会调整位置。


相关配置

这部分是之前个人改的时候找的,没怎么用到,直接看实现就行。

背景

Butterfly 主题使用 idweb_bgdiv(以下简称#web_bg) 来挂载背景图片,这部分配置分散在几个地方

首先是声明,在 themes/butterfly/source/css/var.styl 中:

// Global Variables
$font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px
$code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : var(--global-font-size)
$font-color = #1F2D3D
$text-line-height = 2
$web-bg = hexo-config('background') && unquote(hexo-config('background'))
$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
$index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43%

然后是使用,在 themes/butterfly/layout/includes/layout.pug 中:

body
    if theme.preloader
      !=partial('includes/loading/loading', {}, {cache: true})

    if theme.background
      #web_bg
      

两者的链接则是在 themes/butterfly/source/css/_global/index.styl 里面:

if $web-bg
  #web_bg
    position: fixed
    z-index: -999
    width: 100%
    height: 100%
    background: $web-bg
    background-attachment: local
    background-position: center
    background-size: cover
    background-repeat: no-repeat

我们要改动的话,比较讨巧的方式是,直接改 web_bg 的声明,让它去读 post.cover

但这个方式个人试了下,没试出来(T_T)

Top_img

Butterfly 主题使用 idpage-headerdiv(以下简称#page-header) 来挂载顶部图片,这部分配置分散在几个地方,不过我们需要的只有配置读取。

这部分代码在 themes/butterfly/layout/includes/header/index.pug 前面部分:

if !theme.disable_top_img && page.top_img !== false
  if is_post()
    - var top_img = page.top_img || page.cover || page.randomcover
  else if is_page()
    - var top_img = page.top_img || theme.default_top_img
  else if is_tag()
    - var top_img = theme.tag_per_img && theme.tag_per_img[page.tag] 
    - top_img = top_img ? top_img : (theme.tag_img !== false ? theme.tag_img || theme.default_top_img : false)
  else if is_category()
    - var top_img = theme.category_per_img && theme.category_per_img[page.category]
    - top_img = top_img ? top_img : (theme.category_img !== false ? theme.category_img || theme.default_top_img : false)
  else if is_home()
    - var top_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
  else if is_archive()
    - var top_img = theme.archive_img !== false ? theme.archive_img || theme.default_top_img : false
  else
    - var top_img = page.top_img || theme.default_top_img

因为店长的用到的是 page.background ,我就想能不能直接用这个 top_img


实现

首先是页面的,包括一图流,个人发现 index 没有改动,仅仅将 bg 图跟一开始的 banner 图设置成一样的就有一图流的效果,对比之后发现是 index 对应的 full_page 样式的问题。

改动的话,在 themes/butterfly/source/css/_layout/head.stylnot-home-page 后面加上一行就行:

// page
&.not-home-page
  height: 400px
  background-attachment: fixed

然后是 post 的,修改 themes/butterfly/layout/includes/layout.pug , 这部分参考店长的改动,我改了下。

首先在前面声明部分加上 top_img 的声明:

// 搬的 header/index.pug
if is_post()
  - var top_img = page.top_img || page.cover || page.randomcover
else if is_page()
  - var top_img = page.top_img || theme.default_top_img
else if is_tag()
  - var top_img = theme.tag_per_img && theme.tag_per_img[page.tag]
  - top_img = top_img ? top_img : (theme.tag_img !== false ? theme.tag_img || theme.default_top_img : false)
else if is_category()
  - var top_img = theme.category_per_img && theme.category_per_img[page.category]
  - top_img = top_img ? top_img : (theme.category_img !== false ? theme.category_img || theme.default_top_img : false)
else if is_home()
  - var top_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
else if is_archive()
  - var top_img = theme.archive_img !== false ? theme.archive_img || theme.default_top_img : false
else
  - var top_img = theme.error_404.background

然后修改 web_bg 的设置:

doctype html
html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
  head
    include ./head.pug
  body
    if theme.preloader
      !=partial('includes/loading/loading', {}, {cache: true})

    if top_img !== undefined
      #web_bg(style=`background:url(`+top_img+`);background-position: center;background-size: cover;`)
    else
      #web_bg

再在 themes\butterfly\source\css\_layout\head.styl 中修改 #page-header 的属性,加上一行:

  #page-header
    position: relative
    width: 100%
    background-color: $light-blue
+  background-attachment fixed
    background-position: center center
    background-size: cover
    background-repeat: no-repeat
    transition: all .5s

然后加上 pjax ,修改 themes/butterfly/layout/includes/third-party/pjax.pug

- var pjaxExclude = 'a:not([target="_blank"])'
if theme.pjax.exclude
  each val in theme.pjax.exclude
    - pjaxExclude = pjaxExclude + `:not([href="${val}"])`

- let pjaxSelectors = ['title','#config-diff','#body-wrap','#rightside-config-hide','#rightside-config-show','#web_bg','.js-pjax']

大功告成。


  1. 糖果屋微调合集 | Akilar の糖果屋 ↩︎