Hugo如何在JS文件中访问模板变量并正确应用baseUrl配置

你添加的[mediaTypes."application/javascript"]配置仅完成了JS文件的媒体类型声明，Hugo默认对存放在static目录下的静态JS文件是原封不动直接输出的，不会解析文件内的代码内容，自然无法自动拼接baseURL，也读不到Hugo的模板变量。

下面是可直接落地的方案，按需选择即可：

• 方案1：将JS作为模板资源解析（最灵活，支持所有Hugo模板语法）
  1. 把需要用到模板变量、处理路径的JS文件从static/js/移动到assets/js/目录下，Hugo会将assets目录下的文件识别为可处理的资源对象
  2. 在HTML模板中引入JS时，不要直接写静态路径，改用Hugo资源管道触发模板解析：

  {{ $customJs := resources.Get "js/your-custom.js" | resources.ExecuteAsTemplate "js/your-custom.built.js" . }}
  <script src="{{ $customJs.RelPermalink }}"></script>
  

  3. 之后就可以直接在JS文件内使用Hugo模板语法，路径处理逻辑和HTML模板完全一致，会自动拼接你配置的子路径baseURL：

  // 原写法 img.src = "/images/image.png" 替换为
  img.src = "{{ "/images/image.png" | relURL }}";
  // 也可以直接读取其他模板变量，比如站点标题、自定义配置参数等
  console.log("当前站点根地址：", "{{ $.Site.BaseURL }}");
  

• 方案2：全局预注入baseURL变量（改动最小，适配存量JS代码）
  1. 在HTML模板的<head>区域，所有自定义JS引入标签之前，提前挂载全局站点变量：

  <script>
    // 提前处理末尾斜杠，避免路径出现双斜杠问题
    window.SITE_BASE = "{{ $.Site.BaseURL }}".replace(/\/$/, "") + "/";
  </script>
  

  2. 原有JS文件不需要移动、不需要修改Hugo媒体类型配置，写路径时前面拼接全局变量即可：

  img.src = `${window.SITE_BASE}images/image.png`;
  

• 注意事项
  • 如果JS代码本身用到{{、}}字符（比如对接某些前端模板库的语法），要做转义处理，避免被Hugo模板引擎识别为模板语法触发渲染报错
  • 用relURL/absURL管道处理路径比直接拼接BaseURL更稳妥，会自动处理多斜杠、子路径层级匹配的问题

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