序言：效果展示

电脑端效果展示：

手机端效果展示：

主要修改包括：

  • 引入 video 标签

  • 修改 css 样式

  • 适配 ios 移动端

预览地址：https://zfe.space

其中去掉背景的方法参考了小康博客

步骤 1：去除背景

在根目录”\source\js”文件下复制某个 JS，重命名为”background.js”

打开该文件，删除原有代码，将以下代码粘贴进去。

1
2
3
4
5
6
7
8
<p>保存后在主题的"config"中的"inject"处引入</p>
```YML
inject:
  head:
  # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>
      - <script src="/js/background.js"></script>

在主题的”config.yml”中，搜索”banner”关键词。

将以下图片链接去掉。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# the banner image of home page
index_img:

# if the banner of page not setting, it will show the top_img
default_top_img:

# the banner image of archive page
archive_img:

# the banner image of tag page
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img:

# the banner image of category page
# note: category page, not categories page (子分類頁面的 top_img)
category_img:

搜索关键词”background”,将颜色设置为：

1
2
3
4
5
6
# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of color: '#49B202'
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
# White color will be shown as default
background: "#00000000"

PS：最好不要使用背景美化的飘带效果。

修改主题文件”\source\css_layout”的”head.styl”文件

将 transition 和 background-color:注释掉。

1
2
3
4
5
6
7
8
9
10
#page-header
  position: relative
  width: 100%

  background-attachment: scroll
  background-position: center center
  background-size: cover
  background-repeat: no-repeat
  //transition: all .5s
  //background-color: $light-blue

此时只要你将背景换成图片，就可以一图流了。

1
2
3
4
5
6
# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of color: '#49B202'
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
# White color will be shown as default
background: url(http://zfe.space/images/tianqizhizi.jpg)

这时候你会发现如果是大块纯色页面打开时候会白一下，同时页脚的背景很碍事。

这时候我们需要额外加入一定 CSS。

首先”F12”,用开发者工具取色。

首先”F12”,用开发者工具取色。

在根目录”\source\css”文件路径下复制某个 css，重命名为”background.css”

1
2
3
4
5
6
body {
  background-color: #0090d6;
}
#footer {
  background: #00000000;
}

白色的影响就减小了，当然效果根据图片不同，效果不同。

步骤 2：增加视频

在达到步骤一无头图之后，不替换背景图片。

在根目录”\source\css”文件路径下复制某个 css，重命名为”background.css”

添加代码如下：（最后两项是控制滑动条的配色）
}

#footer {

background: #00000000;

}

body{

background-color:#adc3db;

}

#page-header {background-color:#0000}

::-webkit-scrollbar-track {

background-color: #ccd3db;

}

::-webkit-scrollbar-thumb {

background-color: #6d718c;

}

1
2
3
4
5
6
7
8
9

<p>前往"\themes\butterfly\layout\includes"路径下，复制某个PUG文件，重命名为"backgroundvideo.pug"。</p>
<p>删除内容.</p>
<p>添加以下代码：</p>

```PUG
.bg-video
  video.v1(autoplay, muted, loop)
    source(src='/images/girl.mp4')

打开同文件夹下的”layout.pug”。将”backgroundvideo.pug”include。

1
2
3
4
5
6
7
#body-wrap
   if theme.background
     - var is_photo = theme.background.startsWith('url') ? 'photo':'color'
     #web_bg(data-type=is_photo)
   include ./backgroundvideo.pug
   include ./sidebar.pug
   include ./header/index.pug

打开路径下的”\themes\butterfly\source\css_layout”下的”third-party.styl”.

在末尾添加以下代码（注意顶头）来进行苹果移动端适配：

这里为了手机浏览方便制作了手机壁纸大小的”girlpic.png”替换视频。

这一方法也能使手机端图片背景与菜单栏和谐共处。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@media screen and (max-width: 1024px)
 .bg-video
  display:none
 body
  background-position: -99999px -99999px
  background-image: url(/images/girlpic.png)
  background-repeat:no-repeat
  background-attachment:fixed
  background-position:top
 body:before
  content: ""
  background-image: inherit
  position: fixed
  top: 0
  left: 0
  height: 100vh
  width: 100%
  -webkit-background-size: cover !important
  -moz-background-size: cover !important
  -o-background-size: cover
  background-size: cover !important;
  z-index: -1

最后一步就是选择你喜欢的背景视频了，尽量使用较小的视频，以免影响加载。

重命名为 girl.mp4 置于”/images”目录下：

这里分享几个笔者收集的视频：（在小黑盒上找的，下载后重命名为.mp4 就可以播放了）

videobk.zip

总结

补充一下暗黑模式下的黑色背景问题,footer 设置在 darkmode.styl 的 30 行设置透明背景。

1
2
3
4
5
6
7
#web_bg[data-type=photo]:before,
#footer[data-type=photo]:before
  position: absolute
  width: 100%
  height: 100%
  background-color: transparent
  content: ''
1
<p>header设置在darkmode.styl的58行设置透明背景。</p>

// 頭部

#page-header

&:before

position: absolute

top: 0

left: 0

display: block

width: 100%

height: 100%

background-color: transparent;

content: ‘’

1
2
3
4
5
6
7

<p>2020年9月2日补充： </p>

![example](/images/ps1.png)


<p>我好了。你好了么？好了的话就留个评论吧~  </p>