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

在构建静态HTML站点时，可以像这样设置基本url

。假设当您插入（比如）一个图像时，您可以从基本url这样做，就像这样

，这相当于

我的问题是，当我移动网站时，这些相对链接不起作用，这是一种痛苦，因为我试图与Dropbox上的某个人共享它。我想我可以将基本url更改为

，但是图像链接显示在这里：

，而不是我在头部设置的完整基本url

---

这是为什么？

丢失前导的

/

，使其成为相对URL：

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

URL有3种类型：

• 完全合格，例如

  http://example.org/path/to/file

• 绝对，例如

  /path/to/file

  （假设链接来自example.org域中的任何页面）

• 相对，例如

  path/to/file

  （假设链接来自根（

  /

  ）“文件夹”或存在基本URL

  http://example.org/

  ） 或

  到/file

  （假设链接来自“路径”文件夹或基本URL是

  http://example.org/path/

  ）

---

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

例如，不使用：

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

Javascript文件可以包含在以下文件中：

<%= javascript_include_tag 'file.js' %>

---

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

你为什么不干脆消除那种奇怪的

我也是这么想的，但是如果我删除基本标签，将我的网站拖到桌面这样的任意文件夹中，并将鼠标悬停在链接上，它就会在
中查找它http://localhost/assets/img
。它应该类似于
~/Desktop/website\u folder/assets/img
。无论我在站点中处于什么层次，我都希望能够从
/assets/img/foo.png
调用图像。如果我将每个页面视为自己的基础，我将不得不创建相对链接，并且不得不担心这种情况：
。/../../../../../../../assets/img/foo.png
。在创建具有复杂层次结构的网站时，使用相对URL会变得更加糟糕。根据页面的不同，我必须使用
path/to/file
或
。/path/to/file
或
。/../path/to/file
，这是我希望避免的。我正在使用静态站点生成器为主导航引入链接，因此它们需要在站点的每个页面上查找名称。我一直听说URL带有前导斜杠（
/
），称为根相对URL。此外，还有协议相关（有时称为方案相关）url:
@sea_monster您可以使用
标记来解决特定问题：在每个页面中有一个相同的基本url，然后使用'img/logo.png'，然后每页编辑一次来移动站点。谢谢，Tobyovies，这解决了我的问题。设置基本URL时，需要确保在资源之前不包含前导（
/
）。
<%= stylesheet_link_tag 'file.css' %>

<%= javascript_include_tag 'file.js' %>