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

How do I create root-relative links in a static site?

提问by sea_monster

When building a static HTML site, you can set the base url like so <base url="http://localhost:8888/mysite" />. Supposedly when you insert, say, an image, you can do so from that base url like so <img src="/img/logo.png" />, which is equivalent to <img src="http://localhost:8888/mysite/img/logo.png" />

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

My problem is that these relative links don't work when I move the site around, which is a pain because I'm trying to share it with someone on Dropbox. I thought I could just chage the base url to <base url="http://dl.dropbox.com/u/xxxxxxxx/mysite" />, but the image links are looking here: <img src="http://dl.dropbox.com/img/logo.png" />instead of the full base URL I set in the head.

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

Why is this?

为什么是这样？

回答by tobyodavies

Lose the leading /to make it a relative URL:

丢失前导/使其成为相对 URL：

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

There are 3 types of URL:

URL 有 3 种类型：

• Fully Qualified, e.g. http://example.org/path/to/file

• Absolute, e.g. /path/to/file(assuming the link comes from any page in the example.org domain)

• Relative, e.g. path/to/file(assuming the link comes from the root (/) "folder" or there is a base URL http://example.org/) or to/file(assuming the link comes from within the 'path' "folder" or the base URL is http://example.org/path/)

• 完全合格，例如 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/）

回答by Ray Brown

I'm aware that I'm a little late to the game on this one, but you should really be using Rails asset tags instead of raw HTML here.

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

For instance, instead of using:

例如，而不是使用：

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

You should use:

你应该使用：

<%= image_tag 'logo.png' %>

Assuming that:

假如说：

1. You're using .erb files for your source pages
2. You've set the image asset path to /img/in your config.rb file

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

Alternately, you could reference CSS with:

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

<%= stylesheet_link_tag 'file.css' %>

Javascript files can be included with:

Javascript 文件可以包含在：

<%= javascript_include_tag 'file.js' %>

Since Middleman allows you to control whether or not assets are referenced relatively (by uncommenting some lines in config.rb), using Rails asset tags make much more sense than static HTML ones. I highly recommend switching if you haven't already done so. If you have any further questions about ay of these tags or the ERB syntax, feel free to ask away on here!

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