请教Nodejs环境下microblog里bootstrap css加载无效的问题

请教Nodejs环境下microblog里bootstrap css加载无效的问题

最近跟着《开发指南》和论坛上的教程做多人微博，想尝试用bootstrap模版和jade，遇到一个问题向各位大大请教。 我在地址栏里输入localhost:3000和localhost:3000/blog 时一切都是正常的 但是当输入localhost:3000/blog/和localhost:3000/blog/xxx （xxx为文章标题）时，就出现了css失效的情况。 这是我layout.jade里的代码

!!! transitional
  html(xmlns='http://www.w3.org/1999/xhtml')
  head
    title=title
    script(src='javascripts/jquery.js')
    script(src='javascripts/bootstrap.js')
    link(rel='stylesheet', type='text/css', href='stylesheets/bootstrap.css')
    style
      body{padding-left:30px;padding-right:30px;padding-top:20px;padding-bottom:40px;}
    link(rel='stylesheet', type='txt/css', href='stylesheets/bootstrap-responsive.css')

7 回复

教程：Node.js环境下Microblog里Bootstrap CSS加载无效的问题

最近我跟随《开发指南》和论坛上的教程制作了一个多人微博应用，并希望使用Bootstrap模板和Jade。然而，在实现过程中遇到了一个CSS加载问题。具体来说，当我访问localhost:3000和localhost:3000/blog时一切正常，但当我访问localhost:3000/blog/或localhost:3000/blog/xxx（其中xxx为文章标题）时，CSS就失效了。

以下是我在layout.jade文件中的代码：

!!! transitional
html(xmlns='http://www.w3.org/1999/xhtml')
  head
    title=title
    script(src='/javascripts/jquery.js')
    script(src='/javascripts/bootstrap.js')
    link(rel='stylesheet', type='text/css', href='/stylesheets/bootstrap.css')
    style
      body{padding-left:30px;padding-right:30px;padding-top:20px;padding-bottom:40px;}
    link(rel='stylesheet', type='text/css', href='/stylesheets/bootstrap-responsive.css')

问题分析与解决方案

问题的根本原因在于路径的不一致。在访问localhost:3000/blog/或带有文章标题的路径时，浏览器无法正确解析CSS文件的路径。为了确保所有页面都能正确加载CSS文件，我们需要确保路径的一致性和正确性。

解决方案一：绝对路径

确保所有静态资源的路径都是从根目录开始的绝对路径。通过在路径前加上斜杠/，可以确保路径从服务器根目录开始。

link(rel='stylesheet', type='text/css', href='/stylesheets/bootstrap.css')
link(rel='stylesheet', type='text/css', href='/stylesheets/bootstrap-responsive.css')

解决方案二：使用Express的静态文件服务

如果你使用的是Express框架，可以通过配置静态文件服务来简化路径管理。在你的应用启动文件（例如app.js或server.js）中添加以下代码：

const express = require('express');
const app = express();

// 配置静态文件服务
app.use('/static', express.static(__dirname + '/public'));

// 其他路由配置...

然后在layout.jade中修改路径：

link(rel='stylesheet', type='text/css', href='/static/stylesheets/bootstrap.css')
link(rel='stylesheet', type='text/css', href='/static/stylesheets/bootstrap-responsive.css')

这样，Express会自动处理静态文件的路径，确保它们能被正确加载。

总结

通过使用绝对路径或配置Express的静态文件服务，可以解决Node.js环境下Bootstrap CSS加载无效的问题。选择适合你项目的方式进行调整，以确保所有页面都能正确加载所需的CSS文件。


表示没做过那个教程, 楼主给一些更具体的信息看看吧 页面上 HTML 里是否 link 标签正确渲染了, 还是请求不到资源?

是请求不到资源 我发现只要又两个以上的/出现在地址栏就出问题

改成href=’/stylesheets/bootstrap-responsive.css’ 就OK了 难道不看论坛帖子的？ 之前一个帖子才问这个问题

我指的是所有资源 js 或者 css文件 地址前面都加/ 别看不懂 给你讲仔细了

/stylesheets

根据你提供的信息，问题可能出在CSS文件路径上。当访问路径发生变化时，CSS文件的相对路径可能会导致浏览器无法正确找到文件。你可以通过以下步骤来解决这个问题：

  1. 使用绝对路径：确保CSS文件路径是相对于根目录的绝对路径。

  2. 检查文件是否存在：确保public/stylesheets/bootstrap.css文件存在。

  3. 更新Jade模板中的路径：将路径改为从根目录开始的路径，例如/stylesheets/bootstrap.css。

以下是修改后的layout.jade代码示例：

!!!
html(xmlns='http://www.w3.org/1999/xhtml')
head
  title=title
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/bootstrap.js')
  link(rel='stylesheet', type='text/css', href='/stylesheets/bootstrap.css')
  style
    body{padding-left:30px;padding-right:30px;padding-top:20px;padding-bottom:40px;}
  link(rel='stylesheet', type='text/css', href='/stylesheets/bootstrap-responsive.css')

解释

  • script 和 link 标签中的路径都改成了以 / 开头的绝对路径。
  • 确保你的静态文件（如CSS、JS文件）存放在public/stylesheets和public/javascripts目录下。
  • 使用绝对路径可以避免因URL路径变化而导致资源文件找不到的问题。

进一步检查

如果上述修改后仍然存在问题，请检查Express配置是否正确设置了静态文件路径。通常情况下，你需要在Express应用中设置静态文件目录，例如：

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

确保这行代码存在于你的应用初始化逻辑中。

回到顶部