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 回答