我正在尝试在ejs模板中动态添加css文件。
我知道如何包含ejs文件,但没有获得如何动态添加css文件的方法。
代码:-
Index.js
router.get('/', function(req, res, next) {
res.render('template', { title: 'abc',page:'index',cssa:'home'});
});
template.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
<!-- Here I want to add home.css file -->
</head>
<body>
<!-- including my ejs file -->
<%- include(page) %>
</body>
</html>
我尝试过:
<link rel="stylesheet" type="text/css" href="/stylesheets/\<%= cssa %>\" >
<% include %><%= cssa %><% .css %>
目标:
在样式表源中传递服务器端接收到的变量(cssa)。
不需要连接css路径和变量,也可以按照以下步骤进行操作:
<link rel='stylesheet' href='/stylesheets/<%= yourVariableName %>.css' />
包含方法:
<% var css_link = '/stylesheets/' + cssa + '.css'; %>
<link rel="stylesheet" type="text/css" href="<%= css_link %>" >
贷方转到@SpiRT
或者:
<link rel="stylesheet" type="text/css" href="/stylesheets/<%=cssa%>.css">
我发现通过数组注入自定义css脚本最方便,然后可以在ejs模板中对其进行处理。
此方法将允许您呈现额外需要的任意数量的CSS文件(例如,您的网站在所有页面上使用1个标准CSS,但有1或2个页面特定的CSS,然后可以将其包含在传递的模型中通过ejs渲染器到该特定页面/路由)。在示例中,假设css文件位于同一文件夹中,但是可以根据每个人的喜好进行更改:
路由器端:
router.get( ... {
model = {};
model.Stylesheets = [];
model.Stylesheets.push("stylefile");
res.render("view",{model:model});
});
将自定义样式表推入视图,然后ejs文件可以像这样:
<%
var customStylesheets = "";
model.Stylesheets.forEach(function(style){
customStylesheets+='<link type="text/css" rel="stylesheet" href="css/'+style+'.css">';
})
%>
<!DOCTYPE html>
<html>
<head>
<title><%= model.title %></title>
<link type="text/css" rel="stylesheet" href="css/standard.css">
<%- customStylesheets %>
...
</head>