加载中...
返回

博客搭建指南——2

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

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

没错,在这篇文章里,我要记录一款强大的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.jsapp.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.jsparticles.js

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

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

在文件最末尾补上这样的代码:

.particles-js-canvas-el {
    position:fixed;
    top:0;
    left:0;
    width:100%
}

position设定为fixed,使得整块画布独立于你页面的其他元素;由于它独立了,就需要使用top、left来指定它的位置;最后是画布的宽度,填满整个屏幕即可。

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

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


  1. 下载主题,将两个JS文件放到public/js文件夹里。
  2. 在代码的相应位置写上div。
  3. 在div的下方用script标签和绝对路径引入这两个文件。
  4. 修改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样式可能不会生效。

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

有朋自远方来,不亦说乎?
Built with Hugo
Theme Stack designed by Jimmy