我在 pug 中有一个简单的登录视图。我使用材料设计进行引导。当我尝试作为简单的 html 文件运行时,它会显示出来。但是当我尝试将所有 css、bootstrap、js 文件包含到我的公共文件夹并通过快速路由呈现相同,引导样式和 js 功能都在工作。我通过更改路径进行了交叉检查。
1.我试图通过将文件放在公共文件夹中来呈现。然后制作一个快速静态中间件。但它不起作用。
2.即使我尝试将所有文件放在视图之外并尝试给出确切的路径,但没有显示出来。
3.然后我也尝试过../public/bootstrap.min.css(类似于从views文件夹导航到公共文件夹),仍然无法正常工作。
但是当我使用cdns时它工作正常。它有什么问题。我将提交代码文件(类似于我正在尝试的东西)。
登录.pug
doctype html
html(lang='en')
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
meta(http-equiv='x-ua-compatible', content='ie=edge')
title Material Design Bootstrap
// Font Awesome
link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')
// Bootstrap core CSS
link(href='css/bootstrap.min.css', rel='stylesheet')
// Material Design Bootstrap
link(href='css/mdb.min.css', rel='stylesheet')
// Your custom styles (optional)
link(href='css/style.css', rel='stylesheet')
style(type='text/css').
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.Absolute-Center.is-Responsive {
width: 50%;
height: 50%;
min-width: 200px;
max-width: 400px;
padding: 40px;
}
body
// Start your project here
html.full-height(lang='en')
body
.container
// Material form login
.card-body
form
p.h3.text-center.mb-4 Welcome
hr(align='center', width='30%')
p.h4.text-center.mb-4 Log In
.input-container.w-50.mx-auto
// Material input email
.md-form
i.fa.fa-envelope.prefix.grey-text
input#materialFormLoginEmailEx.form-control(type='email')
label(for='materialFormLoginEmailEx') Email
// Material input password
.md-form
i.fa.fa-lock.prefix.grey-text
input#materialFormLoginPasswordEx.form-control(type='password')
label(for='materialFormLoginPasswordEx') Password
.text-center.mt-4
button.btn.btn-default(type='submit') Login
p(style='text-align: center;') Or
hr(align='rigth', width='30%')
div(align='center')
a(href='') Sign In with Google
p(style='text-align: center;') Don't have an account?
a(href='') SignUp now
// Material form login
// /Start your project here
// SCRIPTS
// JQuery
script(type='text/javascript', src='js/jquery-3.3.1.min.js')
// Bootstrap tooltips
script(type='text/javascript', src='js/popper.min.js')
// Bootstrap core JavaScript
script(type='text/javascript', src='js/bootstrap.min.js')
// MDB core JavaScript
script(type='text/javascript', src='js/mdb.min.js')
app.js 中的中间件
// Set Public Folder - to make use of static bootstrap,css files
app.use(express.static(path.join(__dirname, 'public')));
我正在准确地获取页面,但只有 mdb 样式没有显示。我的 login.pug 代码或路径是否有任何问题。或者如果我使用 cdn,它工作正常。但是我能用它做所有的东西吗cdn的,我问这个的原因是我注意到我下载的mdb文件夹中有一些img文件夹和一些额外的东西。请帮忙。