use*_*r-S 17 css ejs node.js express
我正在使用ejs在node.js(express)上工作,并且我无法将.css文件包含在it.i中尝试了与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>
<% } %>
</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>
mit*_*esh 91
您的问题实际上并不特定于ejs.
这里要注意2件事
style.css是一个外部css文件.所以你不需要该文件中的样式标签.它应该只包含css.
在您的快速应用程序中,您必须提到您从中提供静态文件的公共目录.像css/js/image
它可以通过
app.use(express.static(__dirname + '/public'));
假设您将css文件放在应用程序根目录中的公用文件夹中.现在你必须引用你的tamplate文件中的css文件,比如
<link href="/css/style.css" rel="stylesheet" type="text/css">
在这里,我假设您已将css文件放在公共文件夹中的css文件夹中.
所以文件夹结构会是
.
./app.js
./public
/css
/style.css
Kea*_*ral 10
为了在 express 应用程序中提供静态 CSS 文件（即使用 css 样式文件在 express 应用程序中设置 ejs“模板”文件的样式）。以下是需要进行的简单 3 个步骤：
将名为“styles.css”的 css 文件放在名为“assets”的文件夹中，将 assets 文件夹放在名为“public”的文件夹中。因此css文件的相对路径应该是“/public/assets/styles.css”
在每个 ejs 文件的头部，您只需使用 a 调用 css 文件（就像您在常规 html 文件中所做的那样），<link href=… />如下面的代码所示。确保将下面的代码直接复制并粘贴到 ejs 文件<head>部分
<link href= "/public/assets/styles.css" rel="stylesheet" type="text/css" />
在您的 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'));
遵循这些简单的 3 个步骤后，每次您res.render('ejsfile')在app.get()方法中都会自动看到正在调用的 css 样式。您可以通过在浏览器中访问您的路线来进行测试。
小智 7
你可以用它
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 和express.js
首先，有一个更好的方法来添加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