点击查看更新记录

更新记录

2023-01-31:新建教程

  1. 编写教程主要内容
  2. 实现自定义手机端电脑端的白天黑夜模式共计四种背景
  3. 通过内联样式提供图片内容。所以支持在front-matter单独自定义背景
  4. 新增背景图片切换效果，会有一个旧页消失，新页切入的动态
  5. 从效果考虑，附加了一图流内容

前言

emm，是这样的，因为写方舟写嗨了，大刀阔斧的删了很多我觉得比较丑的代码。以前我还会记得把改过的文件前面加个ark的前缀的，但是改到页码开始，pug文件耦合程度太高了。改着改着我就忘记改过哪里了。再是改顶栏菜单时删了很多main.js里的内容，现在main.js也面目全非了。

所以现在只能挑拣一下还能认得出来的内容写成教程。

不管。洪哥不出教程，洪化的主题还不是满天飞。凭啥我的方舟样式出了教程还是只有我在用。我认识到教程的作用是有极限的，我不出教程啦jojo！

好的言归正传。以前我在糖果屋微调合集里写过两个多背景的方案。但是这两个方案滥用important提高权级，兼容性拉胯。所以我就换了种邪门的办法。既然你一个容器不好做多个属性。那我直接写四个背景容器不就好了。反正display: none的时候又不渲染。加载的时候不都要发起图片请求吗。

于是就有了这个方案。

