Question

我在pug中有一个简单的登录视图。我使用了材料设计来进行引导。当我尝试以简单的html文件运行时，它正在显示。但是当我尝试包含所有css，bootstrap，js时文件到我的公共文件夹，并通过快速路由进行渲染，引导程序样式或js功能均正常。我通过更改路径进行了交叉检查。

1。我试图通过将文件放置在公共文件夹中来呈现，然后制作一个快速的静态中间件，但这是行不通的。

2。即使我尝试将所有文件都放置在视图之外，并尝试给出确切的路径，但也没有显示。

3。然后我还尝试了../ public / bootstrap.min.css（类似于从views文件夹导航到public文件夹），但是仍然无法正常工作。

但是当我使用cdns时，它可以正常工作。这是怎么回事。我将提交代码文件（与我尝试的类似）。

login.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文件夹和一些其他东西。

Answer 1

如何调试此问题：

打开Chrome中的开发者工具，然后转到“网络”标签。重新加载页面。查找CSS文件的404。查看请求网址。

复制该网址。并将其粘贴到您的浏览器中。例如：

https://assets-cdn.github.com/assets/github-27937b62110f7615d6f14a9e5939f7c8.css

更改app.use(express.static(path.join(__dirname, 'public'))); 以及您的哈巴狗文件中的url href，直到您可以正常使用它为止。

您可能会看到类似www.yoursite.com/login/css/bootstrap.min.css的错误信息。也许您需要将href更改为/css/yourfile.min.css而不是css/yourfile.min.css

当您使用app.use(express.static(path.join(__dirname, 'public')));时，我很确定它不是从/public而是从/开始投放的，因此您无需执行类似/public/css/yourfile.min.css的操作

但是，在中间件文件中，您可以执行类似的操作

app.use('/css', express.static(path.join(__dirname,'/public/css/'));

如果您只想从该目录提供服务。

从快速路由呈现为视图时，mdbootsrap不显示

1 个答案: