多个html页面切换时，大部分页面都是相同的，如何避免为每一个网页都设置单独的html

本文链接：https://blog.youkuaiyun.com/lycwhu/article/details/136352138

如果多个 HTML 页面的大部分内容都是相同的，你可以考虑使用一个共享的 HTML 模板，然后在每个页面中引用该模板，只需为每个页面提供特定的内容即可。这可以通过以下几种方法来实现：

服务器端包含 (SSI)：服务器端包含是一种服务器端技术，可以让你将一个文件嵌入到另一个文件中。你可以创建一个包含共享内容的模板文件，然后在每个页面中包含这个模板文件，这样所有页面都可以共享相同的部分。示例代码如下：

<!-- shared_template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shared Template</title>
</head>
<body>
    <!-- Common header content -->
    <header>
        <h1>Shared Header</h1>
        <nav>
            <ul>
                <li><a href="page1.html">Page 1</a></li>
                <li><a href="page2.html">Page 2</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- Page-specific content -->
    <!-- This part will be different for each page -->
    <!--#include virtual="content.html" -->
    
    <!-- Common footer content -->
    <footer>
        <p>Shared Footer</p>
    </footer>
</body>
</html>

前端框架或库：使用前端框架或库（如Vue.js、React、Angular等）可以更方便地管理共享的部分和页面间的切换。你可以创建一个组件或视图模板，然后在每个页面中引用该组件或模板，并通过该框架或库来动态渲染页面内容。这种方法更适合于大型应用程序或需要复杂交互的页面。
JavaScript 模板引擎：你可以使用 JavaScript 模板引擎（如Handlebars、Mustache等）来创建一个共享的 HTML 模板，并在每个页面中使用该模板来渲染页面内容。这种方法可以在客户端动态生成 HTML 内容，但需要在浏览器中加载模板引擎库。

无论选择哪种方法，都可以避免为每个页面都单独设置 HTML，提高代码的可维护性和重用性。