hugo - 如何在JavaScript文件中访问Hugo的模板变量？

我正在尝试在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标签数量增加时，这种方式不方便，是否有更简洁的方法？

最佳答案

我怀疑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文件。希望能帮助到你。

关于hugo - 如何在JavaScript文件中访问Hugo的模板变量？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32456420/