Question

我正在尝试在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）。

Answer 1

不需要连接css路径和变量，也可以按照以下步骤进行操作：

<link rel='stylesheet' href='/stylesheets/<%= yourVariableName %>.css' />

Answer 2

要包含的方法：

<% 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">

Answer 3

我发现通过数组注入自定义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>

使用服务器端的变量将CSS文件添加到ejs模板中

3 个答案: