如何在静态站点中创建根相对链接？答案

【问题标题】：How do I create root-relative links in a static site?如何在静态站点中创建根相对链接？
【发布时间】：2012-04-29 11:10:11
【问题描述】：

在构建静态 HTML 站点时，您可以像这样设置基本 url <base url="http://localhost:8888/mysite" />。假设当您插入图像时，您可以从该基本 url 执行此操作，例如 <img src="/img/logo.png" />，相当于 <img src="http://localhost:8888/mysite/img/logo.png" />

我的问题是，当我移动网站时，这些相对链接不起作用，这很痛苦，因为我试图与 Dropbox 上的某人共享它。我以为我可以将基本 URL 更改为 <base url="http://dl.dropbox.com/u/xxxxxxxx/mysite" />，但图片链接在这里：<img src="http://dl.dropbox.com/img/logo.png" /> 而不是我在头部设置的完整基本 URL。

这是为什么？

【问题讨论】：

你为什么不直接删除那个奇怪的<base url 并移动主文件夹...？（因为它不是一个动态站点，所以我不明白......你的基本网址是你当前文件所在的那个......）
我也是这么想的，但是如果我删除基本标签并将我的网站拖到桌面等任意文件夹并将鼠标悬停在链接上，它会在http://localhost/assets/img 中查找它。它应该类似于~/Desktop/website_folder/assets/img。
无论我在站点中处于什么层次，我都希望能够调用来自/assets/img/foo.png 的图像。如果我将每个页面都视为自己的基础，我将不得不创建相对链接并且不得不担心这种情况：../../../../../assets/img/foo.png。

标签： html url root relative-path middleman

【解决方案1】：

去掉前导的/ 使其成为相对 URL：

<img src="img/logo.png" />

有 3 种类型的 URL：

完全合格，例如http://example.org/path/to/file
绝对的，例如/path/to/file（假设链接来自 example.org 域中的任何页面）
相对，例如path/to/file（假设链接来自根（/）“文件夹”或者有一个基本 URL http://example.org/）或 to/file（假设链接来自“路径”“文件夹”或基本 URL 为 http://example.org/path/）

【讨论】：

在创建具有复杂层次结构的站点时，使用相对 URL 会变得更加糟糕。根据页面的不同，我将不得不使用path/to/file 或../path/to/file 或../../path/to/file，这是我想避免的。我使用Middleman 作为静态站点生成器来拉入主导航的链接，因此他们需要查看站点每个页面上的名称。
我一直听说带有前导斜杠 (/) 的 url 称为 root relative url。此外，还有protocol relative（有时称为scheme relative）url：<script src="//domain.com/...
@sea_monster 您可以使用<base> 标签来解决该特定问题：在每个页面中使用相同的基本网址，然后使用“img/logo.png”，然后每页进行一次编辑移动网站。
谢谢，tobyodavies，解决了我的问题。设置基本 URL 时，您需要确保您的资产前不包含前导 (/)。

【解决方案2】：

我知道我玩这个游戏有点晚了，但你真的应该在这里使用 Rails 资产标签而不是原始 HTML。

例如，而不是使用：

<img src="/img/logo.png" />

你应该使用：

<%= image_tag 'logo.png' %>

假设：

您正在为源页面使用 .erb 文件
您已在 config.rb 文件中将图像资产路径设置为 /img/

或者，您可以通过以下方式引用 CSS：

<%= stylesheet_link_tag 'file.css' %>

Javascript 文件可以包含在：

<%= javascript_include_tag 'file.js' %>

由于 Middleman 允许您控制资产是否被相对引用（通过取消注释 config.rb 中的某些行），使用 Rails 资产标签比静态 HTML 更有意义。如果您还没有这样做，我强烈建议您切换。如果您对这些标签或 ERB 语法还有任何疑问，请随时在此处提问！

【讨论】：