如何在我的 ejs 文件中包含引导程序文件？
[英]How to include bootstrap file in my ejs files?
问题描述
So i have installed bootstrap using npm -bootstrap@3 but when i am trying to include bootstrap.min.css file from node_modules in my application, it shows this error in my console :
所以我已经使用 npm -bootstrap@3 安装了引导程序，但是当我尝试在我的应用程序中包含来自 node_modules 的 bootstrap.min.css 文件时，它在我的控制台中显示此错误：
error message错误信息
In the network tab it shows在网络选项卡中显示
404 not found on the bootstrap source.
Below are some images on my project structue:以下是我的项目结构中的一些图像：
project folder structure项目文件夹结构
ejs code to include bootstrap file包含引导程序文件的 ejs 代码
Whats the issue here?这里有什么问题？
6 个解决方案
解决方案1
6 2018-08-15 08:16:53
I got the same issue following this tutorial.在本教程之后，我遇到了同样的问题。 You can solve this by express.static built-in middleware function.您可以通过 express.static 内置中间件功能解决此问题。
- Create a directory named public创建一个名为 public 的目录
Add following code to your app.js file
将以下代码添加到您的 app.js 文件中app.use(express.static('public'))
app.use(express.static('public'))Now you can place your bootstrap files in this directory(or subdirectory) and link them relative to public directory.
现在您可以将引导程序文件放在此目录（或子目录）中，并将它们链接到公共目录。
You can find more info here.您可以在此处找到更多信息。 https://expressjs.com/en/starter/static-files.html https://expressjs.com/en/starter/static-files.html
解决方案2
2 已采纳 2017-11-27 08:40:36
Looks like you are building the relative path based on location of your ejs file, what actually you need to do is look at the path how ejs view is mapped and you need to make it relative form there.看起来您正在根据 ejs 文件的位置构建相对路径，实际上您需要做的是查看 ejs 视图如何映射的路径，并且您需要在那里使其相对形式。 In your case its header.ejs and lets say you are serving it from root page it should be ../node_modules but if you do this it will break in a different page like /posts/foo so the best way to fix your problem is keeping your css files in /public/css folder and add public folder as your static folders and use path like /css/bootstrap.min.css在您的情况下，它的header.ejs并假设您是从根页面提供它应该是../node_modules但如果您这样做，它将在 /posts/foo 之类的不同页面中中断，因此解决问题的最佳方法是将您的 css 文件保存在 /public/css 文件夹中，并将 public 文件夹添加为您的静态文件夹，并使用/css/bootstrap.min.css路径
解决方案3
1 2017-11-26 22:20:51
Why not use from CDN?为什么不从 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
Because you're trying to access to static files from the server and your bootstrap.min.css is a static file,as we know nodejs provide a way to serve static files if you are using Express.因为您正在尝试从服务器访问静态文件，而您的bootstrap.min.css是一个静态文件，所以我们知道，如果您使用 Express，nodejs 提供了一种提供静态文件的方法。 For example,you can use the following code to serve images, CSS files, and JavaScript files in a directory named public:例如，您可以使用以下代码在名为 public 的目录中提供图像、CSS 文件和 JavaScript 文件：
app.use(express.static('public'))
You should know that :你应该知道 ：
Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL.
解决方案5
0 2020-05-05 05:25:51
I ran into the same issue and decided to give middleware like express.static() a go.我遇到了同样的问题，并决定尝试使用 express.static() 这样的中间件。
warning : when I declared express.static("public") I put it at the bottom of my app.js file and it didn't work for me.警告：当我声明 express.static("public") 时，我将它放在 app.js 文件的底部，但它对我不起作用。 So I moved it up and it works.. here is the example所以我把它向上移动，它可以工作..这是例子
"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")}`);
});
Then in public folder (where my css, js, images are), I put boostrap.css there In layout.ejs I have html file and refer it as然后在公共文件夹（我的 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
This worked for me, using Bootstrap CDN这对我有用，使用 Bootstrap CDN
head.ejs头文件
> <!-- 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" />
Include this in index.ejs将此包含在index.ejs 中
<!DOCTYPE html>
<html>
<head>
<%- include ('../partials/head') %>
</head>
<body>
<div class="jumbotron">
<%- include ('../partials/form') %>
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.