如何使用 CSS 和 JS 在不同的 .html 页面中重用导航栏？

Question

我总共有 3 页：index.html、sketch.html 和 user-profile.html。

它们都有相同的导航栏（我现在只是复制并粘贴了 nav 元素），但我现在意识到这不是最好的主意。

导航栏有其在屏幕上的位置 (HTML)、样式 (CSS) 以及登录和注册功能 (Javascript)。我将如何为三个不同的页面组合这些？

因为我使用的是模块捆绑器 (Parcel.js)，所以我想为每个页面创建一个 .js 和 .css。例如，文件夹 index 将包含：

index.css -> 将导入必要的元素，示例（伪代码）：import "../styles/navbar.css"

index.js -> 将导入用于记录和注册的必要脚本，例如：require("..scripts/sessions.js");

index.html -> 将导入这两个文件

...并对每个页面执行相同的操作。

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

Answer 1

老实说，使用原版 Javascript 并没有简单的方法来做到这一点。你基本上必须使用 JS 创建导航栏，然后可以将其导入到每个页面，或者你必须复制并粘贴它。

这个问题的行业解决方案是使用 React、Vue 或 Angular，所有这些技术都允许您创建和重用 JSX 'components'。换句话说，在 React 中，你可以创建一个导航栏组件，它可以很容易地导入到网站的任何 'page' 中。但是对于香草HTML/Javascript，这真的不是一个选择。

Answer 2

有一个肮脏但有效的 vanilla 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>

只是运行函数。如果您添加一些 javascript 功能，请使用 Promises，以便您的代码在此功能后 执行。

includeHTML()

如何使用 CSS 和 JS 在不同的 .html 页面中重用导航栏？

How to reuse a navigation bar across different .html pages with CSS and JS?

html

javascript

css

parceljs