如何在静态网站中创建根相对链接？

Question

当构建一个静态HTML网站时，可以像这样设置基本URL：<base url="http://localhost:8888/mysite" />。假设插入一个图像，可以通过该基本URL进行插入，例如：<img src="/img/logo.png" />，这等同于 <img src="http://localhost:8888/mysite/img/logo.png" />。

我的问题是，当我移动网站时，这些相对链接不起作用，这很麻烦，因为我想通过Dropbox与别人分享。我原以为只需将base url更改为<base url="http://dl.dropbox.com/u/xxxxxxxx/mysite" />，但图像链接看起来像这样：<img src="http://dl.dropbox.com/img/logo.png" />而不是我在head中设置的完整基本URL。

这是为什么呢？

- sea_monster

---

为什么不直接删除那个奇怪的<base url>，然后将主文件夹移动到其他地方呢？（因为它不是一个动态网站，我不明白...你的基本URL是当前文件所在的位置...） - Dr.Kameleon

这也是我想的，但如果我删除基本标签并将我的网站拖到像桌面这样的任意文件夹上，并悬停在链接上，它会在http://localhost/assets/img中查找。应该是类似于~/Desktop/website_folder/assets/img的东西。 - sea_monster

无论我在网站的哪个层级，我都希望能够从 /assets/img/foo.png 调用图像。如果我将每个页面视为自己的基础，则必须创建相对链接并担心这种情况：../../../../../assets/img/foo.png。 - sea_monster

Answer 1

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

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

URL有三种类型：

• 完全限定型，例如http://example.org/path/to/file

• 绝对路径，例如/path/to/file（假设链接来自于example.org域名下的任意页面）

• 相对路径，例如path/to/file（假设链接来自于根目录(/)或有一个基础URLhttp://example.org/） 或to/file（假设链接来自于'path'文件夹内部或者基础URL是http://example.org/path/）

- tobyodavies

---

当创建一个具有复杂层次结构的网站时，使用相对URL会变得更加棘手。根据页面，我必须使用 path/to/file 或 ../path/to/file 或 ../../path/to/file，这是我想避免的。我正在使用 Middleman 作为静态网站生成器来拉取主导航链接，因此它们需要在站点的每个页面上看起来都一样。 - sea_monster

我一直听说过带有前导斜杠（/）的URL被称为“根相对URL”。此外，还有“协议相对”（有时称为方案相对）的URL：<script src="//domain.com/... - steveax

@sea_monster 你可以使用<base>标签来解决这个特定的问题：在每个页面上都有相同的基本URL，然后使用`img/logo.png'，这样在移动站点时每个页面只需要进行一次编辑。 - tobyodavies

谢谢，tobyodavies，你解决了我的问题。当你设置基础URL时需要确保你的资源文件前面不要包含前导符(/)。 - sea_monster

Answer 2

我知道我来晚了，但是你真的应该使用Rails资产标签而不是原始HTML。

例如，不要使用：

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

您应该使用：

<%= image_tag 'logo.png' %>

假设以下情况：

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

或者，您可以使用以下CSS引用：

<%= stylesheet_link_tag 'file.css' %>

Javascript文件可以通过以下方式包含：

<%= javascript_include_tag 'file.js' %>

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

- Ray Brown