将 .css 文件添加到 ejs

2024-03-23

我正在使用 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>
   &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。

这里有2点需要注意

  1. 样式.css是一个外部CSS文件。所以你不需要该文件中的样式标签。它应该只包含 css。

  2. 在您的 Express 应用程序中,您必须提及从中提供静态文件的公共目录。比如css/js/图片

可以通过以下方式完成

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

假设您将 css 文件放入应用程序根目录中的 public 文件夹中。 现在您必须引用模板文件中的 css 文件, 喜欢

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

在这里,我假设您已将 css 文件放入 public 文件夹内的 css 文件夹中。

所以文件夹结构是

.
./app.js
./public
    /css
        /style.css
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 .css 文件添加到 ejs 的相关文章

随机推荐

  • PHP 应用程序中是否可能有太多函数?

    PHP 应用程序是否可以拥有太多功能 执行大量PHP函数是否会占用内存和资源 我正在开发的 WordPress 主题有很多功能 当我完成时可能超过 100 个 我担心我可能有太多功能 即使许多功能会导致更多的内存消耗 我还是建议您使用它们
  • WebStorm 2018.1.4 + ESLint:TypeError:this.CliEngine 不是构造函数

    我的配置是这样的 WebStorm 2018 1 4 ESLint 6 4 节点12 8 npm 6 10 2 Windows 8 1 如何消除帖子标题中的错误 这是一个代码示例 import GET DAILY SUCCESS GET H
  • 如何在 Apache PDfBox 中设置页面缩放选项

    在我的应用程序中 我使用 Apache PDFBox 来渲染 PDF 文件并进行静默打印 PDFBox 可以很好地渲染 PFD 但我遇到了问题scaling来到图片上 这里我想在打印PDF之前设置页面缩放 在 acrobat reader
  • 如何在 Next.js 中从服务器获取 HOC 中的数据?

    我使用 Next js 创建了新应用程序9 3 1 在带有 SSR 的旧应用程序中 我可以使用getInitialProps函数在 HOC 组件中 而不是在页面中 因此我可以从 HOC 组件中的服务器和页面中获取数据 像这样https gi
  • woocommerce 获取属性值列表

    我在 WordPress 上使用 woocommerce 创建一个简单的商店网站 并为产品添加了几个属性 这些是 size and color 根据尺码 我有多种值 包括小号 中号和大号 与颜色相同 即 红色 蓝色 绿色 我想要做的是在下拉
  • 在 Sass 中编写一个以 1 以外的值递增的循环

    在 SASS 中 循环的写法如下 for i from 1 through 100 stuff 这将产生 1 2 3 4 一直到 100 如何让循环以两个单位为间隔进行 for i from 1 through 100 step 2 stu
  • JavaFX 8 WebEngine:如何在 java 中将 console.log() 从 javascript 获取到 System.out?

    我使用 JavaFX 和 JavaFX WebEngine 中的 javascript 引擎来开发应用程序 我想从 javascript 获得反馈以进行调试 WebEngine 内的控制台输出会发生什么情况 有什么方法可以访问它 或者重定向
  • 如何在android中比较已知时间和当前时间?

    我正在尝试使用开始时间和结束时间 并计算当前时间的百分比 在开始时间和结束时间之间 例如 如果现在时间为 12 00 startHour 11 00 End Hour 14 00 则应返回 33 四舍五入 因为已经过去了 33 的时间 我已
  • mvvmcross 可扩展列表视图

    我只是想知道 ExpandableListViews 的功能或类似于 ExpandableListViews 的功能是否潜伏在 Mvvmmcross 框架内 或者这种类型的控件不适用于多平台要求 该功能位于http deapsquatter
  • Clojure 开发:IDE 还是 REPL?

    我已经使用 Clojure 一段时间了 想要创建一些比玩具更大 更复杂的项目 过去几年我一直在使用 Java 并且已经习惯了 IDE 为我所做的事情 编译大量类 将它们打包在 jar 中 创建批处理文件供用户启动它们 当我查看 Clojur
  • 从节目/列表中抛出 404

    我像这样查询视图 db design myviewname view foo key 22ABC123 22 结果如下 total rows 3 offset 3 rows 都好 由于没有找到文档 我想从节目或列表中抛出 404 那可能吗
  • 无法使用 JavaScript Promise 读取未定义的属性“then”

    我明白乍一看这可能看起来像重复的 但我已经看到了所有告诉我要退货的答案 但这不起作用 这是我的功能 function removePastUsersFromArray pullAllUsersFromDB then function use
  • 在 C# 中处理非常大的整数

    有谁知道我可以在 C 中计算非常大的整数的方法 我正在尝试计算数字的阶乘 例如 5 5 4 3 2 1 120 对于小数字 这不是问题 但尝试计算 unsigned int 的最大值 4 294 967 295 的阶乘似乎是不可能的 我已经
  • 移动还是不移动右值引用限定方法?

    在以下 C 11 代码中 应首选哪种 return 语句构造 include
  • Ant 邮件任务 - 发送带附件的邮件时出现问题

    当我尝试使用 ant 邮件任务时 它在发送带有附件的邮件时似乎不起作用 我当前面临的问题是 它在电子邮件正文中发送附件内容 而不是作为附件 即使详细输出显示为 它也是通过附件发送的 由于最初它抱怨缺少 jars 我添加了 mail jar
  • 在 WinForms 中保留对控件的全局引用以访问 GUI 线程

    这个问题有一点历史 请耐心听我说 In this https stackoverflow com questions 192980 boiler plate code replacement is there anything bad ab
  • 如何生成 JWT 以用于 Swift 应用程序的 API 身份验证

    我正在尝试实现 API 服务的使用 该服务需要对其所有 API 调用进行 JWT 身份验证 我了解 JWT 令牌是什么以及它们的使用方式 我的问题是我正在编写一个 Swift 应用程序 但无法完全弄清楚生成令牌的过程 以便我可以将其附加为B
  • C#:在您拥有 DirectoryInfo 的目录中创建新的 FileInfo

    我只是想知道你什么时候有例如 var dir new DirectoryInfo C Temp 有没有比这更简单 更清晰的方法来将新文件添加到该目录 var file new FileInfo Path Combine dir FullNa
  • 使用 WCF 发送签名请求并接收未签名响应

    我正在与一个 NET 开发团队合作 他们正在尝试与使用 WS Security 的 Web 服务进行交互 尽管该服务需要签名的请求 但它只返回未签名的响应 该团队知道使用 WSE 调用服务的方法 但他们需要使用 WCF 因此有人可以建议如何
  • 将 .css 文件添加到 ejs

    我正在使用 ejs 处理 Node js express 但无法在其中包含 css 文件 我单独尝试了与 html css duo 相同的操作 效果很好 我怎样才能将相同的内容包含在其中我的 ejs 文件 我的 app js 是这样的 va