时间戳

首页 > 解决方案 > Hugo：Javascript 命令在重新加载页面后才起作用

javascript - Hugo：Javascript 命令在重新加载页面后才起作用

问题描述

我正在研究 Hugo 静态站点生成器主题，问题是除非我重新加载页面，否则不会加载 Javascript 功能

例如在重新加载页面之前 加载前的页面

重新加载页面后

加载后的页面

这是我在添加新类时使用的代码

       $(document).ready(function() {
          $('h2').addClass('hello')
       });

现在，问题是由于它是一个静态站点生成器，当打开一个新页面时，它不会刷新/重新加载站点，而是像缓存页面一样加载页面。因此，除非重新加载页面，否则大多数 javascript 功能仅适用一次。当我在主题上使用 VueJs 时也会遇到这个问题，这意味着我需要找到一种方法来强制加载新的 URL，而不是像锚链接那样加载。

更新：我已经能够解决它，问题来自另一个 javascript 文件，发出 ajax get 请求谢谢

标签： javascriptjqueryhugo

解决方案

您是否在准备好的函数中调试或添加了 console.log 以查看它可以到达那里？我怀疑您的 h2 是由 js 渲染的，而当时您的代码添加了 class hello，而 h2 尚未渲染。

如果是这种情况，我认为您需要先在服务器上呈现 html，或者您可以将脚本包含在与组件相同的位置

推荐阅读