Featured image of post Hexo (Sakura) 音乐插件问题

Hexo (Sakura) 音乐插件问题

全局的 aplayer 插件在站内跳转时会重新加载的问题

前言

偶然发现的一个问题,全局的 aplayer 插件在站内跳转的时候会重新加载,让人感觉非常难受。

aplayer

正文

回去跑了几天前的代码,发现是 ok 的,可这几天改动的地方很多,很难定位问题在哪里。这里先记上一笔:

版本控制太重要了!!

版本控制太重要了!!

版本控制太重要了!!

初步判断问题出在 博客根目录 \themes\Sakura\layout\_partial\footer.ejs, debug 过程对我这个前端小白来说有些残忍,直接上代码:

错误代码

<script type="text/javascript" src="/js/lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript" src="/js/InsightSearch.js"></script>

<!-- fancybox 大图查看 需 jq -->
<link rel="stylesheet" href="/css/jquery.fancybox.min.css" media="all">
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox.min.js"></script>

这里需要将第 7 行的 jquery 插件引入代码提前,防止第 1 行的 lib.min.js 文件需要用到 jquery 语法的时候加载出现错误。

修复完成的代码

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/js/lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript" src="/js/InsightSearch.js"></script>

<!-- fancybox 大图查看 需 jq -->
<link rel="stylesheet" href="/css/jquery.fancybox.min.css" media="all">
<script type="text/javascript" src="/js/jquery.fancybox.min.js"></script>

最后运行,搞定。

总结

在导入 js 和 jquery 插件的时候,一定要先导入 jquery 插件,防止浏览器无法解析 js 中需要用到的 jquery 语法。按照 html 的解析顺序,js 也应该是放在最后导入的。

参考资料

jquery 导入方法及注意问题

使用 Hugo 构建 主题 StackJimmy 设计
发表了 32 篇文章・ 总计 66.22 k 字
本站总访问量 · 总访客数
本博客已稳定运行 🧡