将.css文件添加到ejs

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在使用ejs在node.js（express）上工作，并且无法在其中包含.css文件。我分别尝试了与html-

css二重奏相同的事情，并且效果很好…我如何在其中包含相同的内容我的.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>

回答：

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

这里要注意的两件事

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

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

这可以通过

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

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

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

在这里，我假设您已将css文件放在公用文件夹内的css文件夹中。

所以文件夹结构是

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

以上是 将.css文件添加到ejs 的全部内容， 来源链接： utcz.com/qa/423745.html

回到顶部