如何在 javascript 文件中访问 Hugo 的模板变量？

Question

我正在尝试在 Hugo 中使用 react.js。我知道可以在 HTML 文件中访问 Go 模板变量。

我的问题是如何在 javascript 中访问它们。或者有解决方法吗？

提前致谢。

更新？

目前我的解决方法是meta在 HTML 中使用标签并加载 Go 模板变量，如下所示：

<meta name="title" content={{.Title}} />

然后在javascript中，

function getMetaTitle() {
   var metas = document.getElementsByTagName('meta');

   for (i=0; i<metas.length; i++) {
      if (metas[i].getAttribute("name") == "title") {
         return metas[i].getAttribute("content");
      }
   }

   return "failed to access...";
}
var metaTitle = getMetaTitle();

但是当元标签数量增加时这种方式不方便，有没有更简洁的方法来做到这一点？

Answer 1

我怀疑 Hugo 和 React 是一对好搭档，但这不是主题，我的看法可能是错的。您问的是，如何将 Hugo 变量放入网站的 JavaScript 中。我的答案：

\n\n\n\n

Hugo 是静态网站引擎，因此它仅将模板和标记文档（包含您的内容）转换为 HTML 文件。现在，当您将文件上传到服务器时，您的 JS 无法看到任何内容Hugo \xe2\x80\x94 只能看到您的文件。

\n\n

问题是，如何将 Hugo 变量传输到您网站的某些文件中。

\n\n

正如您所建议的，最好使用 Hugo 将变量写入 HTML（或 JSON），然后通过 JS 读取它们。如果数量较少，请使用属性或标签。如果有很多并且每页没有不同，请使用单独的 JSON 文件。

\n\n

例如，我个人有一个多语言网站，a）需要通过 JS 动态显示不同语言的标题；b) 使用 JS 以JSON 格式查询不同的Lunr.js搜索索引。

\n\n

对于两者我都使用data-<name>属性：

\n\n

    <section class="section-search" data-index="{{ .Site.BaseURL }}searchIndex.json" id="section-search">\n      <input type="search" id="search-input" placeholder="{{ ( index $.Site.Data.translations $.Site.Params.locale ).dataloading }}" data-loaded="{{ ( index $.Site.Data.translations $.Site.Params.locale ).dataloaded }}">\n      <!-- search button goes here -->\n    </section>\n

\n\n

例如，在英语模板（呈现为/public/）上，data-loaded属性将为英语，但对于立陶宛语模板（呈现为/public/lt/），data-loaded属性将为立陶宛语。

\n\n

我不会担心“增长元标记”，但如果您担心 HTML 膨胀，您可以将变量写入 JSON 文件，然后在 JS 中读取它？

\n\n

我首先将自定义 JSON 构建为 HTML，然后在按照此配方为 Hugo Lunr 搜索构建索引时将其缩小/重命名为 JSON。range您可以简单地列出所有变量，而不是像上面提到的配方那样“烘焙”内容。

\n\n

顺便说一句，我正在使用npm scripts构建运行程序（而不是 Grunt/Gulp），所以我使用json-minify：

\n\n

"index:prepare": "json-minify public/json/index.html > public/site-index.json",\n

\n\n

您可以通过 Hugo 这种方式“烘焙”包含任何内容（包括 Hugo 模板变量）的 JSON 文件。希望能帮助到你。

\n