2013-05-27 6 views
1

Я только начинаю с Express, и я пытаюсь понять, почему, когда я запускаю свое приложение, шрифт Bootstrap не отображается (он показывает текст в простой Times New Roman). Я уверен, что использую правильные пути, потому что, когда я открываю свой index.html в своем браузере, шрифт отображается правильно. Я также пробовал это с помощью навигационной панели Bootstrap, и Bootstrap не работает корректно, когда я пытаюсь запустить его через Node, но он снова работает, когда я просматриваю HTML-файл в своем браузере независимо. Изменение пути каталога Bootstrap к «/ public/bootstrap ...» заставляет его неправильно отображать оба пути. Как это исправить?Express not rendering bootstrap

index.html:

<html> 
    <head> 
    <title>X</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="../public/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen"> 
    </head> 
    <body> 
    <script src="http://code.jquery.com/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <div class="container"> 
     <h1>Under Construction</h1> 
     <p>This website is under construction. Come back soon!</p> 
    </div> 
    </body> 
</html> 

web.js (мой основной файл приложения):

var express = require('express') 

var app = express() 
app.set('view engine', 'ejs') 
app.engine('html', require('ejs').renderFile) 

app.get('/', function(req, res) { 
    res.render('index.html') 
}) 

var port = process.env.PORT || 5000; 
app.listen(port, function() { 
    console.log("Listening on " + port); 
}) 

ответ

6

1) бутстрап и экспресс не имеют никакого отношения друг к другу. Bootstrap полностью работает на стороне клиента, а выражение - это серверное промежуточное lib над узлом. Js

2) Почему вы обслуживаете загрузку самостоятельно? лучше использовать CDN:

  1. http://www.bootstrapcdn.com
  2. http://hostedbootstrap.com/

3) если вы настаиваете на обслуживании сами добавить статический каталог так, что курьерский может служить статические файлы (добавление статическую также будет служить вам когда вы пытаетесь служить JS/CSS для YourSite, но по-прежнему предпочитают служить начальной загрузки из CDN.

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

тогда нет необходимости пользоваться общественным, JUS t используйте корневой путь прямо к вашему css:

bootstrap/css/bootstrap.min.css 

i.e. 

<link href="../public/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen" 
3
  1. Вам необходимо фактическое статическое промежуточное программное обеспечение. Сам экспресс ничего не делает по умолчанию.

    app.use (express.static (__ dirname + "/ public"));

  2. Не используйте «общедоступные» в путях вашего HTML. Это каталог, в котором живут статические активы, но с точки зрения браузера это корень. И не используйте относительные пути, либо

.

<link href="/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">