我正在Express js应用程序中使用4.4.3版把手来呈现html。我正在尝试在样式标签中加载Bootstrap CSS。使用cdn链接时,它工作正常。但是我想从本地路径加载。如果我使用本地路径,则不会加载。我不知道为什么它不起作用。我尝试了多种加载本地CSS文件的方法。但是我的运气不好。任何人都可以建议我如何在车把中使用本地CSS文件。下面我提到了我尝试过的所有代码。
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./assets/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css">
我在 registration_print.html 文件中尝试了很多这些操作。而且在我的 express.js 文件中,我提到了静态路径。
app.use(express.static(__dirname + '/../assets/templates'));
app.use("/assets", express.static(path.join(__dirname, "/../assets")));
下面是我的文件夹结构。请任何人帮助我解决此问题。
答案 0 :(得分:0)
嘿,这是我的解决方法:
首先,我会推荐您,尝试使用express-hanldebars它的一个模块,该模块专门用于express和handlebars交互。
基本上,您需要在小孔文件夹上使用app.use
app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var hbs = require('express-handlebars');
var handlebars = require('./helpers/handlebars.js')(hbs);
var routes = require('./routes/index');
var app = express();
// view engine setup
// Settings for Handlebars moved to ./helpers/handlebars.js
app.engine('hbs', handlebars.engine);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
这是我在模板中使用它们的方式。
layout.hbs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="/stylesheets/navigation.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.18.0/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.18.0/js/mdb.min.js"></script>
<!-- Custom JavaScript -->
<script type="text/javascript" src="/javascript/custom-script.js"></script>
<script type="text/javascript" src="/javascript/navigation.js"></script>
</head>
<body>
{{{ body }}}
</body>
</html>
希望我能给您一个提示,随时询问是否不清楚
编辑: 我会尝试一下,我的猜测是快递看不到资产文件夹:
app.use(express.static(path.join(__dirname,'..','assets'));
然后输入您的html
:<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">