mdbootsrap не отображается при визуализации как вид с экспресс-маршрута - PullRequest
Новая
       10

mdbootsrap не отображается при визуализации как вид с экспресс-маршрута

0 голосов
/ 24 июня 2018

У меня есть простое представление входа в систему в pug. Я использовал дизайн материала для начальной загрузки с ним. Когда я пытаюсь запустить как простой html-файл, он появляется. Но когда я пытался включить все css, bootstrap, jsфайлы в мою общую папку и отрисовывают то же самое по экспресс-маршруту, работают стили начальной загрузки и функции js. Я перепроверил, изменив пути.

1.Я попытался отрендерить, поместив файлы вобщая папка. Затем создается экспресс-статическое промежуточное ПО. Но оно не работает.

2. Даже я пытался разместить все файлы за пределами представлений и пытался указать точный путь, но не отображается.

3. Затем я тоже попробовал, как ../public/bootstrap.min.css (что-то вроде перехода в общую папку из папки представлений), не работает до сих пор.

Но когдаЯ использовал 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')

промежуточное ПО в приложении.js 

// Set Public Folder - to make use of static bootstrap,css files
app.use(express.static(path.join(__dirname, 'public')));

I aЯ получаю страницу точно, но только стили mdb не отображаются. Есть ли проблемы с моим кодом login.pug или с path. Или это работает нормально, если я использую cdn. Но я смогу делать все вещи с помощью cdnпричина, по которой я спрашиваю это, я заметил, что в моей загруженной папке mdb есть папка img и некоторые дополнительные материалы. Пожалуйста, помогите.

1 Ответ

0 голосов
/ 27 июня 2018

Как отладить эту проблему:

Откройте инструменты разработчика в Chrome, перейдите на вкладку "сети". Перезагрузите страницу. Ищите 404 вашего CSS-файла. Посмотрите на URL запроса.

Devtools Example

Скопируйте этот URL. и вставьте его в свой браузер. Например:

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/'));

Если вы хотите служить только из этого каталога.

...