将 .css 文件添加到 ejs
Posted
技术标签:
【中文标题】将 .css 文件添加到 ejs【英文标题】：adding .css file to ejs 【发布时间】：2013-09-08 20:59:36 【问题描述】：我正在使用 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>
<% %>
</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 文件中使用样式标签，您可能需要使用 express 创建为您的 css 和其他资产提供服务的路由。 【参考方案1】：我看到你正在使用 EJS 和 express.js
首先，有一个更好的添加EJS的方法
app.set("view engine", "ejs");
为此，您的文件结构应该是这样的
.
./app.js
./view
/index.ejs
为了将 CSS 添加到您的 EJS 文件，您必须使用“公共”文件夹（或任何其他名称，名称无关紧要），您可以从中提供静态文件，如 CSS、JS 或图像
要访问它，您可以使用
app.use(express.static("public")); //better and newer way than first answer
并且是您的 EJS 文件，您可以通过
链接您的 CSS <link rel="stylesheet" href="css/style.css">
这里我假设您将 CSS 文件放在公共文件夹内的 CSS 文件夹中
所以，你的文件结构会是这样的
.
./app.js
./public
/css
/style.css
./view
/index.ejs
【讨论】：
【参考方案2】：我尝试了不同的方法。我为我的样式创建了一个名为 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>
对我来说效果很好。
【讨论】：
【参考方案3】：app.use(express.static(__dirname + '/public'));
<link href="/css/style.css" rel="stylesheet" type="text/css">
所以文件夹结构应该是：
.
./app.js
./public
/css
/style.css
【讨论】：
为什么要将 HTML 与 javascript 混合？您应该澄清这两行代码应该在不同的文件中。【参考方案4】：为了在 express 应用中提供静态 CSS 文件（即使用 css 样式文件来设置 express 应用中的 ejs“模板”文件的样式）。以下是需要执行的简单 3 个步骤：
将名为“styles.css”的 css 文件放在名为“assets”的文件夹中，将 assets 文件夹放在名为“public”的文件夹中。因此css文件的相对路径应该是“/public/assets/styles.css”
在每个 ejs 文件的头部，您只需使用 <link href=… /> 调用 css 文件（就像在常规 html 文件中所做的那样），如下面的代码所示。确保将下面的代码直接复制并粘贴到您的 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'));
遵循这三个简单的步骤后，每次您在 app.get() 方法中使用 res.render('ejsfile') 时，您都会自动看到调用的 css 样式。您可以通过在浏览器中访问您的路线进行测试。
【讨论】：
【参考方案5】：你可以用这个
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 尝试了这个。它对我有用
【讨论】：
【参考方案6】：您的问题实际上并非特定于 ejs。
这里需要注意两件事
style.css 是一个外部 css 文件。因此，您不需要该文件中的样式标签。它应该只包含 css。
在您的快速应用程序中，您必须提及您从中提供静态文件的公共目录。喜欢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
【讨论】：
app.use(express.static(__dirname + '/public'));如果您使用此行，请先尝试不要将_dir name 放在提及public 时，您不必提及_dirname。我想试试这个并给它一个粘性。 app.use(express.static("public"));以上是关于将 .css 文件添加到 ejs的主要内容，如果未能解决你的问题，请参考以下文章
如何将我的布局路径正确定位到使用 HTML、EJS 和 Markdown 构建的 11ty (Eleventy) 博客目录？