Node.js中EJS嵌入head模板报错，如何动态设置Meta内容？

我在Node.js服务器中使用EJS作为模板引擎，未嵌入head文件的页面（包含其他EJS嵌入内容）运行正常，但添加嵌入head文件的页面后，出现如下语法错误：

SyntaxError: Unexpected identifier in /home/runner/superstrap/temp/docs/getting-started/introduction/index.html while compiling ejs

If the above error is not helpful, you may want to try EJS-Lint:
https://github.com/RyanZim/EJS-Lint
Or, if you meant to create an async function, pass `async: true` as an option.
at new Function (<anonymous>)
at Template.compile (/home/runner/superstrap/node_modules/ejs/lib/ejs.js:673:12)
at Object.compile (/home/runner/superstrap/node_modules/ejs/lib/ejs.js:398:16)
at handleCache (/home/runner/superstrap/node_modules/ejs/lib/ejs.js:235:18)
at tryHandleCache (/home/runner/superstrap/node_modules/ejs/lib/ejs.js:274:16)
at exports.renderFile [as engine] (/home/runner/superstrap/node_modules/ejs/lib/ejs.js:491:10)
at View.render (/home/runner/superstrap/node_modules/express/lib/view.js:135:8)
at tryRender (/home/runner/superstrap/node_modules/express/lib/application.js:657:10)
at Function.render (/home/runner/superstrap/node_modules/express/lib/application.js:609:3)

相关代码片段 #

head模板代码 #

<title><%= title %></title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<%= description %>">
<meta name="author" content="gtoy1118, muchtek, and superStrap contributors">
<meta name="generator" content="EJS">

<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="1.0">

<link rel="canonical" href="https://getbootstrap.com/docs/5.1/getting-started/introduction/">

<script src="https://gtoy1118.github.io/superstrap/dist/js/superstrap.bundle.min.js"></script>

<!-- Bootstrap core CSS -->
<style class="anchorjs"></style>
<link href="https://cdn.jsdelivr.net/gh/superstrap/superstrap.github.io/dist/css/superstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<link href="/css/site.css" rel="stylesheet">

<!-- Favicons -->
<link rel="apple-touch-icon" href="/assets/logo/logo@180h.png" sizes="180x180">
<link rel="icon" href="/assets/logo/logo@32h.png" sizes="32x32" type="image/png">
<link rel="icon" href="/assets/logo/logo@16h.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/assets/logo/manifest.json" type="image/png">
<link rel="mask-icon" href="/assets/logo/logo@1x.png" color="#7952b3" type="image/png">
<link rel="icon" href="/assets/logo/logo@1x.png" type="image/png">
<meta name="theme-color" content="#7952b3">

<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="https://superstrap.gabrieltoy1.repl.co">
<meta name="twitter:creator" content="muchtek, gtoy118">
<meta name="twitter:title" content="Introduction">
<meta name="twitter:description" content="<%= description %>">
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.1/assets/brand/bootstrap-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://superstrap.gabrieltoy1.repl.co/">
<meta property="og:title" content="Introduction">
<meta property="og:description" content="<%= description %>">
<meta property="og:type" content="article">
<meta property="og:image" content="https://superstrap.gabrieltoy1.repl.co/assets/brand.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="512">
<meta property="og:image:height" content="512">

<script defer="" src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script async="" src="https://www.google-analytics.com/analytics.js"></script>

<script id="_carbonads_projs" type="text/javascript" src="https://srv.carbonads.net/ads/CKYIKKJL.json?segment=placement:getbootstrapcom&amp;callback=_carbonads_go"></script>

调用head模板的页面代码 #

<head>
  <%- include("../../../parts/head", {
    title: Getting Started · superStrap v1.0
  }) %>
</head>

Node.js核心代码 #

index.js

const app = require("express")();
const fetch = require("node-fetch");
const ejs = require("ejs");
const port = 8080;

const projects = require("./projects");
const route = require("./route");

app.engine("html", ejs.renderFile);
app.set('view engine', "html");
app.set('views', __dirname + '/temp');

app.use(route.signIn);

app.use(require("express").static(__dirname + "/public"));

app
  .get("/", (req, res) => {
    res.render("index")
  })
  ;

app
  .get("/docs/getting-started/introduction", (req, res) => {
    res.render("docs/getting-started/introduction/index")
  })
  ;

app.use(route[404])

app.listen(port);

console.log("server started at port " + port);

route.js

module.exports = {
  404: (req, res, next) => res.render("404"),
  signIn: (req, res, next) => {
    if (req.headers["X-Replit-User-Name"]) {
      res.locals.signedIn = false;
    } else {
      res.locals.username = req.headers["X-Replit-User-Name"];
    }
    next();
  }
};

projects.js

module.exports = "no";

问题根源与解决方法 #

1. 字符串未加引号导致语法错误 #

调用head模板时，title的值Getting Started · superStrap v1.0是字符串，但没有用引号包裹，EJS会将其解析为标识符（变量名），从而触发Unexpected identifier错误。

2. 缺少description变量 #

head模板中使用了<%= description %>，但调用时未传递该变量，后续会引发变量未定义的错误。

修改后的调用代码 #

<head>
  <%- include("../../../parts/head", {
    title: "Getting Started · superStrap v1.0",
    description: "这里替换为实际的页面描述内容"
  }) %>
</head>

额外检查 #

• 确认head模板的路径../../../parts/head正确，确保EJS能找到该文件。
• 若仍有问题，可使用EJS-Lint工具检查模板语法是否存在其他问题。

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