如何在 Hugo 中从 node_modules 文件夹包含 JS/CSS

在我们之前的文章中：

• Hugo 主题代码以包含自定义 CSS 文件
• 如何在你的 Hugo 主题中包含自定义 JS

我们展示了如何配置 Hugo 和你的主题以包含自定义 JS/CSS 文件。

一个经常相关的用例（特别是考虑到欧盟 GDPR 法律）是不从 CDN 包含 Javascript 和 CSS，而是从你的站点本地包含它们。

实际上，这意味着我们想从 node_modules 文件夹包含它，而不是例如 jsDelivr。

在此示例中，我们将从 node_modules 文件夹包含 katex 库。它要求你已如之前文章所示配置 Hugo 以接受自定义 CSS 和自定义 Javascript。

它要求你已在 node_modules 文件夹中安装了 katex：

npm install --save katex

Hugo 不支持直接从 node_modules 文件夹包含。推荐的方式是使用模块挂载将相关的 node_modules 子目录挂载到 Hugo 的 assets 文件系统中。

注意： 在 v0.162.0 之前的 Hugo 版本中，将文件从 node_modules 符号链接到 assets 文件夹是常见的变通方法。然而，从 v0.162.0 开始，Hugo 出于安全原因拒绝 resources.Get 中的符号链接条目（CVE-2026-50135），因此模块挂载现在是正确的做法。

将以下内容添加到你的 hugo.yaml 中，将 katex dist 目录挂载到 assets/vendor/katex：

module:
  mounts:
    - source: assets
      target: assets
    - source: static
      target: static
    - source: node_modules/katex/dist
      target: assets/vendor/katex

重要： 当你定义 module.mounts 时，所有默认挂载都会被替换 — 所以你必须如上所示显式重新挂载 assets 和 static。

现在，在你的 hugo.yaml 中，你可以像这样引用挂载的文件：

params:
  custom_css:
    - 'css/techoverflow.css'
    - 'css/kicad.css'
    - 'vendor/katex/katex.min.css' # KaTeX CSS, mounted from node_modules
  custom_js:
    - 'js/kicad.js'
    - 'js/algolia.js'
    - 'vendor/katex/katex.min.js' # KaTeX JS, mounted from node_modules

重要： 这不是关于如何为 Hugo 配置 KaTeX 的文章（这需要更多步骤）！它只是关于如何在 Hugo 中从 node_modules 文件夹包含 JS/CSS。

Hugo 不会自动将资源从 assets 文件夹复制到 public 文件夹，所以你需要确保你的构建过程包含这些文件。这意味着你需要在主题中某处使用 resources.Get 来包含文件。

<link rel="stylesheet" href="{{ (resources.Get "vendor/katex/katex.min.css").RelPermalink }}" />
<script defer src="{{ (resources.Get "vendor/katex/katex.min.js").RelPermalink }}"></script>