如何在我的 ejs 文件中包含引導程序文件？
[英]How to include bootstrap file in my ejs files?
問題描述
所以我已經使用 npm -bootstrap@3 安裝了引導程序，但是當我嘗試在我的應用程序中包含來自 node_modules 的 bootstrap.min.css 文件時，它在我的控制台中顯示此錯誤：
錯誤信息
在網絡選項卡中顯示
在引導源上找不到 404。
以下是我的項目結構中的一些圖像：
項目文件夾結構
包含引導程序文件的 ejs 代碼
這里有什么問題？
6 個解決方案
解決方案1
6 2018-08-15 08:16:53
在本教程之后，我遇到了同樣的問題。 您可以通過 express.static 內置中間件功能解決此問題。
- 創建一個名為 public 的目錄
將以下代碼添加到您的 app.js 文件中
app.use(express.static('public'))
現在您可以將引導程序文件放在此目錄（或子目錄）中，並將它們鏈接到公共目錄。
您可以在此處找到更多信息。 https://expressjs.com/en/starter/static-files.html
解決方案2
2 已采納 2017-11-27 08:40:36
看起來您正在根據 ejs 文件的位置構建相對路徑，實際上您需要做的是查看 ejs 視圖如何映射的路徑，並且您需要在那里使其相對形式。 在您的情況下，它的header.ejs並假設您是從根頁面提供它應該是../node_modules但如果您這樣做，它將在 /posts/foo 之類的不同頁面中中斷，因此解決問題的最佳方法是將您的 css 文件保存在 /public/css 文件夾中，並將 public 文件夾添加為您的靜態文件夾，並使用/css/bootstrap.min.css路徑
解決方案3
1 2017-11-26 22:20:51
為什么不從 CDN 使用？
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
解決方案4
0 2018-09-17 15:12:55
因為您正在嘗試從服務器訪問靜態文件，而您的bootstrap.min.css是一個靜態文件，所以我們知道，如果您使用 Express，nodejs 提供了一種提供靜態文件的方法。 例如，您可以使用以下代碼在名為 public 的目錄中提供圖像、CSS 文件和 JavaScript 文件：
app.use(express.static('public'))
你應該知道 ：
Express 查找相對於靜態目錄的文件，因此靜態目錄的名稱不是 URL 的一部分。
解決方案5
0 2020-05-05 05:25:51
我遇到了同樣的問題，並決定嘗試使用 express.static() 這樣的中間件。
警告：當我聲明 express.static("public") 時，我將它放在 app.js 文件的底部，但它對我不起作用。 所以我把它向上移動，它可以工作..這是例子
"use strict";
const express = require("express"),
app = express();
const layouts = require("express-ejs-layouts");
app.set("view engine", "ejs");
app.set("port", process.env.PORT || 3000);
app.use(
express.urlencoded({
extended: false
})
);
app.use(express.json());
app.use(layouts);
app.use(express.static("public"));
app.get("/", (req, res) => {
res.render("index");
});
app.listen( app.get("port"), () => {console.log(`Server running at http://localhost:${app.get("port")}`);
});
然后在公共文件夾（我的 css、js、圖像所在的位置）中，我將 boostrap.css 放在那里 在 layout.ejs 我有 html 文件並將其稱為
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1">
<title>School of business</title>
<link rel="stylesheet" href="/css/bootstrap.css"> <!-- BOOTSTRAP -->
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
…………
解決方案6
0 2020-05-30 19:17:35
這對我有用，使用 Bootstrap CDN
頭文件
> <!-- views/partials/head.ejs --> <meta charset="UTF-8" /> <title>Super
> Awesome</title>
>
> <!-- Latest compiled and minified CSS --> <link rel="stylesheet"
> href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
> integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
> crossorigin="anonymous" />
將此包含在index.ejs 中
<!DOCTYPE html>
<html>
<head>
<%- include ('../partials/head') %>
</head>
<body>
<div class="jumbotron">
<%- include ('../partials/form') %>
</div>
</body>
</html>
如何使用express 3.x在node.js中的EJS模板中包含js文件
[英]How to include js files in my EJS templates in node.js using express 3.x
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.