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

问题描述 投票:0回答:3

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

node.js ejs
3个回答
2
投票

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

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

0
投票

包含方法:

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


0
投票

我发现通过数组注入自定义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>
© www.soinside.com 2019 - 2024. All rights reserved.