如何在Hugo网站中为短代码插入动态当前日期

你的写法跑不通是两个核心逻辑问题：

1. 执行时机完全不匹配：Hugo短代码是在你本地/服务器构建站点的时候就渲染成静态HTML了，而你写的date短代码靠JS输出日期，要等用户打开页面、浏览器跑到这段脚本的时候才会执行，构建阶段JS根本不会跑，自然不可能把日期拼到iframe的src属性里。
2. 语法本身不支持：Hugo不支持在短代码模板的HTML属性位置，直接嵌套{{< 短代码名 >}}调用另一个短代码。模板解析的时候只会识别Go模板的标准语法，你写在属性值里的短代码标签会被当成普通字符串原样输出，根本不会执行。

Hugo本身内置了时间处理函数，完全不需要写JS取日期，直接改charts短代码模板就行，改动量最小：

1. 先调整你调用charts短代码的写法，把URL里写死的日期段删掉，只传基础地址：

{{< charts "https://unnamed.website/dontguess/performance_chart_viewer.aspx?environment=DEV" >}}

2. 把charts短代码的模板改成如下内容，构建时会自动拼接构建当日的日期：

{{ $basePath := .Get 0 }}
{{ $currentDate := now.Format "2006-01-02" }}
{{ $fullSrc := printf "%s&date=%s&type=Daily_CPU" $basePath $currentDate }}
<iframe src="{{ $fullSrc }}" width="1080" height="800" frameborder="0"></iframe>

注意：Hugo时间格式化必须用固定参考时间2006-01-02当占位符，不要写成yyyy-mm-dd这类其他语言的格式写法，否则日期会显示错误。

这个方案生成的是纯静态HTML，不需要客户端执行任何额外脚本，iframe加载速度最快，兼容性最好。

如果你需要的是用户打开页面当天的日期（比如站点构建后隔了几天才有人访问，要匹配访问当日的数据，而不是构建当日的数据），就用客户端JS动态给iframe赋值src，修改charts短代码模板即可：

{{ $basePath := .Get 0 }}
<iframe class="performance-chart" width="1080" height="800" frameborder="0"></iframe>
<script>
const today = new Date();
const dd = String(today.getDate()).padStart(2, '0');
const mm = String(today.getMonth() + 1).padStart(2, '0');
const yyyy = today.getFullYear();
const dateStr = `${yyyy}-${mm}-${dd}`;
document.querySelector('.performance-chart').src = "{{ $basePath }}&date=" + dateStr + "&type=Daily_CPU";
</script>

内容的提问来源于stack exchange，提问作者ethos101