博客搭建指南—

初生的博客，更新就是频繁。

如果你看到这篇博文，应该能注意到这篇博文的背景有了一点小变化。

没错，在这篇文章里，我要记录一款强大的JS插件particles.js的使用方法，这款应用能让你的网页背景看起来不那么单调（简直非常适合我现在的博客主题）。

你可以在下面这个链接找到这款应用的源码，虽然我成功使用这款插件的历程比较艰辛，但是我还是非常敬佩能写出这种代码的人。

(https://github.com/VincentGarreau/particles.js)

话不多说，let’s go!

下载这款插件

你可以直接使用git clone或者从网页上下载它。

解压完成之后，你可以看到一个Demo文件夹，不妨先进去看看正确使用这款应用的时候能产生什么效果。

在源码中为插件留出位置

在插件作者的GitHub仓库里实际上已经写明了使用方法，但是我要结合hugo和我的主题——Keepit——再详细地介绍一次。

在你的页面中为插件留出位置，这个操作非常简单。打开你的footer.html，找一个合适的位置（最好是最外层），加上一个标签：

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

然后，就没有然后了！现在你的插件已经能够找到它的容身之所了，准备让它运行起来吧！

p.s footer.html在文件夹partials里，看过第一篇博文的你，应该很熟悉它的内容了吧？关于我们为什么要在这个文件里加上这个东西，主要是考虑到任何界面都有这么一个版权说明模块，那么也就是任何界面到时候都会有漂漂亮亮的背景！还有，我认为可能存在某些主题没有footer.html文件，但是这根本没什么关系，你也可以把这个div加在任何你想要的的地方。

p.p.s 2021年1月14日，现在我把这部分代码加在了layouts/_default/baseof.html，因为它似乎是所有页面的基本框架，适用性更强一些。

引入插件

你可能会认为，这篇博文的第二步和第三步完全可以调换顺序，如果你这么想了，也这么做了，那我祝你不要踩到我踩过的坑。

我们要在第二步的div底下写入插件。

为什么这样？因为JavaScript的加载顺序是从前往后的。有过Bootstrap框架使用经验的朋友应该知道，在使用Bootstrap的JS应用时，要在之前首先引入jQuery，否则整个页面将无法实现应有的功能！

我们的顺序也是如此。在我使用这个插件的时候，尝试过过几种方法：在/asset/js文件夹中放入相应的JS文件；在partials文件夹中写一个custom_js.html文件，里面是几条简单的<script>标签；修改partials文件夹中的head.html文件，在头部就引入插件；在第二步的<div>之前写入几条<script>标签。

以上方法全部失败。

因此，你不要小看这篇博文的分量，它可能可以帮助你节省几个小时的试错时间。

言归正传，我们还是需要把插件的JS文件引入到源码中。要想插件能够工作，你只需要使用两个文件：particles.js和app.js，他们分别在第一步那个项目的根目录里，还有Demo文件夹里。particles.js是发挥功能的文件，而app.js是配置文件，具体能配置些什么，后面再说，总之，先使用别人帮你写好的东西吧。

接下来的一步很重要：把这两个文件放入public/js文件夹中!

你都看到这篇文章了，肯定已经在GitHub上有自己的第一个页面了吧？你会发现，public文件夹的结构跟你的仓库的结构是一样的，我们的GitPage的CSS、JS等文件，都存在对应的路径底下。也就是说，**当你把这两个JS文件放到了public/js文件夹底下，你等一下git push的时候就会把这两个文件也一并推送到远程仓库的对应位置。**这样，你的源码就能找到JS文件了。

将两个JS文件引入，记得放在第二步的div后面：
<script src="xxxxx/app.js"></script>
<script src="xxxxx/particles.js"></script>
这里的“xxxx”是你放置这两个文件的路径，我接下来要教你一个取巧的办法。

巧妙地获取路径

如果你的代码中，这两个JS文件的路径出了问题，那很不幸，当你打开页面的时候一定是见不到背景的，而且，你按下F12，还能看到控制台给你报出的无情的404 Not Found。

我们要怎么使远程仓库中的代码也能找到正确的路径呢？如果使用src="/js/app.js"这样的语句，当你打开网站的主页，它会找到https://yourWeb.github.io/js/app.js，看起来非常的正确；但是当你在网站里面的某个页面里，比如某一篇博文中，它就会去找https://yourWeb.github.io/post/article1/js/app.js，必然是失败的，于是你的博文就不能有漂亮的背景了 :(

正确的获取路径的姿势，你可以直接使用绝对路径，也就是https://yourWeb.github.io/js/app.js这样的方式。

底下是我的代码，绝对路径的方法理论上适用于所有主题，你应该把代码里的src值改成自己的仓库：
<script src="https://sgs4ever.github.io/js/particles.js" async="" ></script>
<script src="https://sgs4ever.github.io/js/app.js" async="" ></script>

代码的最终样式及推送

经过一系列的修改后，你的页面的代码就多了如下的东西：
<div id="particles-js"></div>
<script src="https://sgs4ever.github.io/js/particles.js" async="" ></script>
<script src="https://sgs4ever.github.io/js/app.js" async="" ></script>
此外，你的public/js文件夹中还多了两个文件app.js和particles.js。

现在，不要以为一切已经结束了，因为你的这个div，你的页面现在多了一个元素，如果它位于footer上方，那它会使得你的页面被撑得很长，我们要在主页面的CSS文件里修改它。

进入public/css文件夹，如果是Keepit主题，就只有一个文件，打开它；如果是其他主题，你需要找到能发挥作用的CSS。

在文件最末尾补上这样的代码：
.particles-js-canvas-el {
    position:fixed;
    top:0;
    left:0;
    width:100%
}
position设定为fixed，使得整块画布独立于你页面的其他元素；由于它独立了，就需要使用top、left来指定它的位置；最后是画布的宽度，填满整个屏幕即可。

这样，就完成了所有的步骤了。

我们回顾一下总共做了什么：

下载主题，将两个JS文件放到public/js文件夹里。

在代码的相应位置写上div。

在div的下方用script标签和绝对路径引入这两个文件。

修改CSS，使背景独立。

完成以上步骤，就使用hugo编译静态页面，然后进入public文件夹用git把它推送到远程仓库上吧！

背景样式的修改

如果一切顺利，你的背景已经很不错了。现在你可以通过配置app.js的方法进一步修改它。

app.js文件是配置背景的文件，它可以改变背景中每个粒子的形状、颜色、移动方式等等。

下面这个链接将每一个字段的取值和含义写得非常清楚：

(https://www.jb51.net/article/123594.htm)

例如我的particles.color.value = "random"，这是为了在白色主题的情况下也可以看到背景特效。

一些细节

此部分增加于2021年1月14日

博客已经发布了十来篇文章，重看此文，有一些细节（或不如说是遗留的BUG）是值得一提的。

JS的加载顺序。本文前面的代码已经将JS的加载顺序考虑了进来，且添加了async标签指示浏览器按照顺序加载两个JS文件，然而这样的写法似乎是无用的，因为我的博客还是时不时地丢失掉背景效果；实际上使得JS按照顺序加载的办法还有不少，可以留待读者自行查找资料实现（主要是作者懒）。

hugo的版本。博客搭建指南——1中提到了要下载hugo-extend，你除了使用文章中介绍的办法下载之外，还可以使用chocolate包管理器下载，具体做法可以使用搜索引擎查找，比较简单。而正如那篇文章中所说，如果你不安装extend版本，你将无法编译SCSS文件，而这对于我们这款主题（相信还有其他很多精美的主题）来说是很致命的。与本文相关的，如果你使用的不是extend版本的hugo，你在第5小节中自定义的CSS样式可能不会生效。

以上，是本篇的全部内容。