将.css文件添加到ejs
[英]adding .css file to ejs
问题描述
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.
我正在使用 ejs 处理 node.js(express)，但我无法向其中包含 a.css 文件。我分别尝试了与 html-css duo 相同的操作，但效果很好……我如何将相同的内容包含在我的.ejs 文件。 My app.js goes thus:我的 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);
and the index.ejs file:和 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 file:样式.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>
6 个解决方案
解决方案1
142 已采纳 2013-09-05 10:25:33
Your problem is not actually specific to ejs.您的问题实际上并非特定于 ejs。
2 things to note here这里需要注意2件事
style.css is an external css file.
style.css是一个外部 css 文件。 So you dont need style tags inside that file.所以你不需要该文件中的样式标签。 It should only contain the css.它应该只包含 css。In your express app, you have to mention the public directory from which you are serving the static files.
在您的 Express 应用程序中，您必须提及提供静态文件的公共目录。 Like css/js/image像 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.假设您将 css 文件放在应用程序根目录中的公共文件夹中。 now you have to refer to the css files in your tamplate files, like现在你必须在你的模板文件中引用 css 文件，比如
<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.在这里，我假设您已将 css 文件放在公共文件夹内的 css 文件夹中。
So folder structure would be所以文件夹结构将是
.
./app.js
./public
/css
/style.css
解决方案2
10 2017-10-07 10:54:58
You can use this你可以用这个
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
});
});
put this on template把这个放在模板上
<%- myCss.style %>
just build style.css只需构建 style.css
<style>
body {
background-color: #D8D8D8;
color: #444;
}
</style>
I try this for some custom css.我为一些自定义 css 尝试了这个。 It works for me这个对我有用
解决方案3
10 2018-08-13 23:47:32
In order to serve up a static CSS file in express app (ie use a css style file to style ejs "templates" files in express app).为了在 express 应用程序中提供静态 CSS 文件（即使用 css 样式文件在 express 应用程序中设置 ejs“模板”文件的样式）。 Here are the simple 3 steps that need to happen:以下是需要进行的简单 3 个步骤：
Place your css file called "styles.css" in a folder called "assets" and the assets folder in a folder called "public".
将名为“styles.css”的 css 文件放在名为“assets”的文件夹中，将 assets 文件夹放在名为“public”的文件夹中。 Thus the relative path to the css file should be "/public/assets/styles.css"因此css文件的相对路径应该是“/public/assets/styles.css”In the head of each of your ejs files you would simply call the css file (like you do in a regular html file) with a
<link href=… />as shown in the code below.在每个 ejs 文件的头部，您只需使用<link href=… />调用 css 文件（就像您在常规 html 文件中所做的那样），如下面的代码所示。 Make sure you copy and paste the code below directly into your ejs file<head>section确保将下面的代码直接复制并粘贴到 ejs 文件的<head>部分<link href= "/public/assets/styles.css" rel="stylesheet" type="text/css" />In your server.js file, you need to use the
app.use()middleware.在您的 server.js 文件中，您需要使用app.use()中间件。 Note that a middleware is nothing but a term that refers to those operations or code that is run between the request and the response operations.请注意，中间件只不过是一个术语，指的是在请求和响应操作之间运行的那些操作或代码。 By putting a method in middleware, that method will automatically be called everytime between the request and response methods.通过在中间件中放置一个方法，该方法将在每次请求和响应方法之间自动调用。 To serve up static files (such as a css file) in the app.use()middleware there is already a function/method provided by express calledexpress.static().为了在app.use()中间件中提供静态文件（例如 css 文件），app.use()已经提供了一个名为express.static()的函数/方法。 Lastly, you also need to specify a request route that the program will respond to and serve up the files from the static folder everytime the middleware is called.最后，您还需要指定程序将在每次调用中间件时响应并提供静态文件夹中的文件的请求路由。 Since you will be placing the css files in your public folder.因为您将把 css 文件放在您的公共文件夹中。 In the server.js file, make sure you have the following code:在 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'));
After following these simple 3 steps, every time you res.render('ejsfile') in your app.get() methods you will automatically see the css styling being called.遵循这些简单的 3 个步骤后，每次在app.get()方法中执行res.render('ejsfile') ，您都会自动看到正在调用的 css 样式。 You can test by accessing your routes in the browser.您可以通过在浏览器中访问您的路线来进行测试。
解决方案4
0 2021-06-04 04:41:00
I tried a different approach.我尝试了不同的方法。 I created an ejs file for my styles called styles.ejs and added all the css inside the tags like this.我为我的样式创建了一个名为styles.ejs的 ejs 文件，并将所有 css 添加到这样的标签中。
<style>
body {
font-family: Tahoma, Geneva, Verdana, sans-serif;
}
#container {
margin: 0 10%;
padding: 20px;
border: 10px solid #c8102e;
}
</style>
and I have includes this file inside head tag of my index.ejs like this.我在 index.ejs 的head标签中包含了这个文件，就像这样。
<head>
<%- include('./css/styles'); %>
</head>
It worked well for me.它对我来说效果很好。
解决方案5
0 2021-08-06 18:58:52
As I see you are using EJS with express.js正如我所看到的，您正在将 EJS 与 express.js 一起使用
Firstly, there is a better way to add EJS
首先，有一个更好的方法来添加EJSapp.set("view engine", "ejs");and for that, your file structure should be like
为此，您的文件结构应该像. ./app.js ./view /index.ejsAnd for adding CSS to your EJS file, you have to use "public" folder (or any other name, name doesn't matter) from which you can serve static file like CSS, JS or images
并且要将 CSS 添加到您的 EJS 文件，您必须使用“public”文件夹（或任何其他名称，名称无关紧要），您可以从中提供静态文件，如 CSS、JS 或图像For accessing that, you can use
要访问它，您可以使用app.use(express.static("public")); //better and newer way than first answerand is your EJS file, you can link your CSS by
并且是您的 EJS 文件，您可以通过以下方式链接您的 CSS<link rel="stylesheet" href="css/style.css">Here I am assuming that, you put your CSS file in your CSS folder inside public folder
在这里，我假设您将 CSS 文件放在公共文件夹内的 CSS 文件夹中So, your file structure will be like
所以，你的文件结构会像. ./app.js ./public /css /style.css ./view /index.ejs
解决方案6
-2 2017-07-20 13:34:54
app.use(express.static(__dirname + '/public'));
<link href="/css/style.css" rel="stylesheet" type="text/css">
So folder structure should be:所以文件夹结构应该是：
.
./app.js
./public
/css
/style.css
解决方案7
-2 2023-01-29 23:38:58
Well, @Deepdarshan your method of setting your view engine is newer but I experimented and it doesn't work with ejs, maybe other view engines tho!好吧，@Deepdarshan，您设置视图引擎的方法较新，但我进行了试验，它不适用于 ejs，也许还有其他视图引擎！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.