前言

来源：糖果屋微调合集
问题：配置手机PC页面白天黑夜共四个背景图的教程中手机双背景失败，初步怀疑是版本问题，因为有个文件的配置找不到
（女娲！）
鸣谢：ChatGPT神力，G门！

后语

建议先做一遍上面的教程，因为我就是这样的，防止因为少了什么步骤而失败，因为俺懒得找原因了
打开[Blogroot]\themes\butterfly\layout\includes\layout.pug
在源教程基础上，加入对media端的设置

  • 若没反应可以看看缩进（扔给GPT也行，让它给你看看）

这是我的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
- var globalPageType = getPageType(page, is_home)
- var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
- page.aside = globalPageType === 'archive' ? theme.aside.display.archive : globalPageType === 'category' ? theme.aside.display.category : globalPageType === 'tag' ? theme.aside.display.tag : page.aside
- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
- var pageType = globalPageType === 'post' ? 'post' : 'page'
- pageType = page.type ? pageType + ' type-' + page.type : pageType

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

    if theme.background
      #web_bg
        if theme.background.default
          style.
            /* PC 白天 */
            #web_bg {
              background: url('#{theme.background.default}') !important;
              background-attachment: local !important;
              background-position: center !important;
              background-size: cover !important;
              background-repeat: no-repeat !important;
            }

            /* PC 夜间 */
            [data-theme="dark"] #web_bg {
              background: url('#{theme.background.darkmode || theme.background.default}') !important;
              background-attachment: local !important;
              background-position: center !important;
              background-size: cover !important;
              background-repeat: no-repeat !important;
            }

            /* 移动端 白天 */
            @media screen and (max-width: 768px) {
              #web_bg {
                background: url('#{theme.background.mobileday || theme.background.default}') !important;
                background-attachment: local !important;
                background-position: center !important;
                background-size: cover !important;
                background-repeat: no-repeat !important;
              }
            }

            /* 移动端 夜间 */
            @media screen and (max-width: 768px) {
              [data-theme="dark"] #web_bg {
                background: url('#{theme.background.mobilenight || theme.background.darkmode || theme.background.default}') !important;
                background-attachment: local !important;
                background-position: center !important;
                background-size: cover !important;
                background-repeat: no-repeat !important;
              }
            }

    !=partial('includes/sidebar', {}, {cache: true})

    #body-wrap(class=pageType)
      include ./header/index.pug

      main#content-inner.layout(class=hideAside)
        if body
          div!= body
        else
          block content
          if theme.aside.enable && page.aside !== false
            include widget/index.pug

      - const footerBg = theme.footer_img
      - const footer_bg = footerBg ? footerBg === true ? bg_img : getBgPath(footerBg) : ''
      footer#footer(style=footer_bg)
        !=partial('includes/footer', {}, {cache: true})

    include ./rightside.pug
    include ./additional-js.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;
          }