為帶有文件夾的網站制作通用頁眉和頁腳

Question

我想為每個網頁創建一個具有通用頁眉和頁腳的網站，目前正在使用此處提供的答案。

但是，我有一個網站，其樹形圖類似於：

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

在我的 header 和頁腳文件中，有多個（相對）鏈接，例如指向圖像源、其他頁面等的鏈接，這意味着雖然它們可以在 index.html 中工作，但如果我嘗試將其加載到 info.ZFC35FDC70D5FC69D25EZ8C 中，鏈接會中斷 A82728C， .

有什么方法可以更改所有鏈接以查看一個文件夾等，還是我必須使用 javascript 來更改每個引用圖像的src屬性？

Answer 1

將<base>元素添加到您的 info.html 並使其href與您的 header 和頁腳標記的相對鏈接相匹配。

例如，如果您的網站托管在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">

因此，無論從哪里執行，瀏覽器都會從根目錄開始相對路徑。

優點是這也可以輕松進行本地測試。

Answer 2

您可以在info.html文件的<head>標記中使用<base>標記和href屬性。

<base>標記指定文檔中所有相對 URL 的基本 URL 和目標。

<base>標記必須具有 href 或 target 屬性，或兩者兼有。

文檔中只能有一個<base > 元素，並且必須在<head>元素內。

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

Answer 3

這基本上就是<base>元素的用途。 您將它包含在文檔中並指定一個 href，從中解析所有相關鏈接/url。