今天摸鱼把网站的点击特效做了QwQ,选用的效果是烟花(/逆飞的流星🎆🎆,主要摸索了如何在Hugo里添加JavaScript代码
添加js文件
这次用到的两个js文件在这里:
在./static/
下新建一个js
文件夹,文件夹下新建两个js
文件,命名为anime.min.js
和fireworks.js
,然后将上面两个文件的内容粘贴进去。
引入js文件
在./layouts/partials/extend_head.html
中添加如下代码:
<style type="text/css">
.fireworks {
position: fixed;
top: 0;
left: 0;
widows: 100%;
height: 100%;
z-index:99999999;
pointer-events:none; /*这个样式可以解决正常点击事件不响应的问题*/
}
</style>
<canvas class="fireworks"> </canvas>
<script src="/js/anime.min.js" ></script>
<script src="/js/fireworks.js" ></script>