如何为layout.ejs添加动态内容默认功能 无view-layout.js的实现方案

你可以根据项目架构选择以下任意一种方案实现：

• 方案1：通过页面view文件透传layout数据
  直接在每个view-xxx.js中新增layout相关的配置字段，layout.ejs可以直接读取该字段渲染动态内容。如果要统一默认值，可以在渲染逻辑中添加兜底判断，比如<%= layout.pageTitle || '默认站点标题' %>。
• 方案2：新增全局中间件注入默认layout数据
  如果你用的是Express/Koa这类服务端框架，可以直接添加全局路由中间件，在所有页面渲染前注入默认的layout动态数据，页面级配置可以覆盖全局默认值。Express示例代码如下：

  // 全局中间件，所有请求都会先执行该逻辑
  app.use((req, res, next) => {
    // 注入layout默认数据，存到res.locals可以直接在模板中读取
    res.locals.layout = {
      siteName: '站点官方名称',
      showFooter: true,
      loginUser: req.session.user || null,
      navActive: 'home'
    }
    next()
  })
  

  配置完成后可以直接在layout.ejs中使用<%= layout.siteName %>这类语法渲染动态内容，如果单个页面需要修改默认值，直接在对应view-pagename.js中给layout对应属性赋值即可。
• 方案3：新增view-layout.js统一管理默认配置
  你可以自行创建view-layout.js文件存放全局layout默认配置，然后在服务端渲染的入口逻辑中合并配置，页面级配置优先级高于全局默认配置，示例逻辑如下：

  // 服务端渲染逻辑
  // 加载全局layout默认配置
  const defaultLayoutConfig = require('./view-layout.js')
  // 加载当前页面的配置
  const pageConfig = require(`./view-${pageName}.js`)
  // 合并配置，相同属性页面配置会覆盖全局配置
  const renderData = { ...defaultLayoutConfig, ...pageConfig }
  // 渲染页面
  res.render(pageName, renderData)
  

  之后所有layout需要的全局动态配置都可以存到view-layout.js中，不需要再每个页面重复写相同配置。

内容的提问来源于stack exchange，提问作者Clément