Hướng dẫn include file html in html - bao gồm tệp html trong html

W3.js khá tuyệt.

https://www.w3schools.com/lib/w3.js

Và chúng tôi tập trung

w3-include-html

Nhưng hãy xem xét trường hợp dưới đây

- 🧾 popup.html
- 🧾 popup.js
- 🧾 include.js
- 📂 partials 
   - 📂 head
         - 🧾 bootstrap-css.html
         - 🧾 fontawesome-css.html
         - 🧾 all-css.html
   - 🧾 hello-world.html

Hello World

Script

// include.js

const INCLUDE_TAG_NAME = `data-include-html`

/**
 * @param {Element} node
 * @param {Function} cb callback
 * */
export async function includeHTML(node, {
  cb = undefined
}) {
  const nodeArray = node === undefined ?
    document.querySelectorAll(`[${INCLUDE_TAG_NAME}]`) :
    node.querySelectorAll(`[${INCLUDE_TAG_NAME}]`)

  if (nodeArray === null) {
    return
  }

  for (const node of nodeArray) {
    const filePath = node.getAttribute(`${INCLUDE_TAG_NAME}`)
    if (filePath === undefined) {
      return
    }

    await new Promise(resolve => {
      fetch(filePath
      ).then(async response => {
          const text = await response.text()
          if (!response.ok) {
            throw Error(`${response.statusText} (${response.status}) | ${text} `)
          }
          node.innerHTML = text
          const rootPath = filePath.split("/").slice(0, -1)
          node.querySelectorAll(`[${INCLUDE_TAG_NAME}]`).forEach(elem=>{
            const relativePath = elem.getAttribute(`${INCLUDE_TAG_NAME}`) // not support ".."
            if(relativePath.startsWith('/')) { // begin with site root.
              return
            }
            elem.setAttribute(`${INCLUDE_TAG_NAME}`, [...rootPath, relativePath].join("/"))
          })
          node.removeAttribute(`${INCLUDE_TAG_NAME}`)
          await includeHTML(node, {cb})
          node.replaceWith(...node.childNodes) // https://stackoverflow.com/a/45657273/9935654
          resolve()
        }
      ).catch(err => {
        node.innerHTML = `${err.message}`
        resolve()
      })
    })
  }

  if (cb) {
    cb()
  }
}

// popup.js

import * as include from "include.js"

window.onload = async () => {
  await include.includeHTML(undefined, {})
  // ...
}

đầu ra

Hello World

Tôi rất ngạc nhiên khi tôi không bao giờ có cách nào để đưa các tệp HTML khác vào đó vào đó. Dường như cũng không có bất cứ điều gì trên đường chân trời giải quyết nó. Tôi nói về thẳng lên bao gồm, như lấy một khối HTML và đưa nó vào một phần khác. Ví dụ: trường hợp sử dụng cho phần lớn toàn bộ internet, một tiêu đề và chân trang được bao gồm cho tất cả các trang:

...

   

   Content

   

...

Nhân tiện, điều đó không có thật. Tôi chỉ ước nó là.

Mọi người đã tìm kiếm các ngôn ngữ khác để giải quyết vấn đề này cho họ mãi mãi. Theo một nghĩa nào đó, nó HTML tiền xử lý. Rất lâu trước khi chúng tôi xử lý CSS của chúng tôi, chúng tôi đã sử dụng các công cụ để thao túng HTML của chúng tôi. Và chúng tôi vẫn vậy, bởi vì ý tưởng bao gồm là hữu ích trên hầu hết mọi trang web trên thế giới.

Sử dụng PHP

Bạn có thể sử dụng PHP thay thế không?

...

   

   Content

   

...

Điều này sẽ thực hiện bao gồm ở cấp độ máy chủ, thực hiện yêu cầu cho nó xảy ra ở cấp hệ thống tệp trên máy chủ, vì vậy nó sẽ nhanh hơn nhiều so với giải pháp phía máy khách.

Sử dụng Gulp

Những gì thậm chí còn nhanh hơn so với phía máy chủ bao gồm? Nếu bao gồm được xử lý trước khi nó ngay cả trên máy chủ. Gulp có một loạt các bộ xử lý có thể làm điều này. Một là Gulp-File-bao gồm.

Điều đó sẽ như thế này:

Và bạn đã xử lý nó như:

Có vẻ như plugin đặc biệt này có các tính năng ưa thích nơi bạn có thể chuyển theo các biến vào bao gồm, giúp tạo ra các thành phần dựa trên dữ liệu ít.

Sử dụng càu nhàu

Đây là những gì plugin Grunt-Bake làm. Bạn đã định cấu hình Grunt để xử lý HTML của mình:

Sau đó, HTML của bạn có thể sử dụng cú pháp đặc biệt này bao gồm:

Sử dụng tay lái

Tay lái có một phần.

Bạn đăng ký chúng:

Sau đó sử dụng chúng:

Ngoài ra còn có các tính năng ưa thích của điều này cho phép đánh giá và truyền dữ liệu. Bạn vẫn cần một bộ xử lý để chạy nó, có lẽ là một cái gì đó giống như Gulp-Handlebars.

Nói về các ngôn ngữ tạo khuôn mẫu mà sử dụng niềng răng xoăn, bộ ria mép cũng có chúng.

