2013-05-27 106 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">