6

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

我的问题是如何在 javascript 中访问它们。还是有解决方法?

提前致谢。

更新:</p>

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();

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

4

3 回答 3

5

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


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

问题变成了,如何将 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,然后在根据此配方为 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 文件。希望能帮助到你。

于 2016-06-03T15:23:46.590 回答
1

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

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

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

你可以在这里阅读更多关于它的信息

于 2017-10-16T09:10:45.867 回答
0

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

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

于 2015-10-20T07:59:42.760 回答