網頁成果github:https://github.com/fcu-d0440478/user_experience_result
基於個資已經將個人及組員相關連結移除
使用Navbar時，經常會做出多個分頁，但Navbar內容幾乎每頁都會用，要修改時就要每一頁都修改，非常麻煩。今天介紹透過JavaScript引入重複的HTML。且分享一下成果~
假設我要每頁都用這個Navbar
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
...詳情請見github
</nav>
1.把這著Navbar的HTML程式碼複製並獨立檔案，檔名自訂我這取叫header.js。副檔名用js。
2.自訂一個變數header，用''包住原本的Navbar HTML，記得加; 就是宣告這header是我們的Navbar
3.然後就會看到各種出錯，因為環境是javascript所以用把所有html的部分加\註解掉，每行後面都要!
4.最後document.write(header); document就是呼叫這javascript的HTML網頁.write會寫入裡面的參數header，也就是我們的Navbar部分
header ='<nav class="navbar navbar-expand-md bg-dark navbar-dark">\
<a class="navbar-brand" href="index.html">Home</a>\
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">\
<span class="navbar-toggler-icon"></span>\
</button>\
<div class="collapse navbar-collapse" id="collapsibleNavbar">\
<ul class="navbar-nav">\
<li class="nav-item">\
<a class="nav-link" href="page_noodle.html">麵類</a>\
</li>\
<li class="nav-item">\
<a class="nav-link" href="page_rice.html">飯類</a>\
</li>\
<li class="nav-item">\
<a class="nav-link" href="page_drink.html">飲料</a>\
</li>\
</ul>\
<ul class="navbar-nav ml-auto mr-5">\
<li class="nav-item dropdown">\
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">\
組員名單\
</a>\
<div class="dropdown-menu">\
<a class="dropdown-item" href="">STAN 41號</a>\
<a class="dropdown-item" href="">YUN 23號</a>\
</div>\
</li>\
</ul>\
</div>\
</nav>';
document.write(header);
5.接著在我們需要寫入的地方(要寫在開頭也就是<body>的第一行)加這行。src放檔案位置和檔名，不同位置要導入一下路徑。
<script src="./scripts/header.js"></script>
6.每頁的body第一行都加這個就都有Navbar了。以後修改也只要改一個檔案。
相關圖
終於完賽了，其實我還沒有時間好好做這個，天阿我明天之後才是最閒的，為甚麼都挑我最忙的時候做，最閒就結束了
感謝大家的觀看，每天多這個真的超累的=.=
iThome鐵人賽
看影片追技術