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

我总共有 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-> 将导入这两个文件

...并为每一页做同样的事情。

但是……真的有必要吗？有没有更好的方法来做到这一点？

标签： javascripthtmlcssparceljs

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

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