Sử dụng pug

PUG là một bộ tiền xử lý HTML có một cú pháp hoàn toàn mới cho HTML có một chút ngắn gọn hơn một chút. Nó có bao gồm mặc dù.

Sau đó, bạn chạy nó với một cái gì đó như gulp-pug.

Sử dụng Nunjucks

Tôi yêu tôi một số nunjucks! Nunjucks có bao gồm. Bạn làm điều đó như thế này:

Nếu bạn đặt nó vào một tệp có tên

Hoặc xử lý nó với một cái gì đó như gulp-nunjucks.

11ty có Nunjucks tích hợp, cùng với nhiều người khác được đề cập cho đến nay. Có thể tốt cho bạn nếu bạn thực sự xây dựng một trang web nhỏ.

Sử dụng ajax

Nói rằng bạn đã…

Bạn có thể lấy nội dung cho tiêu đề và chân trang từ các tệp tương ứng và đổ các nội dung vào.

Nói về JavaScript, nếu bạn đang xây dựng trang web của mình bằng khung JavaScript dưới bất kỳ hình thức nào, xây dựng thông qua các thành phần là loại thỏa thuận chính ở đó và phá vỡ các phần bạn muốn đưa vào các tệp khác không có vấn đề gì. Một số loại & nbsp; ________ 30 & nbsp; và & nbsp; ________ 31 & nbsp; là lãnh thổ mà bạn đã ở trong vùng đất phản ứng.

Sử dụng iframes

Bạn có thể làm điều này:

Nhưng nội dung trong các iframes đó không chia sẻ cùng một DOM, vì vậy, nó hơi kỳ lạ, chưa kể chậm và khó xử với phong cách (vì iframes don lồng biết độ cao của nội dung của chúng).

Scott Jehl đã ghi lại một ý tưởng tuyệt vời & nbsp; mặc dù: bạn có thể có iframe tự tiêm nội dung của chính nó vào trang cha mẹ sau đó tự xóa.

Kolya & NBSP; Korruptis đã viết với bản chuyển thể này sẽ bao gồm nhiều hơn đứa con đầu lòng của cơ thể trong trường hợp tệp HTML của bạn có điều đó:

Sử dụng Jekyll

Jekyll & nbsp; là một trình tạo trang tĩnh dựa trên Ruby với & nbsp; bao gồm. Bạn giữ bao gồm của bạn trong thư mục & nbsp; ____ 32 & nbsp; sau đó:

Jekyll là một người lớn, vì vậy tôi đã gọi nó ra ở đây, nhưng có & nbsp; một tấn máy phát điện tĩnh & nbsp; và tôi đã đánh cược bất kỳ ai trong số họ có thể làm bao gồm.

Sử dụng Sergey

OK, tôi sẽ gọi thêm một & nbsp; ssg & nbsp; bởi vì nó mới và siêu tập trung.

Bạn đã đặt tên cho các tệp & nbsp; ________ 33 & nbsp; và & nbsp;

Sử dụng Apache SSI

Apache, một máy chủ web chung siêu duper, có thể & nbsp; không bao gồm. Bạn làm như thế này:

Nhưng bạn cần cấu hình Apache phù hợp để cho phép công cụ. Tôi đã cố gắng hết sức để có được một bản demo đang hoạt động nhưng didn có nhiều may mắn.

Tôi đã thử sử dụng & nbsp; ____ ____ 36 & nbsp; trong một thư mục trên máy chủ Apache và lật những gì tôi nghĩ là những thứ phù hợp:

Tôi chắc chắn có một số cách để nó hoạt động, và nếu bạn làm vậy, nó hơi gọn gàng mà nó không cần các phụ thuộc khác.

Sử dụng codekit

Chỉ có Mac, nhưng CodeKit có & nbsp; một ngôn ngữ đặc biệt có tên là Kit & nbsp; nó xử lý trong đó 90% điểm của nó là HTML bao gồm. Nó sử dụng nhận xét HTML đặc biệt:

Sử dụng Dreamweaver

Lol JK. Nhưng nó & nbsp; thực sự là một điều. & Nbsp; dwts, em bé.

Thánh tào lao

Đó là rất nhiều cách, phải không?

Giống như tôi đã nói ở phía trên, nó rất ngạc nhiên với tôi rằng HTML đã trực tiếp giải quyết vấn đề này. Không phải tôi nghĩ rằng đó sẽ là một ý tưởng tuyệt vời cho hiệu suất để có & nbsp; Sử dụng nhập khẩu ES6 trực tiếp mà không có gói cũng không phải là một ý tưởng tuyệt vời, nhưng chúng tôi có chúng. & NBSP; ________ 38ing CSS trong CSS luôn là một ý tưởng tuyệt vời, nhưng chúng tôi có nó. Nếu nền tảng có cú pháp gốc, có lẽ công cụ khác sẽ khóa điều đó, giống như các gói JavaScript hỗ trợ định dạng nhập ES6.

Làm thế nào để bạn chèn một tệp trong HTML?

Làm cách nào để liên kết HTML với tệp HTML khác?

Làm cách nào để hiển thị nội dung của một trang HTML trong một trang khác?

Chúng tôi có thể nhập hoặc bao gồm các trang HTML không?