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

Question

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

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

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

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

有没有办法更改所有链接以向后查看一个文件夹等，或者我是否必须使用 javascript 更改每个引用图像的 src 属性？

Answer 1

添加 <base>元素添加到您的 info.html 并将其设置为 href计算页眉和页脚标记的相对链接。

例如，如果您的网站托管在 http://example.com/foo您的相关链接例如 ./images/xyz.jpg ，info.html 的基本元素如下所示:

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

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

---

另一个选项是配置相对 URL 以从根获取资源。

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

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

...你可以使用

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

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

优点是这也可以轻松进行本地测试。