Question

构建静态HTML网站时，您可以设置基本网址，如<base url="http://localhost:8888/mysite" />。据说，当你插入一个图像时，你可以从那个<img src="/img/logo.png" />这样的基本网址这样做，这相当于<img src="http://localhost:8888/mysite/img/logo.png" />

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

为什么会这样？

Answer 1

丢失前导/以使其成为相对网址：

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

有三种类型的网址：

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

Answer 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语法有任何疑问，请随时在此处提出要求！

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

2 个答案: