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

【问题标题】：how to access Hugo's template variables in a javascript file?如何在 javascript 文件中访问 Hugo 的模板变量？
【发布时间】：2015-12-04 01:22:30
【问题描述】：

我正在尝试在 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();

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

【问题讨论】：

标签： hugo

【解决方案1】：

您可以在 config.toml 中为 Javascript 指定自定义输出格式，以便 Hugo 将这些特定格式和文件扩展名视为内容文件，在其中将模板变量替换为足够的值。

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

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

您可以阅读更多关于它的信息here

【讨论】：

【解决方案2】：

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

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

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

正如您所建议的，最好使用 Hugo 将变量写入您的 HTML（或 JSON）中，然后通过 JS 读取它们。如果数量很少，请使用属性或标签。如果有很多并且每页没有差异，请使用单独的 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 属性将是立陶宛语。

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

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

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

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

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

【讨论】：

【解决方案3】：

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

已经在 Hugo 讨论网站上讨论了这方面的改进，但还没有具体的内容。

【讨论】：