首页 > 怎样在nodejs渲染模板时,根据页面的不同动态加载静态资源?

怎样在nodejs渲染模板时,根据页面的不同动态加载静态资源?

所有的页面有个公共首尾header.ejs footer.ejs
每个页面都会加载公共头尾,而根据页面不同还会加载不同的css和js,该怎么做才能优雅做到这种既有公共头尾,又能加载不同的静态文件的效果?
能不能把这些加载静态资源都统一放在同一个配置文件里(见过有人这么做,不过忘了是怎么实现的了),比如叫entry,而不用每个页面都去单独指定加载了什么


谢邀吧。我本人是非常不喜欢ejs的(太丑了),我只能谈谈做这事的基本思路:

首先因为“页面不同”,那势必在res.render(view [, locals] [, callback])locals对象里有一个专门字段用来表示页面类型的,这个可以理解吧?譬如:{ pageType: 'home' }。否则所有的渲染都是通过公共的headerfooter,该如何区分?

其次,就是在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 %>" />
【热门文章】
【热门文章】