EJS 能否向 Partial 传递数据？如何实现不同页面的动态标题设置？

完全支持向EJS partial传递自定义数据，你可以通过两种常见配置实现不同页面独立修改页头标题的需求，具体步骤如下：

第一步：修改公共partial为动态接收标题参数 #

把原来写死的标题内容替换为带兜底默认值的动态变量，避免漏传参数时页面渲染报错：

<!DOCTYPE html>
<html lang="en">
<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">
    <!-- 配置默认标题，当页面没传对应参数时自动展示兜底内容 -->
    <title><%= pageTitle || '站点默认标题' %></title>
</head>

两种传值实现方式 #

• 方式1：include引入partial时单独传递局部参数
  在各个页面的主模板里引入头部partial时，直接为当前页面传入专属的标题值，参数作用域仅对当前引入的partial生效，不会和其他模板的全局变量产生冲突：

  <!-- 首页模板引入头部，传入首页标题 -->
  <%- include('partials/header', { pageTitle: '网站首页' }) %>
  
  <!-- 关于页模板引入头部，传入关于页标题 -->
  <%- include('partials/header', { pageTitle: '关于我们' }) %>
  

• 方式2：服务端渲染时全局传入页面参数
  在Express等服务端框架调用页面渲染接口时，直接把当前页面对应的标题作为全局渲染参数传入，处于渲染链路中的所有partial都可以直接读取到该变量：

  // 首页路由渲染
  app.get('/', (req, res) => {
    res.render('index', { pageTitle: '网站首页' })
  })
  
  // 关于页路由渲染
  app.get('/about', (req, res) => {
    res.render('about', { pageTitle: '关于我们' })
  })
  

注意：页面标题属于普通文本内容，记得用<%= %>做转义输出，不要用<%- %>直接输出未转义的内容，避免引入XSS安全风险。

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