所有的页面有个公共首尾header.ejs
footer.ejs
每个页面都会加载公共头尾,而根据页面不同还会加载不同的css和js,该怎么做才能优雅做到这种既有公共头尾,又能加载不同的静态文件的效果?
能不能把这些加载静态资源都统一放在同一个配置文件里(见过有人这么做,不过忘了是怎么实现的了),比如叫entry,而不用每个页面都去单独指定加载了什么
谢邀吧。我本人是非常不喜欢ejs
的(太丑了),我只能谈谈做这事的基本思路:
首先因为“页面不同”,那势必在res.render(view [, locals] [, callback])
的locals
对象里有一个专门字段用来表示页面类型的,这个可以理解吧?譬如:{ pageType: 'home' }
。否则所有的渲染都是通过公共的header
、footer
,该如何区分?
其次,就是在header.ejs
或者footer.ejs
里根据新增页面类型的字段来配置静态资源,譬如:
<% if(locals.pageType === 'home') { %>
<link rel="stylesheet" href="xxx/home.css" />
<%} else if (locals.pageType === 'about') { %>
<link rel="stylesheet" href="mmmx/about.css" />
<% } %>
当然ejs
这么写你可能觉得太累,那是不是可以在js
写个映射?当然可以,譬如:
var mapping = {
home: 'xxx/home.css',
about: 'mmmx/about.css'
};
在渲染时直接给locals
对象里注入一个resource
字段,类似:
res.render(view, {
resource: mapping[pageType]
});
这样ejs
就可以改写成:
<link rel="stylesheet" href="<%= locals.resource %>" />