四背景自定义及过渡切换效果方案
更新记录
2023-01-31:新建教程
- 编写教程主要内容
- 实现自定义手机端电脑端的白天黑夜模式共计四种背景
- 通过内联样式提供图片内容。所以支持在front-matter单独自定义背景
- 新增背景图片切换效果，会有一个旧页消失，新页切入的动态
- 从效果考虑，附加了一图流内容
前言
emm，是这样的，因为写方舟写嗨了，大刀阔斧的删了很多我觉得比较丑的代码。以前我还会记得把改过的文件前面加个ark的前缀的，但是改到页码开始，pug文件耦合程度太高了。改着改着我就忘记改过哪里了。再是改顶栏菜单时删了很多main.js里的内容，现在main.js也面目全非了。
所以现在只能挑拣一下还能认得出来的内容写成教程。
不管。洪哥不出教程，洪化的主题还不是满天飞。凭啥我的方舟样式出了教程还是只有我在用。我认识到教程的作用是有极限的，我不出教程啦jojo！
好的言归正传。以前我在糖果屋微调合集里写过两个多背景的方案。但是这两个方案滥用important提高权级，兼容性拉胯。所以我就换了种邪门的办法。既然你一个容器不好做多个属性。那我直接写四个背景容器不就好了。反正display: none的时候又不渲染。加载的时候不都要发起图片请求吗。
于是就有了这个方案。
魔改步骤
因为我以前不是在糖果屋微调合集里写过两个多背景方案吗，就是每页单独配置背景图和配置手机PC页面白天黑夜共四个背景图的那两节。如果你有按照那两篇改过，那麻烦你逆向还原一下。
哦，还有一篇添加白天夜间模式转换动画,这个因为有个切换嘛，那个动画播放时间刚好会把我设计的那个过渡效果遮盖掉，你要保留也没关系啦。我就是提一句。
主题自带的背景我准备全部剔除掉。然后不要头图和页脚背景了，就一图流。你懂我意思吧。所以后面要大刀阔斧的删源码。
删除[Blogroot]\themes\butterfly\source\css\_global\function.styl中涉及#web_bg的内容
- canvas:not(#ribbon-canvas),
+ canvas:not(#ribbon-canvas)
- #web_bg
animation: to_show 4s删除[Blogroot]\themes\butterfly\source\css\_layout\footer.styl中涉及页脚背景的内容
#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的内容
- 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里所有的夜间模式遮罩层。
- #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的遮罩层和背景
#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: ''然后新建[Blogroot]\themes\butterfly\source\css\_layout\web_bg.styl,写入四个背景的基本样式。
//背景项存在则开启
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%)修改[Blogroot]\themes\butterfly\layout\includes\layout.pug,
- 代码修改
- 改动完成内容
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})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}) 修改[Blogroot]\_config.butterfly.yml中关于背景的配置项内容,在下面新增四行配置。分别对应电脑端手机端白天黑夜四个模式。
# 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: #手机端夜间模式背景当然还支持你在文章的front-matter里单独给那篇配置四背景。
title:
date:
default_bg: #默认背景
dark_bg: #夜间模式背景
mobile_bg: #手机端背景
mobile_dark_bg: #手机端夜间模式背景这里我设置了背景的覆盖机制，优先级依次为Front-matter里的默认、夜间、手机端默认、手机端夜间、主题配置项的默认、夜间、手机端默认、手机端夜间。所以至少要配置一下主题配置项的默认背景。话说看这篇教程的还会安逸与单独一个背景吗？