如何将页面特定JS/CSS传入Handlebars模板？

当然可以实现，核心思路是在渲染模板时向Handlebars传递包含特定脚本/样式的变量，就像使用{{{body}}}渲染页面主体内容一样。下面是具体步骤：

1. 定义模板结构 #

在你的Handlebars主模板（比如layout.hbs）中，在合适的位置（通常是</body>前或<head>内）添加{{{script}}}占位符，注意用三个大括号避免HTML转义：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>{{title}}</title>
  <!-- 全局样式/脚本 -->
  <link rel="stylesheet" href="assets/css/global.min.css">
</head>
<body>
  {{{body}}}
  
  <!-- 页面特定脚本占位符 -->
  {{{script}}}
</body>
</html>

2. 准备页面X的特定脚本内容 #

把页面X需要的脚本整理成字符串：

const pageXScript = `
  <script src="assets/js/customX.min.js"></script>
  <script>
    // 页面X的自定义逻辑
    console.log('This is page X specific script');
  </script>
`;

3. 渲染模板时传递变量 #

在渲染页面X的代码中，将特定脚本作为script变量传入Handlebars的渲染上下文：

const template = Handlebars.compile(layoutTemplate);
const html = template({
  title: '页面X',
  body: pageXBodyContent, // 页面X的主体内容
  script: pageXScript     // 页面X的特定脚本
});

4. 扩展：处理样式表 #

如果是页面特定样式表，逻辑完全一致：

• 在模板中添加{{{style}}}占位符（比如放在<head>内）
• 准备页面X的样式字符串：

const pageXStyle = `
  <link rel="stylesheet" href="assets/css/customX.min.css">
  <style>
    .page-x-specific { color: #ff0000; }
  </style>
`;

• 渲染时传递style变量即可

补充说明 #

• 必须使用三个大括号({{{script}}})，因为脚本内容包含HTML标签，双括号会自动转义标签，导致脚本无法正常执行。
• 如果你的项目使用了Express+Handlebars这类框架，可以通过res.render直接传递变量：

res.render('pageX', {
  script: pageXScript
});

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