Node.js中使用Handlebars模板如何单独注入head与body内容

下面两种方案覆盖不同使用场景，可按需选择：

方法一：自定义块级助手实现多插槽（原生通用方案） #

这是Handlebars官方推荐的多插槽实现方式，兼容所有基于Handlebars的上层框架，支持任意位置、任意数量的自定义插槽。

1. 首先在Node.js服务端的Handlebars初始化代码中注册两个助手函数：

// 注册contentFor助手：子页面用它声明要插入指定插槽的内容
Handlebars.registerHelper('contentFor', function (name, options) {
  if (!this._contentBlocks) this._contentBlocks = {}
  this._contentBlocks[name] = options.fn(this)
  return null
})

// 注册block助手：布局模板用它声明插槽位置
Handlebars.registerHelper('block', function (name) {
  return this._contentBlocks?.[name] || ''
})

2. 修改你的布局模板，在head区域新增插槽：

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/nome.css">
    <!-- head专属插槽，子页面的自定义head内容会渲染到这里 -->
    {{{block "head"}}}
    <title>Documen</title>
</head>
<body>
    {{{body}}}
</body>
</html>

3. 修改页面内容代码，把需要放到head的内容用contentFor包裹即可：

{{#contentFor "head"}}
<!-- 这里的内容都会插入到布局的head插槽中 -->
<link rel="stylesheet" href="/css/index.css">
{{/contentFor}}

<h1> test</h1>

方法二：路由传参实现（简单场景适用） #

如果自定义head内容结构简单、不需要复杂HTML，直接通过渲染参数传递更省事：

1. 修改布局模板预留变量位：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/nome.css">
    <!-- 渲染页面自定义样式 -->
    {{#each customCss}}
    <link rel="stylesheet" href="{{this}}">
    {{/each}}
    <!-- 渲染页面自定义标题 -->
    <title>{{pageTitle}}</title>
</head>

2. 在对应页面的路由中传递参数即可：

// 示例：首页路由
app.get('/', (req, res) => {
  res.render('index', {
    pageTitle: '首页',
    customCss: ['/css/index.css']
  })
})

注意：如果传递的内容包含HTML标签，需要使用三个大括号{{{变量名}}}渲染，避免Handlebars自动转义特殊字符。

内容的提问来源于stack exchange，提问作者kaynan felipe rodrigues vieira