如何在你的 Hugo 主题中包含自定义 JS

你可以在你的 Hugo 主题中使用以下代码来包含一系列自定义 Javascript 文件。这与包含自定义 CSS 类似，参见如何包含自定义 CSS 文件。

你需要在 HTML <body> 的某处包含它。根据情况，在顶部、<style> 标签之后包含它，但我建议在 <body> 的末尾（即 </body> 之前）包含它，以确保页面在脚本执行前完全加载（这将改善页面加载时间）。

在我的主题 tailbliss 中，它可以添加到 themes/tailbliss/layouts/partials/footer.html 的末尾：

include_custom_js_footer.html

<!-- Custom JS code-->
{{ range $customJS := .Site.Params.custom_js }}
{{ $built := resources.Get $customJS | js.Build }}
<script type="text/javascript" src="{{ $built.RelPermalink }}" defer></script>
{{ end }}

<!-- Custom JS code-->
{{ range $customJS := .Site.Params.custom_js }}
{{ $built := resources.Get $customJS | js.Build }}
<script type="text/javascript" src="{{ $built.RelPermalink }}" defer></script>
{{ end }}

现在你可以在 hugo.yaml 中配置自定义 JS 文件列表：

hugo_params_js.yml

params:
  custom_css:
    - 'js/myscript.js'

params:
  custom_css:
    - 'js/myscript.js'

将文件放在例如 assets/js/myscripts.js。hugo 配置文件中的路径相对于 assets 目录。

Check out similar posts by category: Hugo

If this post helped you, please consider buying me a coffee or donating via PayPal to support research & publishing of new posts on TechOverflow

Buy me a coffee