如何使用 CSS 和 JS 在不同的 .html 頁面上重用導航欄？

Question

我總共有 3 頁： index.html 、 sketch.html和user-profile.html 。

它們都有相同的導航欄（我現在只是復制並粘貼了nav元素），但我現在意識到這不是最好的主意。

導航欄在屏幕上有其 position (HTML)、樣式 (CSS) 以及登錄和注冊功能 (Javascript)。 我 go 如何將這些組合到三個不同的頁面？

由於我使用的是模塊捆綁器 (Parcel.js)，因此我正在考慮為每個頁面創建一個.js和.css 。 因此，例如文件夾index將具有：

index.css -> 將導入必要的元素，示例（偽代碼）： import "../styles/navbar.css"

index.js -> 將導入用於日志記錄和注冊的必要腳本，例如： require("..scripts/sessions.js");

index.html -> 將導入這兩個文件

...並為每一頁做同樣的事情。

但是……真的有必要嗎？ 有更好的方法嗎？

Answer 1

老實說，使用 vanilla Javascript 沒有簡單的方法來做到這一點。您基本上必須使用 JS 創建導航欄，然后可以將其導入到每個頁面，或者您必須復制並粘貼它。

這個問題的行業解決方案是使用 React、Vue 或 Angular，所有這些技術都允許您創建和重用 JSX“組件”。 換句話說，在 React 中，你可以創建一個導航欄組件，它可以很容易地導入網站的任何“頁面”。 但是對於 vanilla HTML/Javascript，這真的不是一個選擇。

Answer 2

有一個骯臟但有效的香草 JS hack：

async function includeHTML() {
  const includes = document.getElementsByTagName('include');
  [].forEach.call(includes, include => {
    let filePath = include.getAttribute('src');
    fetch(filePath).then((file) => {
      file.text().then((content) => {
        include.insertAdjacentHTML('afterend', content);
        include.remove();
      });
    });
  });
};

現在，您可以像這樣創建元素： <include src="navbar.html"></include>

只需運行 function。如果您添加一些 javascript 功能，請使用 Promises，以便您的代碼在 function之后執行。

includeHTML()