Có cách nào phân chia layout trong html - include file header footer html

2021-08-20 3136 lượt xem

Cao thị ngọc lan

Mục lục [ hide ]

Bài viết này tập trung chủ yếu và vấn đề cách includes file header footer của 1 html vào 1 html khác. Tức là bạn muốn sử dụng lại header footer trong html thì thật khó nếu bạn muốn.
Đây là 1 ví dụ cụ thể mà bạn thường gặp phải khi code html:


...
<body>
   <include src="./header.html"></include>

   Content

   <include src="./footer.html"></include>
</body>
...

Nói tóm lại nếu chỉ code html đơn thuần thì nó không thể làm theo như trên mà thay vào đó bạn phải tìm ra 1 con đường khác.

1. IQ 69 - sử dụng ajax

Giả sử bạn có html như sau: 
<body>
  
  <header></header>
  
  Content.
  
  <footer></footer>

</body>

thì bạn có thể tìm nạp nội dung cho header, footer từ các file tương ứng và nhúng nó vào html:

fetch("./header.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("header").innerHTML = data;
  });

fetch("./footer.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("footer").innerHTML = data;
  });

Cách này là bố của Bug. Bug bất tận nếu bạn có set vài sự kiện jquery cho dom mà không thông qua javascript hàm 😄

Thôi tìm cách khác 😄

2. IQ 70 - xài iframes

<body>
  
  <iframe src="./header.html"></iframe>
  
  Content.
  
  <iframe src="./footer.html"></iframe>
  
</body>

Cách này thì bố của lầy, mặc dù giải quyết đc vấn đề set jquery js nhưng iframes cũng là html body mới nên bõ đi mà làm người.

3. IQ 71 - Xài Apache SSI

Apache có 1 cơ chế include giùm nên việc bạn viết code có dùng Apache thì nó sẽ support cho bạn như sau:

<body>
        
 <!--#include file="./header.html" -->
  
  Content
  
  <!--#include file="./footer.html" -->
  
</body>

Nhưng không chỉ thế bạn còn cần cấu hình Apache để cho phép include:

Options +Includes

AddType text/html .html
AddOutputFilter INCLUDES .html

Rồi thì nếu bạn phải cấu hình Apache thì bạn cũng có ngôn ngữ back end ví dụ PHP, java, ... Thì cớ sao phải cấu hình Apache nữa.
MẶt khác, Sẽ rất "tuyệt vời" nếu đứa khác clone html của bạn về mà còn phải config 1 nùi mới chạy được. Như thế nó chắc sẽ vui lắm 😄

4. IQ 100 - Xài CodeKit

CodeKit có 90% giống HTML. nó là công cụ để build html mà không cần config. Khuyết điểm là chỉ có trên máy mac 😄 Thử nghĩ xem nếu công ty bạn có 1 đứa xài windows chắc nó đấm bạn không trượt phát lào.

5. IQ 110 - Xài Dreamweaver

Riêng tôi không thích Dreamweaver cho lắm. Nó chết xặc máu từ hồi xửa hồi xưa rồi nên thôi chúng ta cũng không nên quay về thời cổ đại code làm gì. Nói chung là cái Dreamweaver này dành cho nhưng ai thích nghĩ về hoài niệm.
MẶt khác nếu công ty bạn có đứa không cài Dreamweaver thì nó sẽ vui lắm khi bạn cứ xài đồ cũ mà nó thì cứ cà khịa bạn 😄

6 - IQ 200 - Không thèm html mà chuyển qua Pug

Pug nó là 1 HTML preprocessor. Nghĩa là tiền xử lý html để đưa ra thực tế sử dụng. Cú fáp ngắn gọn hơn HTML:

...
body
   include ./header.html"

   p Content

   include ./footer.html"

   ...

Điểm hạn chế vẫn cần 1 cái gì đó đi kèm ví dụ như gulp để biên dịch nó.

7 - IQ vô cực - Gulp - grunt - webpack

Nếu bạn đã dùng Pug vẫn phải xài gulp thì sao không xài gulp luôn cho nó lẹ? Vâng và chúng ta hoàn toàn làm được 1 cách dễ dàng :
gulp-file-include

...
<body>
   @@include('./header.html')

   Content

   @@include('./footer.html')
</body>
...

Ngoài ra gulp còn có thể biên dịch được cả sass, es6 😄 quá ngon luôn.

Chia teamplate html sử dụng gulp header footer layout

Tiện đây mình nói luôn là grunt cũng như gulp thôi nên bạn thích xài đứa nào thì xài 1 đứa

8 - IQ ngân hà - Dùng mợ nó ngôn ngữ backend

Không lẽ bây giờ bạn code html css js xong rồi thôi ? bạn không làm code backend à ? nếu có thì xài back end nữa chứ 😄 khi đó xài ngôn ngữ back end mà chia.
Giả sử xài PHP thì như sau:

...
<body>
   <?php include "./header.php" ?>

   Content

   <?php include "./footer.php" ?>
</body>
...

9 - IQ -Captain America

Xài framework front end, nếu bạn dùng vuejs, react, angular, .... sẽ chia được nhé 😄

chủ đề

kiến thức front-end

2021-01-03

Chủ đề này chuyên nói về kiến thức front end.

những tag

front-end developer

2020-09-13

excerpt front-end developer

bài viết trong chủ đề

Ebudezain

Khi bạn code html css chay thì thật may mắn là html không thể support cho bạn việc phân chia layout header footer 1 cách đơn thuần. Và bài viết này chắc là giúp được bạn trong vấn đề trên.

Có cách nào phân chia layout trong html - include file header footer html

1. IQ 69 - sử dụng ajax

2. IQ 70 - xài iframes

3. IQ 71 - Xài Apache SSI

4. IQ 100 - Xài CodeKit

5. IQ 110 - Xài Dreamweaver

6 - IQ 200 - Không thèm html mà chuyển qua Pug

7 - IQ vô cực - Gulp - grunt - webpack

8 - IQ ngân hà - Dùng mợ nó ngôn ngữ backend

9 - IQ -Captain America

2021-01-03

2020-09-13

2021-01-19

2022-02-09

2021-01-07

2021-01-25

2021-01-25

2021-08-20

2021-08-23

2021-01-26

2021-11-12

2021-08-24

2021-01-26

2022-04-11

2021-01-26

2020-12-30

2022-05-03

2020-12-18

2021-01-07

2021-01-02

2021-01-04

2021-08-23

2021-03-01

2020-09-30

2020-12-17

2021-07-20

2020-09-30

Ebudezain blog - chia sẽ kiến thức lập trình

0674, Xã Bình Giã,Huyện Châu Đức Tỉnh Bà Rịa - Vũng Tàu,Việt Nam