【Hugo】修改博客背景并引入动态背景

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>

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>

2.2、点线漂浮（particles.js）

【particles.js文档】
（1）前往【配置页面】配置参数，参数按自己喜好即可，唯一注意要修改的参数是 detect_on，要改成 window
（2）下载配置文件，以及 particles.js 所需要的js文件

[particlesjs-config.json]（Ctrl + S 保存），本博客的动态背景json配置，有需求的可直接下载
（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>