javascript - 尽管部分和公用文件夹设置正确,但 CSS 仅加载两个 ejs 文件中的一个
问题描述
我有两个使用页眉和页脚部分设置的 EJS 文件,CSS 使用静态公用文件夹正确链接,如下所示:
app.use(express.static("public"))
CSS 已正确链接,因为样式在加载时显示在 index.js 页面上。但是,当我请求 show.ejs 时,会显示 html,所以我知道没有问题,只是没有样式。到底是怎么回事?我检查了布局中的错误,但在页面加载时它是正确的,所以我很茫然。
头部分 EJS 文件:header.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Your page title here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
第一个 EJS 文件:index.ejs
<%- include('partials/header');-%>
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 10%">
<h4>Budget</h4>
<table>
<% budgetAll.forEach( (budgetItem, index) => { %>
<tr>
<td><%= budgetItem.date %></td>
<td><a href="/budgets/<%= index %>"><%= budgetItem.name %></a></td>
<td><%= budgetItem.amount %></td>
</tr>
<% }) %>
</table>
</div>
</div>
</div>
<%- include('partials/footer');-%>
第二个 EJS 文件:show.ejs
<%- include('partials/header'); -%>
<div class="container">
<div class="row">
<div class="column one-half">
<h1><%= budgetDetail.name %></h1>
<button type="button">Back</button>
</div>
</div>
</div>
<%- include('partials/footer'); -%>
解决方案
您需要为公用文件夹指定绝对路径。我用这个:
app.use(express.static(path.join(__dirname, "/public")));
__dirname是 server.js 文件的目录。如果您的公用文件夹在该文件夹之外,您可以简单地使用 /../ 导航到上一个文件夹
您需要导入“路径”。
推荐阅读
- bash - Bash 命令将不同的字段从十六进制转换为十进制
- google-cloud-platform - 在谷歌云平台中克隆 repo 的权限被拒绝(公钥)错误
- c++ - 将字符串文字分配给 char*:const_cast
vs 使用 char 数组 - android - Instant App - 多模块项目 - 配置“编译”已过时,已替换为“实施”和“API”
- html - 修复了导航栏重叠内容(使用边距使页面可滚动,我不希望这样)
- rest - Jersey REST 服务 @PathParam 解码
- android - OnPreferenceChangeListener 在进行更改之前触发
- javascript - 国家地理编码边界 - 摆脱州界线
- asp.net-mvc - 如何在.NET MVC 中获取用户当前访问国家的位置?
- python - Pip 安装错误(Pyside 到 Raspberry Pi)