如何为你的博客添加3D背景

教程

发布日期: 2020-04-16

之前偶然发现了这个网站：Vanta.js，发现里面的3D动态效果非常酷炫，于是就想把这东西安在自己的博客里。但是作为一名前端苦手，根本不知道怎么用它自带的代码，于是当时钻研了一晚上以后就放弃了。

但是！过了将近半个月，我还是不死心，因为它的动态背景实在是太好看了，比这个matery主题自带的那三个动态背景强多了。最后，在Google的帮助下，我最终找到了添加这个背景的懒人代码。但是我复制粘贴以后发现只能显示在左上角一小块区域内，于是再次谷歌，一顿魔改加测试以后终于成功的把我的博客换上了3D背景，这感觉就像在新年的第一天换上新内裤一样清爽！

下面是详细教程：

第一步

选择一个你喜欢的背景：

飞鸟：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.birds.min.js"></script>
<div id="vantajs" style="position: fixed; top: 0px; left: 0px; z-index: -1; height:100%; width:100%;"></div>
<script>
VANTA.BIRDS(&#123;
  el: "#vantajs",
  /* more options (Uncomment) */
  //birdSize: 1.50,
  //wingSpan: 21.00,
  //speedLimit: 4.00,
  //separation: 32.00,
  //alignment: 33.00,
  //cohesion: 33.00,
  //quantity: 2.00
&#125;);
 
VANTA.BIRDS("#vantajs");
 
</script>

云朵：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.clouds.min.js"></script>
<div id="vantajs" style="position: fixed; top: 0px; left: 0px; z-index: -1; height:100%; width:100%;"></div>
<script>
 
VANTA.CLOUDS(&#123;
  el: "#vantajs",
  mouseControls: true,
  touchControls: true,
  minHeight: 200.00,
  minWidth: 200.00
&#125;)
 
VANTA.CLOUDS("#vantajs");
 
</script>

3D网格球体：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.globe.min.js"></script>
<div id="vantajs" style="position: fixed; top: 0px; left: 0px; z-index: -1; height:100%; width:100%;"></div>
<script>
 
VANTA.GLOBE(&#123;
  el: "#vantajs",
  mouseControls: true,
  touchControls: true,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00
&#125;)
 
VANTA.GLOBE("#vantajs");
 
</script>

其他背景请自行去Vanta.js自行选择喜欢的样式并替换以上代码的名称，注意要同时替换三处：script src中的js文件名称，script中的函数名称和包含的变量。

第二步

找到你的博客主题的源文件（这里以matery主题为例），进入layout文件夹，找到layout.ejs。为防止出现错误，请先将其备份。

打开，将上面的代码直接粘贴进去，注意必须粘贴到body标签内，否则会直接崩掉。
如果你是next主题或者是别的主题，原理也是一样的，找到你的博客主题的layout文件夹，找到其中的_layout.swig，然后Ctrl+C，Ctrl+V就完事了。

第三步

打开git窗口，执行hexo g，hexo d即可。如果想先看看效果怎样可先用hexo s预览一下。如果生成页面的过程中报错或者页面完全崩坏，请将之前备份的layout文件恢复，并检查代码是否粘贴错误。

第四步

Enjoy！

彩蛋：附赠一个能随机生成矫情段子的代码（我用在了首页的banner上）：

<script src="https://v1.hitokoto.cn/?c=a&c=b&c=c&c=i&encode=js&amp;select=%23tantanpou" defer="" rel="preload" type="text/javascript"></script>
<p id="tantanpou"></p>