[HTML]把header做成template

最近在做純靜態的網站,沒有引入Vue或其他的框架,每一次新的頁面的<header>都從第一頁複製,在新的頁面貼上,一旦內容要做變更,我就必須再次複製貼上…

覺得這樣的方式實在太蠢了!

後來想到可以用JS的方式放入HTML,只要在不同的頁面抓到標籤是id=header就好了。(同理,footer也可以這樣做)

index.html
1
2
3
4
5
6
7
8
<body>
<header id="header"></header>
<div>
你好這是首頁
</div>
<footer id="footer"></footer>
<script src="script.js"></script>
</body>
user.html
1
2
3
4
5
6
7
8
<body>
<header id="header"></header>
<div>
你好這是使用者頁
</div>
<footer id="footer"></footer>
<script src="script.js"></script>
</body>
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
/* header的樣板 */
let header = `<div class="nav">
<div class="nav-item">
<a href="index.html">首頁</a>
</div>
<div class="nav-item">
<a href="index.html">使用者頁</a>
</div>
</div>`

document.getElementById('header').innerHTML = header

// 同理,footer也可以這樣做

參考:
模板字符串