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

Question

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

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

提前致谢。

更新：

目前我的解决方法是在 HTML 中使用 meta 标签并像这样加载 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();

但是当meta tag越来越多的时候这种方式会很不方便，有没有更简洁的方式呢？

Answer 1

当然，您可以在布局文件中内联 JS，但这可能不是您想要的。

在 Hugo 讨论站点上已经有一些关于这方面改进的讨论，但还没有具体内容。

Answer 2

我怀疑 Hugo 和 React 是一对好搭档，但这是题外话，我可能是错的。您在问，如何将 Hugo 变量导入网站的 JavaScript。我的回答：

Hugo 是静态网站引擎，因此它只会将模板和标记文档（包含您的内容）转换为 HTML 文件。现在，当您将文件上传到服务器时，您的 JS 看不到任何东西 Hugo — 只有您的 files.

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

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

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

我都使用 data-<name> 属性：

    <section class="section-search" data-index="{{ .Site.BaseURL }}searchIndex.json" id="section-search">
      <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 }}">
      <!-- search button goes here -->
    </section>

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

我不担心 "growing meta tags"，但如果您担心 HTML 膨胀，您可以将变量写入 JSON 文件，然后在 JS 中读取它？

我首先将自定义 JSON 构建为 HTML，然后将其 minifying/renaming 构建为 JSON，同时根据 this 为 Hugo Lunr 搜索构建索引食谱。您可以简单地列出所有变量，而不是 "baking in" 中提到的带有 range 的内容。

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

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

您可以通过 Hugo "bake" JSON 包含任何内容（包括 Hugo 模板变量）的文件。希望对你有帮助。

Answer 3

您可以在 config.toml 中为 Javascript 指定自定义输出格式，这样 Hugo 就会像处理内容文件一样处理这些特定格式和文件扩展名，在其中用足够的值替换模板变量。

因此，您 config.toml 中的如下条目会将 javascript 文件视为其自定义输出格式需要考虑的媒体类型之一：

[mediaTypes]
    [mediaTypes."application/javascript"]
    suffix = "js"

您可以阅读更多相关信息here

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

how to access Hugo's template variables in a javascript file?

hugo