製作網站時不同的頁面常有重複的header和footer,若每寫一個頁面就要重新複製一次其實滿麻煩的,而且程式碼也變得冗長,下面提供一個使用JS在各頁面上引入Layout的方法!!
JQuery 方法
先將會共用的 header 與 footer 分別出檔案
header.html
&footer.html
裡面只需要直接寫區塊即可JS方法
通過load()函式,引入公共頭部和尾部檔案;
程式碼預覽:$(".headerpage").load("header.html"); $(".footerpage").load("footer.html");
- 在每頁載入方法
<body> <!-- header --> <div class="headerpage"></div> <!--main--> <!--main-end-> <!--footer--> <div class="footerpage"></div> </body>
JavaScript 方法
將HTML轉成JavaScript,然後在Html的地方引用JavaScript。
- 將HTML轉成JavaScript
使用工具:http://www.andrewdavidson.com/。
並將轉換的格式存成JS檔 - 引用 JavaScript
將這段文字另存為 xxx.js,並且貼在個個頁面中原本放置標籤的位置:<script type=”text/javascript” src=”xxx.js”></script>