0

我在 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文件夹和一些额外的东西。请帮忙。

4

1 回答 1

1

如何调试此问题:

在 chrome 中打开开发人员工具,转到“网络”选项卡。重新加载页面。查找您的 CSS 文件的 404。查看请求 URL。

开发工具示例

复制那个网址。并将其粘贴到浏览器中。例如:

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

更改app.use(express.static(path.join(__dirname, 'public'))); pug 文件中的 url href 直到你让它按预期工作。

你可能会看到类似的东西www.yoursite.com/login/css/bootstrap.min.css是错误的。也许您需要将您的 href 更改/css/yourfile.min.csscss/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/'));

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

于 2018-06-27T17:20:05.370 回答