魔改步骤

  1. 因为我以前不是在糖果屋微调合集里写过两个多背景方案吗，就是每页单独配置背景图和配置手机PC页面白天黑夜共四个背景图的那两节。如果你有按照那两篇改过，那麻烦你逆向还原一下。
  2. 哦，还有一篇添加白天夜间模式转换动画,这个因为有个切换嘛，那个动画播放时间刚好会把我设计的那个过渡效果遮盖掉，你要保留也没关系啦。我就是提一句。
  3. 主题自带的背景我准备全部剔除掉。然后不要头图和页脚背景了，就一图流。你懂我意思吧。所以后面要大刀阔斧的删源码。
    • 删除[Blogroot]\themes\butterfly\source\css\_global\function.styl中涉及#web_bg的内容
      1
      2
      3
      4
      - canvas:not(#ribbon-canvas),
      + canvas:not(#ribbon-canvas)
      - #web_bg
          animation: to_show 4s
    • 删除[Blogroot]\themes\butterfly\source\css\_layout\footer.styl中涉及页脚背景的内容
      1
      2
      3
      4
      5
      6
        #footer
          position: relative
      -   background-color: $light-blue
      -   background-attachment: scroll
      -   background-position: bottom
      -   background-size: cover
    • 删除[Blogroot]\themes\butterfly\source\css\_global\index.styl中涉及#web_bg的内容
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      - 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
    • 删除[Blogroot]\themes\butterfly\source\css\_mode\darkmode.styl里所有的夜间模式遮罩层。
      1
      2
      3
      4
      5
      6
      7
      8
      - #web_bg:before,
      - #footer:before,
      - #page-header:before
      -   position: absolute
      -   width: 100%
      -   height: 100%
      -   background-color: alpha($dark-black, .7)
      -   content: ''
    • 删除[Blogroot]\themes\butterfly\source\css\_layout\head.styl中#page-header的遮罩层和背景
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
        #page-header
          position: relative
          width: 100%
      -   background-color: $light-blue
      -   background-position: center center
      -   background-size: cover
      -   background-repeat: no-repeat
          transition: all .5s

      -   &:not(.not-top-img):before
      -     position: absolute
      -     width: 100%
      -     height: 100%
      -     background-color: alpha($dark-black, .3)
      -     content: ''
  4. 然后新建[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
    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
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    //背景项存在则开启
    if hexo-config('background')
      #web-bg
        position: fixed
        z-index: -999
        width: 100%
        height: 100%
        padding: 0
        #default-bg,
        #dark-bg,
        #mobile-bg,   
        #mobile-dark-bg
          position: fixed
          background-attachment: local !important
          background-position: center !important
          background-size: cover !important
          background-repeat: no-repeat !important
          width: 100%
          height: 100%
        // 夜间模式的遮罩层
        #dark-bg,
        #mobile-dark-bg
          &::before
            position: absolute
            width: 100%
            height: 100%
            background-color: rgba(0,0,0,0.6)
            content: ''

    @media screen and (min-width: 900px)
      #web-bg
        #default-bg
          animation web-bg-show 0.3s linear 1 forwards
        #dark-bg
          animation web-bg-hidden 0.3s linear 1 0.1s forwards
        #mobile-bg
          display: none
        #mobile-dark-bg
          display: none
      [data-theme="dark"]
        #web-bg
          #default-bg
            animation web-bg-hidden 0.3s linear 1 0.1s forwards
          #dark-bg
            animation web-bg-show 0.3s linear 1 forwards
            
    @media screen and (max-width: 900px)
      #web-bg
        #default-bg
          display: none
        #dark-bg
          display: none
        #mobile-bg
          animation web-bg-show 0.3s linear 1 forwards
        #mobile-dark-bg
          animation web-bg-hidden 0.3s linear 1  0.1s forwards

      [data-theme="dark"]
        #web-bg
          #mobile-bg
            animation web-bg-hidden 0.3s linear 1 0.1s forwards
          #mobile-dark-bg
            animation web-bg-show 0.3s linear 1 forwards

            
    //显示效果的动画
    @keyframes web-bg-show
      0%
        z-index: -998
        display: block
        clip-path: inset(0 100% 0 0)
      100%
        z-index: -998
        display: block
        clip-path: inset(0 0 0 0)
    //消失效果的动画
    @keyframes web-bg-hidden
      0%
        z-index: -999
        display: block
        clip-path: inset(0 0 0 0)
      99%
        z-index: -999
        display: block
        clip-path: inset(0 0 0 100%)
      100%
        z-index: -999
        display: none
        clip-path: inset(0 0 0 100%)

  5. 修改[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
      body
        if theme.preloader.enable
          !=partial('includes/loading/index', {}, {cache: true})

    -   if theme.background
    -     #web_bg
    +   //- 首先取到所有的背景数值。如果没有就先按照默认的背景逐一赋值
    +   - $default_bg = page.default_bg || theme.background.default_bg
    +   - $dark_bg = page.dark_bg || theme.background.dark_bg || $default_bg
    +   - $mobile_bg = page.mobile_bg || theme.background.mobile_bg || $default_bg
    +   - $mobile_dark_bg = page.mobile_dark_bg || theme.background.mobile_dark_bg || $dark_bg
    +   if theme.background
    +     #web-bg
    +       #default-bg(style=`background:`+ $default_bg+`;`)
    +       #dark-bg(style=`background:`+ $dark_bg+`;`)
    +       #mobile-bg(style=`background:`+ $mobile_bg+`;`)
    +       #mobile-dark-bg(style=`background:`+ $mobile_dark_bg+`;`)
          
        !=partial('includes/sidebar', {}, {cache: true})
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    body
      if theme.preloader.enable
        !=partial('includes/loading/index', {}, {cache: true})
      //- 首先取到所有的背景数值。如果没有就先按照默认的背景逐一赋值
      - $default_bg = page.default_bg || theme.background.default_bg
      - $dark_bg = page.dark_bg || theme.background.dark_bg || $default_bg
      - $mobile_bg = page.mobile_bg || theme.background.mobile_bg || $default_bg
      - $mobile_dark_bg = page.mobile_dark_bg || theme.background.mobile_dark_bg || $dark_bg
      if theme.background
        #web-bg
          #default-bg(style=`background:`+ $default_bg+`;`)
          #dark-bg(style=`background:`+ $dark_bg+`;`)
          #mobile-bg(style=`background:`+ $mobile_bg+`;`)
          #mobile-dark-bg(style=`background:`+ $mobile_dark_bg+`;`)
      !=partial('includes/sidebar', {}, {cache: true})
  6. 修改[Blogroot]\_config.butterfly.yml中关于背景的配置项内容,在下面新增四行配置。分别对应电脑端手机端白天黑夜四个模式。
    1
    2
    3
    4
    5
    6
    7
    8
    # Website Background (設置網站背景)
    # can set it to color or image (可設置圖片 或者 顔色)
    # The formal of image: url(http://xxxxxx.com/xxx.jpg)
    background:
      default_bg:     #默认背景
      dark_bg:        #夜间模式背景
      mobile_bg:      #手机端背景
      mobile_dark_bg: #手机端夜间模式背景
  7. 当然还支持你在文章的front-matter里单独给那篇配置四背景。
    1
    2
    3
    4
    5
    6
    title:
    date:
    default_bg:     #默认背景
    dark_bg:        #夜间模式背景
    mobile_bg:      #手机端背景
    mobile_dark_bg: #手机端夜间模式背景
  8. 这里我设置了背景的覆盖机制，优先级依次为Front-matter里的默认、夜间、手机端默认、手机端夜间、主题配置项的默认、夜间、手机端默认、手机端夜间。所以至少要配置一下主题配置项的默认背景。话说看这篇教程的还会安逸与单独一个背景吗？