得知途徑
B3log提供了兩套博客系統，一個是用Java開發的，叫做Solo，我也是在網上搜索Java博客系統時發現了它，之后才了解了B3log；還有一個是用Go語言開發的，叫做Pipe.其中Solo是需要自己在自己的雲主機上搭建的，而Pipe可以選擇自己搭建，也可以使用B3log搭建好的服務.
在Pipe的主頁，背景使用了一個非常酷炫的粒子特效，而且還能和鼠標指針互動。
我最近正好在學習網頁制作，就想着如果能把這個背景放到我自己的網頁上就好了。一般這種效果不會是網頁開發者自己寫的，而是去調用一些別人寫好的js或者css文件來完成。我在Pipe的主頁點擊右鍵，選擇檢查，界面變成下圖
可以看到果然有一個叫做particles-js-canvas-el，那么基本可以確定這個效果就是由particles.js實現的。去百度搜索particles.js，果然找到了相關的資料。
基本配置
到官網下載paritcles.js的文件包，解壓之后里面有一個demo文件夾。我們將該文件夾復制出來，並對該文件夾中的文件進行修改即可。
該文件夾中有一個index.html文件，我們打開它，找到其中的
<!-- particles.js container -->
<div id="particles-js"></div>
這個id為particles-js的div就是用於放置粒子特效背景的。我們在這個div的后面放上自己的內容。很多網上其他的教程就到此為止了，但是這樣的話是無法將粒子特效特效設置為背景的，而是將后面的內容推了下去，如圖：
一些稍微好一點的教程會告訴你，需要找到css文件夾中的style.css文件，繼續修改。他會說找到#particles-js，在里面添加上一行
position: absolute;
這樣的確可以讓粒子效果變成背景，如圖
不過依然存在兩個問題
- 我使用bootstrap做網頁，這樣做會遮擋一些bootstrap元素（可以看看和上圖的對比）
- 當網頁較長時，下拉后沒有背景效果，如圖
網上也的確有人提出了后面的這個問題，參見該網頁中用戶youkie的評論，我在使用的時候同樣遇到了這個問題，有意思的是作者回答了幾乎所有其他的問題，就是沒有回答這個問題。我嘗試調整了style.css文件中background-repeat屬性，不過沒用。
突然我靈光一現，我們可以換一種思路啊，既然不能讓它延長，那就讓它像一些網站的導航欄一樣固定，不也一樣能解決問題。於是我將position: absolute;改成了position: fixed;，果然實現了我想要的效果。
之后我又去網上搜索怎么樣讓我的bootstrap元素不被遮擋。有說設置z-index的，沒用。最后的解決方案也同樣是修改position屬性，在css文件中將想要不被遮擋的元素的position設置為relative即可。
高級配置
默認的背景顏色是紅色，太刺眼，我們要修改的話同樣是在style.css里面的#particles-js找到background-color屬性進行修改。
還有一些具體配置粒子數量、圖形、大小、速度一些細節內容。
https://www.cnblogs.com/wangyihong/p/8618305.html 里有翻譯成中文的配置文件詳解，我就不在此展開了。
成果展示
我使用particles.js制作的網頁鏈接為：https://aopstudio.github.io