为带有文件夹的网站制作通用页眉和页脚答案

【问题标题】：Make common headers and footers for website with folders为带有文件夹的网站制作通用页眉和页脚
【发布时间】：2020-07-04 05:41:19
【问题描述】：

我想为每个网页创建一个带有通用页眉和页脚的网站，目前正在使用here 提供的答案。

但是，我有一个网站，其树形图类似于：

- index.html
- header.html
- footer.html
- folder
    - info.html

在我的页眉和页脚文件中，有多个（相对）链接，例如图像源、其他页面等，这意味着虽然它们可以在 index.html 中工作，但如果我尝试将其加载到 info.html 中，链接断开。

有什么方法可以更改所有链接以查看一个文件夹等，还是我必须使用 javascript 更改每个引用图像的 src 属性？

【问题讨论】：

我可以看看你的代码吗？
如果你使用 root relative 路径，你也可以避免这个问题。一个领先的/ 告诉浏览器从站点的根目录开始。因此，如果您有一个 images 文件夹，则路径 /images/someImage.jpg 在您的 folder/info.html 中的工作方式与在 index.html 中的工作方式相同

【解决方案1】：

将<base> 元素添加到您的info.html 并使其href 与您的页眉和页脚标记的相对链接相匹配。

例如，如果您的网站托管在 http://example.com/foo 并且您的相对链接是 ./images/xyz.jpg，那么 info.html 的基本元素将是这样的：

<base href="http://example.com/foo">

浏览器将从那里组成相对网址。

另一种选择是配置您的相对网址以从根目录获取资源。

在上面的配置中，而不是这个：

<img src="./images/xyz.jpg">

...你可以使用

<img src="/foo/images/xyz.jpg">

因此，无论从哪里执行，浏览器都会从根目录开始相对路径。

这样做的好处是也可以轻松进行本地测试。

【讨论】：

【解决方案2】：

您可以在info.html 文件的<head> 标记中使用<base> 标记和href 属性。

<base> 标记指定文档中所有相对 URL 的基本 URL 和目标。

<base> 标记必须具有 href 或 target 属性，或两者兼有。

文档中只能有一个<base> 元素，并且必须在<head> 元素内。

您可以在此example 中找到更多信息。

【讨论】：

【解决方案3】：

这基本上就是<base> 元素的用途。您将它包含在文档中并指定一个 href，从中解析所有相关链接/url。

【讨论】：