Cách bao gồm đầu trang và chân trang trong tệp HTML mà không cần PHP

Bạn cần một ngôn ngữ phía máy chủ. Tôi đã làm một số nghiên cứu về điều này trước đây. CSS không cho phép bạn làm điều này và mặc dù bạn có thể sử dụng iFrame nhưng nó không thực sự là công cụ được khuyên dùng nhất. Vì vậy, về mặt tiêu chuẩn, bạn nên sử dụng ngôn ngữ phía máy chủ hoặc cách khác, bạn có thể sử dụng một CMS thực hiện tất cả điều này cho bạn

Làm điều này bằng tay là khủng khiếp, tin tôi đi. Tôi đã làm điều đó một lần trên một trang web và nó nhanh chóng trở nên không thể quản lý được. Làm thế nào lớn là trang web đề xuất của bạn? . Chà, dù sao cũng không dành cho tôi

Thí dụ

Một tiêu đề cho một

About

Work

Contact

`; } } customElements.define['header-component', Header]; thành phần/tiêu đề. js

Sau đó, trong

5, thêm tập lệnh

6 và

5 ngay phía trên phần tử

8

const template = document.getElementById['welcome-msg'];

document.body.appendChild[template.content];

0chỉ mục. html

Và thành phần tiêu đề có thể tái sử dụng của bạn sẽ được hiển thị trên trang

About

Work

Contact

`; } } customElements.define['header-component', Header]; 1 như trong đoạn mã ở trên

#1. Liên kết đến Phông chữ Tuyệt vời trong Thành phần của bạn

Cách đơn giản nhất để Font Awesome hoạt động trong thành phần Shadow DOM của bạn là thêm một

class Header extends HTMLElement {
  constructor[] {
    super[];
  }

  connectedCallback[] {
    this.innerHTML = `
      
        nav {
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color:  #0a0a23;
        }

        ul {
          padding: 0;
        }
        
        a {
          font-weight: 700;
          margin: 0 25px;
          color: #fff;
          text-decoration: none;
        }
        
        a:hover {
          padding-bottom: 5px;
          box-shadow: inset 0 -2px 0 0 #fff;
        }
      
      
        
          

            
About
            
Work
            
Contact
          
        
      
    `;
  }
}

customElements.define['header-component', Header];

1 vào nó trong chính thành phần đó

const template = document.getElementById['welcome-msg'];

document.body.appendChild[template.content];

8thành phần/chân trang. js

Một điều cần lưu ý là, mặc dù có vẻ như bạn đang khiến trình duyệt tải Font Awesome hai lần [một lần cho DOM chính và một lần nữa cho thành phần], các trình duyệt đủ thông minh để không tìm nạp lại cùng một tài nguyên

Đây là tab mạng cho thấy rằng Chrome chỉ tải xuống Phông chữ tuyệt vời một lần

About

Work

Contact

`; } } customElements.define['header-component', Header]; 3 và

class Header extends HTMLElement {
  constructor[] {
    super[];
  }

  connectedCallback[] {
    this.innerHTML = `
      
        nav {
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color:  #0a0a23;
        }

        ul {
          padding: 0;
        }
        
        a {
          font-weight: 700;
          margin: 0 25px;
          color: #fff;
          text-decoration: none;
        }
        
        a:hover {
          padding-bottom: 5px;
          box-shadow: inset 0 -2px 0 0 #fff;
        }
      
      
        
          

            
About
            
Work
            
Contact
          
        
      
    `;
  }
}

customElements.define['header-component', Header];

4 để tải Font Awesome vào thành phần của mình

const template = document.getElementById['welcome-msg'];

document.body.appendChild[template.content];

9

Lưu ý rằng URL phải giống với URL bạn đang sử dụng trong

5

#3. Sử dụng JavaScript để tự động tải phông chữ tuyệt vời cho thành phần của bạn

Cuối cùng, cách DRYest để tải Font Awesome trong thành phần của bạn là sử dụng một chút JavaScript

0thành phần/chân trang. js

Phương pháp này dựa trên câu trả lời này trên Stack Overflow và hoạt động khá đơn giản. Khi thành phần tải, nếu tồn tại một phần tử

class Header extends HTMLElement {
  constructor[] {
    super[];
  }

  connectedCallback[] {
    this.innerHTML = `
      
        nav {
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color:  #0a0a23;
        }

        ul {
          padding: 0;
        }
        
        a {
          font-weight: 700;
          margin: 0 25px;
          color: #fff;
          text-decoration: none;
        }
        
        a:hover {
          padding-bottom: 5px;
          box-shadow: inset 0 -2px 0 0 #fff;
        }
      
      
        
          

            
About
            
Work
            
Contact
          
        
      
    `;
  }
}

customElements.define['header-component', Header];

1 trỏ đến Phông chữ tuyệt vời, thì phần tử đó sẽ được sao chép và nối vào Shadow DOM của thành phần đó

Mã cuối cùng

Đây là mã cuối cùng trên tất cả các tệp trông như thế nào và sử dụng phương pháp #3 để tải Phông chữ Tuyệt vời vào thành phần chân trang

const template = document.getElementById['welcome-msg'];

document.body.appendChild[template.content];

1chỉ số. html

2phong cách. css

3thành phần/tiêu đề. js

4thành phần/chân trang. js

Kết thúc

Chúng tôi đã đề cập rất nhiều ở đây và bạn có thể đã quyết định chỉ sử dụng React hoặc Handlebars. thay vào đó là js

Đó là cả hai lựa chọn tuyệt vời

Tuy nhiên, đối với một dự án nhỏ hơn, nơi bạn chỉ cần một vài thành phần có thể tái sử dụng, toàn bộ thư viện hoặc ngôn ngữ tạo khuôn mẫu có thể là quá mức cần thiết

Hy vọng rằng bây giờ bạn đã tự tin để tạo các thành phần HTML có thể tái sử dụng của riêng mình. Bây giờ hãy ra khỏi đó và tạo ra thứ gì đó tuyệt vời [và có thể tái sử dụng]

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Kris Koishigawa

Đọc thêm bài viết

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm cách nào để bao gồm đầu trang và chân trang trong tệp HTML bằng PHP?