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

发布于 2022-09-03 00:57:00 字数 251 浏览 22 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

旧人哭 2022-09-10 00:57:00

谢邀吧。我本人是非常不喜欢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 %>" />
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文