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

【问题标题】：Hugo: Javascript commands not working till after reloading the pageHugo：Javascript 命令在重新加载页面后才起作用
【发布时间】：2019-01-10 01:07:49
【问题描述】：

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

例如重新加载页面之前

重新加载页面后

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

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

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

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

【问题讨论】：

可能是你的代码在加载h2之前运行
将您的代码包装在 `document.addEventListener("DOMContentLoaded", function(event) { // 在此处添加类 console.log("DOM 完全加载并解析"); });`跨度>
仍然是相同的行为，我必须在静态站点反映更改之前重新加载
你在缓存 JS 文件吗？
不，我没有缓存 JS 文件

标签： javascript jquery hugo

【解决方案1】：

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

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

【讨论】：

我已经完成了，所有的js命令只在重新加载页面后显示或运行，首先在服务器上渲染HTML（我不明白怎么做），包括我的脚本在同一个放置为我的组件（我正在使用 Hugo 静态站点生成器，并使用降价，所以首先，我需要在加载内容时将更改应用于所有降价）
我可以从服务器查看您的 html 的样子吗？