如何使用EJS将视图专属脚本放入布局的head标签中

核心思路 #

利用EJS的模板变量+布局占位机制，在布局文件的head中预留位置，然后在视图里把脚本内容传给这个占位，就能实现仅当前视图加载时才把脚本插入head。

具体步骤 #

1. 修改布局文件（boilerplate.ejs） #

在head标签内添加变量占位，用来接收视图传递的脚本：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
  <!-- 预留脚本占位 -->
  <%- pageScript %>
</head>
<body>
  <!-- 页面主体内容占位 -->
  <%- body %>
</body>
</html>

2. 修改当前视图文件 #

去掉直接写的script标签，改用EJS变量赋值，把脚本内容传给布局的pageScript变量：

<%- layout('/layout/boilerplate.ejs') %>
<% 
  pageScript = `
    <script>
      // 这里写你要放到head里的脚本逻辑
      console.log('这个脚本只在当前视图加载时才会插入head');
    </script>
  `;
%>

原理说明 #

• 布局里的<%- pageScript %>会直接渲染变量里的HTML内容，不会转义，脚本能正常生效。
• 只有当前视图被加载时，pageScript变量才会被赋值，其他路由下该变量为空，不会加载多余脚本，完全匹配你的需求。

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