iT邦幫忙

0

靜態網頁 header 和 footer 疑問

請問怎麼讓靜態網頁的 header 和 footer 只需要改一個檔案,其他檔案就就可以一起更動?
因為假如我有10個檔案,程式碼裡都放一樣的 header 和 footer ,結果今天我想改 header 的文字或連結,就需要一次改10個耶....

我試過把這10個檔案要放 header 和 footer 的位置留空位,再把 header 和 footer 分別存成 html 檔,再利用 I frame 嵌入的方式加到我的網頁檔裡,但我嵌入的位置顯示404錯誤。

想知道我使用的方法是可行的只是可能哪裡寫錯了,還是有其他的方法比較好呢?

firecold iT邦新手 1 級 ‧ 2021-11-19 10:34:13 檢舉
貼個demo 程式碼吧
問題已解決囉~ 感謝您~

2 個回答

6
海綿寶寶
iT邦大神 1 級 ‧ 2021-11-19 10:36:59
最佳解答

參考這篇
然後寫類似這樣

<html>
<div w3-include-html="header.html"></div>
...
<div w3-include-html="footer.html"></div> 
</html>

感謝海綿寶寶解惑
因為英文文件看不太懂
我用您提供的網址內文標題 google 到 這篇 並照著做
順利解決問題囉!
非常感謝您提點~ /images/emoticon/emoticon41.gif

1

基本來說這些事大多是運用後端語言來幫忙處理的。
也就是搭配了VIEW的觀念。

各處理的方式不太一樣。
純PHP來說大多是用 include

有些是利用了樣板幫忙處理

@include xxx.html

<include src="xxx.html">

如果要利用前端框架也是可以做到這些事。
這部份有使用框架的人會知道,我就不重覆說明。

就純html要做到這些事。大多數來說就是利用了「海綿寶寶」說的方式。
也可以利用 w3schools那邊寫好的 w3 來做到同樣的事。

<head>
<script src="https://www.w3schools.com/lib/w3.js"></script>
</head>
<div w3-include-html="nav.html"></div>
<script>
    w3.includeHTML();
</script>

感恩㊣浩瀚星空㊣的解答~ /images/emoticon/emoticon41.gif

我要發表回答

立即登入回答