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