将.css文件添加到ejs [英] adding .css file to ejs
问题描述
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 =stylesheettype =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对于您使用的模板语言是不可知的。模板语言可以是一个热门的辩论题目。我要使用Jade。< / p>
< p class ='just'>再次Express对于您用来生成CSS的内容是不可知的 - 您可以使用vanilla CSS，但在这个例子中我使用Stylus。
< / p>
< footer>
在具有express和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;} / *未访问链接* /
a：visited {color：＃0B614B;} / *访问链接* /
a：hover {color：＃B4045F;} / *鼠标悬停在链接上* /
a：active {color：＃0000FF;}
ul {list-style-type：none; margin：0; padding：0; text-align：right; }
li {display：inline; }
< / style>
您的问题实际上不是ejs。 p>
这里需要注意的事情
-
style.css 是一个外部css文件。所以你不需要样式标签里面的文件。它应该只包含css。
-
在您的快速应用程序中，您必须提供从中提供静态文件的公共目录。像css / js / image
可以通过
来完成。 app.use（express.static（__ dirname +'/ public'））;假设你将css文件放在你的应用程序根目录下的公共文件夹中，
现在你必须引用tamplate文件中的css文件，
like
< link href =/ css / style.css =stylesheettype =text / css>
这里我假设你已将css文件放在css文件夹中。
所以文件夹结构是
。
./app.js
./public
/ css
/style.css
im working on node.js(express) with ejs and im not able to include a .css file to it.i tried the same thing seperately as a html-css duo and it worked fine...how can i include the same in my .ejs file. My app.js goes thus:
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);
and the index.ejs file:
<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 file:
<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>
Your problem is not actually specific to ejs.
2 things to note here
style.css is an external css file. So you dont need style tags inside that file. It should only contain the css.
In your express app, you have to mention the public directory from which you are serving the static files. Like css/js/image
it can be done by
app.use(express.static(__dirname + '/public'));
assuming you put the css files in public folder from in your app root. now you have to refer to the css files in your tamplate files, like
<link href="/css/style.css" rel="stylesheet" type="text/css">
Here i assume you have put the css file in css folder inside your public folder.
So folder structure would be
.
./app.js
./public
/css
/style.css
这篇关于将.css文件添加到ejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
