我开始使用Middleman-blog扩展程序与Middleman建立博客。到目前为止，主页上的一切都运行良好。当我单击链接以查看完整的博客文章时，会出现此问题。完整的博客帖子页面没有应用CSS。经过进一步检查，我收到404错误。我通过在我的CSS链接href中移动3个级别来修复它在Dev Tools上，如下所示：
BEFORE（在主页上工作但不在文章页面中工作）
<link rel="stylesheet" href="stylesheets/global.sass">
之后（向上移动两个级别不再给我404）
<link rel="stylesheet" href="../../../stylesheets/global.sass">
我的问题是：我需要修改什么才能使文章页面在主页保持完整时查找CSS 3级别？
答案 0 :(得分：1)
在您的情况下，最简单的方法是使用webroot相对路径。
总结一下，你正在使用常规的相对路径......
<link rel="stylesheet" href="stylesheets/global.sass">
如果您的网页位于http://example.com/index.html，则浏览器会查找http://example.com/stylesheets/global.sass。
但如果您的网页位于http://example.com/blogs/2013/03/20/blogpost.html，则浏览器会查找http://example.com/blogs/2013/03/20/stylesheets/global.sass
现在，解决方案......
如果在路径的开头添加斜杠，则将该相对路径设置为webroot相对路径。 Web浏览器将开始在webroot中查找文件...
<link rel="stylesheet" href="/stylesheets/global.sass">
因此，无论您的网页位于http://example.com/index.html，http://example.com/blogs/2013/03/20/blogpost.html还是http://example.com/a/b/c/d/e/f/g/h/i/j/k/l/m/n/o/p/page.html，浏览器都会在http://example.com/stylesheets/global.sass处查找该文件。< / p>
Adobe Dreamweaver documentation on linking and navigation更完整地解释了这一点。