如何簡單在各頁面引入靜態html Layout


Posted by hoyi-23 on 2021-06-16

製作網站時不同的頁面常有重複的header和footer,若每寫一個頁面就要重新複製一次其實滿麻煩的,而且程式碼也變得冗長,下面提供一個使用JS在各頁面上引入Layout的方法!!


JQuery 方法

  1. 先將會共用的 header 與 footer 分別出檔案
    header.html & footer.html
    裡面只需要直接寫區塊即可

  2. JS方法
    通過load()函式,引入公共頭部和尾部檔案;
    程式碼預覽:

    $(".headerpage").load("header.html"); 
    $(".footerpage").load("footer.html");
    
  3. 在每頁載入方法
    <body>
    <!-- header -->
    <div class="headerpage"></div>
    <!--main--> 
    <!--main-end-> 
    <!--footer-->  
    <div class="footerpage"></div>
    </body>
    

JavaScript 方法

將HTML轉成JavaScript,然後在Html的地方引用JavaScript。

  1. 將HTML轉成JavaScript
    使用工具:http://www.andrewdavidson.com/。
    並將轉換的格式存成JS檔
  2. 引用 JavaScript
    將這段文字另存為 xxx.js,並且貼在個個頁面中原本放置標籤的位置:
    <script type=”text/javascript” src=”xxx.js”></script>
    









Related Posts

JavaScript this Keyword

JavaScript this Keyword

Event Loop 運行機制解析 - Node.js 篇

Event Loop 運行機制解析 - Node.js 篇

forEach 和 for迴圈

forEach 和 for迴圈


Comments