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标签的数量增加时，这种方式很不方便，有没有更简洁的方法呢？

Answer 1

我怀疑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属性将是立陶宛语。

我不担心增加元标记＆＃34;但您可以将变量写入JSON文件，如果您担心HTML膨胀，可以在JS中读取它吗？

我首先将自定义JSON构建为HTML，然后根据this配方为Hugo Lunr搜索构建索引时将其缩小/重命名为JSON。而不是＆＃34;烘烤＆＃34;如上述配方中range的内容，您只需列出所有变量。

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

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

你可以＆＃34;烘烤＆＃34;通过Hugo这种方式包含任何内容（包括Hugo模板变量）的JSON文件。希望它有所帮助。

Answer 2

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

关于雨果讨论网站上这一领域的改进已有一些讨论，但没有具体的内容。

Answer 3

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

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

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

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

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

3 个答案: