2013-05-27 146 views
1

我剛開始使用Express,我試圖找出爲什麼,當我運行我的應用程序時,Bootstrap字體未呈現(它以簡單的Times New Roman顯示文本)。我很確定我使用的是正確的路徑,因爲當我在瀏覽器中打開我的index.html時,字體正確地呈現。我也用Bootstrap導航欄嘗試了這一點,而當我嘗試通過Node運行它時,Bootstrap似乎不能正常工作,但當我在瀏覽器中單獨查看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和express沒有任何關係。 Bootstrap完全在客戶端運行,並且express是一個服務器中間件庫node.js

2)你爲什麼要爲自己提供bootstrap?更好的使用CDN:

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

3)如果你堅持服務於它自己添加一個靜態目錄,以便快遞可以提供靜態文件(添加靜態也將竭誠爲您服務當你嘗試成爲JS/CSS的yoursite,但還是喜歡從CDN服務引導。

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

則沒有必要使用公共,強制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. 你需要一個實際的靜態中間件。 Express本身默認不做任何事情。

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

  2. 請勿在HTML中的路徑中使用「public」。這是靜態資產所在的目錄,但是從瀏覽器的角度來看,這是根。並且不要使用相對路徑,要麼是

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