为博客添加动态粒子效果

起因

搞完博客之后，总觉得页面空荡荡的（没什么内容，不空才怪），然后又看到之前的UP主的博客页面又多了新东西，感觉挺好的，我就把它弄过来了。

alt text

方法

首先，需要在你的site文件夹下新建文件layouts/_default/baseof.html，之后把themes/[your theme folder]/layouts/_default/baseof.html文件的内容拷贝过来。之后找到<body>,在里面添加下面这段代码，[your-public-git-repertory](这是你的静态页面仓库的地址，比如我的是orientsama.github.io)，

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<body class="{{ block `body-class` . }}{{ end }}">
    <!--上面这句不用复制 -->

    <!-- add start -->
    <script src="https://[your-public-git-repertory]/background/particles.js"></script>
    <link rel="stylesheet" href="https://[your-public-git-repertory]/background/style.css">
    <div id="particles-js"></div>
    <script>
        particlesJS.load('particles-js', "https://[your-public-git-repertory]/background/particles_config.json", function() {
            console.log('particles.js loaded - callback');
        });
    </script>
    <!-- add end -->

之后在static文件夹下建立background文件夹，放入三个文件。

1
2
3
4
5
6
7
8
9


/* 文件名：style.css */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

第二个文件：partcles.js 在这个仓库里下载

1
2


// 文件名：partcles.js
// 这个文件太长了，就不粘贴了。。。

第三个文件：

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111


// 文件名：particles_config.json
{
  "particles": {
    "number": {
      "value": 120,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#66ccff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 4,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 80,
      "color": "#66ccff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 3,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "window",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "repulse"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 200,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 250,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

particles_config.json是配置文件，你可以自己在这个网站自己调整，上面那个是我copyUP主的。

三个文件都搞定后，commit提交更新，之后git push，等待网页刷新即可。

结语

折腾了不少时间，原因很多，粗心大意是一方面，另一方面是对hugo的框架了解的不深，只能说道阻且长。