gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 06:36:26 25 4
gpt4 key购买 nike

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

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

提前致谢。

更新:

目前我的解决方法是使用 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();

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

最佳答案

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

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

问题变成了,如何将 Hugo 变量传输到您网站的某些文件中。

正如你所建议的 ,最好使用 Hugo 将变量写入您的 HTML(或 JSON),然后通过 JS 读取它们。如果数量很少,请使用属性或标签。如果有很多并且每页没有不同,请使用单独的 JSON 文件。

例如,我个人有一个多语言站点,它 a) 需要通过 JS 动态显示不同的语言标题; b) 使用 JS 查询不同 Lunr.js以 JSON 格式搜索索引。

对于两者,我都使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com