如何使用Partial将JS代码插入Express Handlebars模板？

1. 确认Express Handlebars基础配置 #

首先确保你的Express项目已正确配置Express Handlebars，指定好布局目录与默认布局：

const express = require('express');
const exphbs = require('express-handlebars');
const app = express();

// 配置Handlebars引擎
app.engine('handlebars', exphbs({
  defaultLayout: 'main', // 默认使用main.handlebars作为布局模板
  layoutsDir: './views/layouts' // 布局文件所在目录
}));
app.set('view engine', 'handlebars');
app.set('views', './views'); // 视图文件根目录

2. 主模板中保留未转义的变量位 #

确保views/layouts/main.handlebars中的{{{js}}}使用三重花括号（Handlebars中三重花括号会关闭HTML转义，让JS代码直接生效），建议将其放在</body>标签前：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Application</title>
</head>
<body>
  {{{body}}} <!-- 首页内容会渲染到这个位置 -->
  {{{js}}} <!-- 动态插入JS的目标位置 -->
</body>
</html>

3. 路由渲染时传递JS变量 #

在根路径的路由中，渲染home.handlebars时通过第二个参数传入js变量，值即为你要插入的脚本代码：

app.get('/', (req, res) => {
  res.render('home', {
    js: '<script>alert("Hello");</script>'
  });
});

关键说明 #

• 必须用三重花括号{{{js}}}：如果使用普通双花括号{{js}}，Handlebars会自动转义HTML特殊字符（比如将<转为<），导致脚本无法正常执行。
• 安全提示：如果js变量的内容来自用户输入，一定要做XSS防护；若是你自己控制的固定脚本，直接传递即可。

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