如何在不编写冗余代码的情况下创建多个 Html 子页面？

Question

目前我正在从事一个金融网络应用程序的项目。但是随着我的前进，代码冗余正在增加，尤其是对于 HTML 代码。

我的网站上有多个 Html 页面，例如 Dashboard、EditProfile、AccountStatistics 等。例如。

1. DashBorad - enter image description here
2. 编辑配置文件 - enter image description here
3. AccountStats - enter image description here

现在从上面的图片来看，你们可以看到每次我们从一个页面导航到另一个页面时，只有主要部分内容发生了变化，但网站的主体结构和设计保持不变。

问题：如果我想创建一个新页面，我必须包含 header、sub-header、sideBar、 的代码>footer 是重复的。我只想改变主要部分的代码。例如 - 制作了一个像 Body.html 这样的文件，其中包含标题、侧边栏等的代码&每次我想创建一个新页面时，只需要编写主要部分的代码，以后可以与正文合并。

我们怎样才能做到这一点？

（使用的技术 - Html、Css 和 JavaScript）

注意：如果有人想更清楚地理解，我也可以附上代码！

谢谢！ 为编码干杯:)

Answer 1

您可以使用 React/Vue 等前端框架。 根据它是否是静态站点，您可以使用 Jekyl/Hugo 之类的东西。 如果你想走SSR的方式，那么你有Angular Universal/ ASP.NET Core/ PHP方式。

根据您的用例，无论哪种方式，您都不会真正出错。如果您是新手，请选择其中一个并开始学习。

玩得开心！

Answer 2

对于像ReactJS（和其他类似的替代方案）这样的库来说，这是一个很好的用例。使用 React，您可以为您的页眉、侧边栏和网页的其他常见部分定义“组件”，这些部分可以在不同的地方重复使用。您也可以单独更新这些组件中的每一个。