51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

Hexo+Butterfly深色浅色模式下分别使用不同的网站背景

  1. 修改<BlogRoot>\themes\butterfly\_config.yml,其中background_dark参数为深色模式下的图片地址。

    |-------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 | # Website Background (设置网站背景) # can set it to color or image (可設置圖片 或者 顔色) # The formal of image: url(http://xxxxxx.com/xxx.jpg) background: url(<FilePath>) +background_dark: url(<FilePath>) |

  2. 修改<BlogRoot>\themes\butterfly\source\css\var.styl,在第 36 行左右

    |---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 | $web-bg = hexo-config('background') && unquote(hexo-config('background')) +$web-bg-dark = hexo-config('background_dark') && unquote(hexo-config('background_dark')) $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh |

  3. 修改<BlogRoot>\themes\butterfly\source\css\_mode\darkmode.styl,在第 41 行左右

    |------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 | + #web_bg + background: $web-bg-dark - #web_bg:before, #footer:before, #page-header:before position: absolute width: 100% height: 100% background-color: alpha($dark-black, .7) content: '' |

    扩展:

    若你想像我一样使用四方连续风格图片(即重复图片)且能正常显示 repeat 效果,则继续按照下方更改

  4. 修改<BlogRoot>\themes\butterfly\source\css\_global\index.styl,在第 64 行左右

    |------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 | if $web-bg #web_bg - position: fixed + position: absolute //此处可控制背景是否能跟随滑轮滚动,按需选择是否更改 z-index: -999 width: 100% height: 100% background: $web-bg - background-attachment: local - background-position: center - background-size: cover - background-repeat: no-repeat |

参考链接:https://blog.harriswong.top/posts/9d49f75f/


赞(0)
未经允许不得转载:工具盒子 » Hexo+Butterfly深色浅色模式下分别使用不同的网站背景