1 修改背景图

  • (1) 准备一张背景图，尽可能大一点，并放到assets/background文件夹下(不存在则自己创建)

  • (2) 在页脚文件layouts/partials/footer/custom.html中(不存在则自己创建)，引入以下代码，修改对应的背景图片名

不同的主题对应的页脚文件不同，按自己实际主题的页脚文件引入代码

1
2
3
4
5
6
7

<style>
  body {
    background: url({{ (resources.Get "background/背景图片名").Permalink }}) no-repeat center top;
    background-size: cover;
    background-attachment: fixed;
  }
</style>

Copy

2 引入动态背景

2.1 樱花飞舞

  • (1) 下载【sakura.js】(Ctrl + S 保存)，并放到assets/background文件夹下

  • (2) 在layouts/partials/footer/custom.html中，引入以下代码

1

<script src={{ (resources.Get "background/sakura.js").Permalink }}></script>

Copy

2.2 点线漂浮(particles.js)

  • 【particles.js文档】

  • (1) 前往【配置页面】配置参数，参数按自己喜好即可，唯一注意要修改的参数是 detect_on，要改成 window

  • (2) 下载配置文件，以及 particles.js 所需要的js文件

  • (3) 把下载好的文件，解压并将以下两个文件放到assets/background文件夹下

    • particlesjs-config.json

    • particles.min.js

  • (4) 在layouts/partials/footer/custom.html中，引入以下代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<div id="particles-js"></div>

<script src={{ (resources.Get "background/particles.min.js").Permalink }}></script>
<script>
  particlesJS.load('particles-js', {{ (resources.Get "background/particlesjs-config.json").Permalink }}, function() {
    console.log('particles.js loaded - callback');
  });
</script>

<style>
  #particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
  }
</style>

Copy