将.css文件添加到ejs

问题描述 投票：0回答：6

我正在使用 ejs 处理 Node.js(express)，但我无法在其中包含 .css 文件。我单独尝试了与 html-css duo 相同的操作，并且效果很好...我怎样才能包含相同的内容在我的 .ejs 文件中。我的 app.js 是这样的：

var express = require('express');
var app = express();

app.set('views', __dirname + '/views');


app.get('/', function(req, res){
  res.render('index.ejs', {
        title: 'My Site',
    nav: ['Home','About','Contact'] 
  });
});

app.get('/home', function(req, res){
  res.render('index.ejs', {
        title: 'My Site',
    nav: ['Home','About','Contact'] 
  });
});

app.get('/about', function(req, res){
  res.render('about.ejs', {
    title: 'About',
     nav: ['Home','About','Contact']
  });
});

app.get('/contact', function(req, res){
  res.render('contact.ejs', {
    title: 'Contact',
     nav: ['Home','About','Contact']
  });
});


app.listen(3000);

和index.ejs文件：

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">

</head>
<body>
<div>
    <h1> <%= title %> </h1>
    <ul>
<% for (var i=0; i<nav.length;i++) {%>

<li><a href="/<%=nav[i]%>"> <%=nav[i]%> </a></li>
   &nbsp;  
<% } %>
   </ul>
</div>

<br>
<h3>Node.js</h3>
<p class='just'>Express is agnostic as to which templating language you use. Templating languages can be a hot topic of debate.Here Iam going to use Jade.</p>
<p class ='just'>Again Express is agnostic to what you use to generate your CSS-you can use vanilla CSS but for this example I'm using Stylus.
</p>
<footer>
Running on node with express and ejs
</footer>
</home>
</html>

style.css 文件：

<style type="text/css">
body { background-color: #D8D8D8;color: #444;}
h1 {font-weight: bold;text-align: center;}
header { padding: 50px 10px; color: #fff; font-size :15px; text-align:right;}
 p { margin-bottom :20px;  margin-left: 20px;}
 footer {text-decoration: overline; margin-top: 300px}
 div { width:100%; background:#99CC00;position:static; top:0;left:0;}
 .just
 {
    text-align: center; 

 }
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#0B614B;} /* visited link */
a:hover {color:#B4045F;}   /* mouse over link */
a:active {color:#0000FF;}

  ul { list-style-type:none; margin:0; padding:0;text-align: right; }
li { display:inline; }
</style>
css node.js express ejs
6个回答
182
投票

您的问题实际上并不特定于 ejs。

这里有2点需要注意

  1. style.css是一个外部CSS文件。因此，您不需要该文件中的样式标签。它应该只包含 css。

  2. 在您的 Express 应用程序中，您必须提及从中提供静态文件的公共目录。比如css/js/image

可以通过以下方式完成

app.use(express.static(__dirname + '/public'));

假设您将 css 文件放入应用程序根目录中的 public 文件夹中。 现在您必须引用模板文件中的 css 文件， 喜欢

<link href="/css/style.css" rel="stylesheet" type="text/css">

这里我假设您已将 css 文件放入 public 文件夹内的 css 文件夹中。

所以文件夹结构是

.
./app.js
./public
    /css
        /style.css
17
投票

为了在express应用程序中提供静态CSS文件（即使用css样式文件在express应用程序中设置ejs“模板”文件的样式）。以下是需要执行的简单 3 个步骤：

  1. 将名为“styles.css”的 css 文件放置在名为“assets”的文件夹中，并将 asset 文件夹放置在名为“public”的文件夹中。因此css文件的相对路径应该是“/public/assets/styles.css”

  2. 在每个 ejs 文件的头部，您只需使用 

    <link href=… />
    调用 css 文件（就像在常规 html 文件中所做的那样），如下面的代码所示。确保将下面的代码直接复制并粘贴到您的 ejs 文件
    <head>
    部分

    <link href= "/public/assets/styles.css" rel="stylesheet" type="text/css" />

  3. 在 server.js 文件中，您需要使用 

    app.use()
    中间件。请注意，中间件只不过是一个术语，指的是在请求和响应操作之间运行的那些操作或代码。通过将方法放入中间件中，该方法将在请求和响应方法之间“每次”自动调用。为了在 app.use() 中间件中提供静态文件（例如 css 文件），express 已经提供了一个名为 
    express.static()
    的函数/方法。最后，您还需要指定程序将响应的请求路由，并在
    每次
    调用中间件时提供静态文件夹中的文件。因为您将把 css 文件放在您的公共文件夹中。在 server.js 文件中，确保有以下代码： // using app.use to serve up static CSS files in public/assets/ folder when /public link is called in ejs files // app.use("/route", express.static("foldername")); app.use('/public', express.static('public')); 

    


    4. 遵循这三个简单的步骤后，每次您在 
res.render('ejsfile')
 方法中 
app.get()
 时，您都会自动看到正在调用的 CSS 样式。您可以通过在浏览器中访问您的路线来进行测试。
    





      

      
      
      

      

        

          

            

              
14
投票

              
            

          

        

        



     var fs = require('fs');
     var myCss = {
         style : fs.readFileSync('./style.css','utf8');
     };

     app.get('/', function(req, res){
       res.render('index.ejs', {
       title: 'My Site',
       myCss: myCss
      });
     });




将其放在模板上



   <%- myCss.style %>




只需构建 style.css 



  <style>
    body { 
     background-color: #D8D8D8;
     color: #444;
   }
  </style>




我尝试使用一些自定义CSS。对我有用

    





      

      
      
      

      

        

          

            

              
5
投票

              
            

          

        

        




    首先，有一个更好的方法来添加EJS
  • 

     app.set("view engine", "ejs");

    

    为此，你的文件结构应该是这样的
    

     .
 ./app.js
 ./view
     /index.ejs

    

    • 要将 CSS 添加到 EJS 文件中，您必须使用“public”文件夹（或任何其他名称，名称无关紧要），您可以从中提供 CSS、JS 或图像等静态文件
  • 

    要访问它，您可以使用
    

     app.use(express.static("public"));  //better and newer way than first answer

    

    是你的EJS文件，你可以通过
    链接你的CSS

     <link rel="stylesheet" href="css/style.css">

    

    这里我假设，您将 CSS 文件放在 public 文件夹内的 CSS 文件夹中
    

    所以，你的文件结构将是这样的
    

     .
 ./app.js
 ./public
     /css
         /style.css
 ./view
     /index.ejs

    

    
    
    • 




      

      
      
      

      

        

          

            

              
3
投票

              
            

          

        

        
styles.ejs 的 ejs 文件，并在标签内添加了所有 css，如下所示。
<style>
    body {
      font-family: Tahoma, Geneva, Verdana, sans-serif;
    }

    #container {
      margin: 0 10%;
      padding: 20px;
      border: 10px solid #c8102e;
    }
</style>



我已经将此文件包含在我的index.ejs的
head
标签中，如下所示。
<head>
   <%- include('./css/styles'); %>
</head>



它对我来说效果很好。

    





      

      
      
      

      

        

          

            

              
-2
投票

              
            

          

        

        


app.use(express.static(__dirname + '/public'));




在根文件夹中创建一个名为 public 的文件夹，然后在 public 文件夹中添加样式文件。然后更改链接 css 代码，如下所示。


<link href="/css/style.css" rel="stylesheet" type="text/css">



所以文件夹结构应该是：


.
./app.js
./public
   /style.css


    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.