4

我刚开始使用 Express，我试图弄清楚为什么当我运行我的应用程序时，Bootstrap 字体没有呈现（它以简单的 Times New Roman 显示文本）。我很确定我使用了正确的路径，因为当我在浏览器中打开我的 index.html 时，字体会正确呈现。我还尝试使用 Bootstrap 导航栏进行此操作，当我尝试通过 Node 运行它时，Bootstrap 似乎无法正常工作，但当我在浏览器中独立查看 HTML 文件时，它再次工作。将 Bootstrap 目录的路径更改为“/public/bootstrap...”会导致它以两种方式都错误地呈现。我该如何解决？

索引.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);
})
4

2 回答 2

10

1) bootstrap 和 express 没有任何关系。Bootstrap 完全在客户端运行，express 是 node.js 之上的服务器中间件库

2）你为什么要自己提供引导服务？更好地使用 CDN：

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

3）如果您坚持自己提供服务，请添加一个静态目录，以便 express 可以提供静态文件（当您尝试为您的站点提供 js/css 但仍然更喜欢从 CDN 提供引导程序时，添加一个静态目录也会为您服务。

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

那么不需要使用公共，只需使用您的css的根路径即可：

bootstrap/css/bootstrap.min.css

i.e. 

<link href="../public/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen"
于 2013-05-27T18:30:11.623 回答
4

  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">
于 2013-05-27T18:30:03.490 回答