0

我开始使用 middleman-blog 扩展构建一个带有 Middleman 的博客。到目前为止，主页上的一切都运行良好。当我单击链接以查看完整的博客文章时，就会出现问题。完整的博客文章页面没有应用任何 CSS。经过进一步检查，我收到 404 错误。我通过在我的 CSS 链接 href 中向上移动 3 个级别来修复它在开发工具上，如下所示：

之前（在主页中工作，但不在文章页面中）

<link rel="stylesheet" href="stylesheets/global.sass">

之后（向上移动两个级别不再给我 404）

<link rel="stylesheet" href="../../../stylesheets/global.sass">

我的问题是：我需要修改什么以便文章页面在主页保持不变的情况下查找 CSS 3 级别？

4

1 回答 1

1

在您的情况下，最简单的方法是使用 webroot-relative 路径。

回顾一下，您使用的是常规相对路径...

<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.

Adobe Dreamweaver 有关链接和导航的文档对此进行了更完整的解释。

于 2013-03-20T16:29:03.880 回答