博客魔改教程之电脑手机黑夜白天四背景

主要做的适配是手机端的背景, 手机端背景和电脑端背景是不同的, 因为手机端屏幕比较小, 电脑端背景在手机端只能显示中间的一部分, 显示效果差, 所以要做适配,效果如下

电脑端白天背景:
avatar

手机端白天背景:
avatar

pc端白天黑夜双背景

修改[BlogRoot]\themes\butterfly\layout\includes\layout.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
+ - var DefaultBg = page.defaultbg ? page.defaultbg : theme.background.default
+ - var DDMBg = theme.background.darkmode ? theme.background.darkmode : DefaultBg
+ - var DarkmodeBg = page.darkmodebg ? page.darkmodebg : DDMBg
  if theme.background
    #web_bg
+     if page.defaultbg || page.darkmodebg
+       style.
+         #web_bg{
+           background: #{DefaultBg} !important;
+           background-attachment: local!important;
+           background-position: center!important;
+           background-size: cover!important;
+           background-repeat: no-repeat!important;
+         }
+         [data-theme="dark"]
+           #web_bg{
+             background: #{DarkmodeBg} !important;
+             background-attachment: local!important;
+             background-position: center!important;
+             background-size: cover!important;
+             background-repeat: no-repeat!important;
+           }

手机端白天黑夜双背景

在[BlogRoot]\themes\butterfly\source\css\_layout目录下新建一个web-bg.styl文件，写入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$web-bg-night = hexo-config('background.darkmode') ? unquote(hexo-config('background.darkmode')) : $web-bg
$mobile-bg-day = hexo-config('background.mobileday') ? unquote(hexo-config('background.mobileday')) : $web-bg
$mobile-bg-night = hexo-config('background.mobilenight') ? unquote(hexo-config('background.mobilenight')) : $web-bg-night
[data-theme="dark"]
  #web_bg
    background: $web-bg-night
    background-attachment: local
    background-position: center
    background-size: cover
    background-repeat: no-repeat
@media screen and (max-width: 800px)
  #web_bg
    background: $mobile-bg-day !important
    background-attachment: local !important
    background-position: center !important
    background-size: cover !important
    background-repeat: no-repeat !important
  [data-theme="dark"]
    #web_bg
      background: $mobile-bg-night !important
      background-attachment: local !important
      background-position: center !important
      background-size: cover !important
      background-repeat: no-repeat !important

其他修改

修改[BlogRoot]\themes\butterfly\source\css\var.styl,在约34行

1
2
3
4
  $text-line-height = 2
- $web-bg = hexo-config('background') && unquote(hexo-config('background'))
+ $web-bg = hexo-config('background.default') && unquote(hexo-config('background.default'))
  $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh

在[BlogRoot]/_config.butterfly.yml中找到background配置项，修改为：

1
2
3
4
5
background:
  default:  #【必选】默认背景
  darkmode: #【可选】PC端夜间模式背景
  mobileday: #【可选】移动端日间默认背景
  mobilenight: #【可选】移动端夜间模式背景

最后hexo三连即可