如何在纯HTML/JS环境下复用AdminLTE模板的通用代码

不用依赖PHP或后端框架，纯JavaScript就能轻松实现模板复用，下面给你两种简单易上手的方案：

方案一：拆分通用代码为独立HTML片段，动态加载 #

这是最适合多页面场景的方案，把重复的头尾抽成单独文件，用JS自动插入到每个页面中。

步骤1：拆分通用代码 #

• 创建header.html，将你提供的「可复用上部代码」完整放入其中
• 创建footer.html，将你提供的「可复用下部代码」完整放入其中

步骤2：编写页面主体文件（以仪表盘为例） #

每个页面只需要保留独有的内容，再通过脚本加载通用头尾：

<!DOCTYPE html>
<html>
<head>
    <!-- 仅保留当前页面独有的标题或额外样式，通用样式已在header.html中引入 -->
    <title>AB1 Dashboard - 用户仪表盘</title>
</head>
<body class="hold-transition skin-blue sidebar-mini">
    <!-- 头部占位容器 -->
    <div id="header-container"></div>

    <!-- 页面独有的主体内容 -->
    <div class="content-wrapper">
        <section class="content-header">
            <h1>用户仪表盘</h1>
        </section>
        <section class="content">
            <!-- 这里放置你的自定义内容，比如统计卡片、数据图表等 -->
            <div class="row">
                <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-aqua">
                        <div class="inner">
                            <h3>150</h3>
                            <p>新增用户</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-person-add"></i>
                        </div>
                        <a href="#" class="small-box-footer">查看详情 <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- 更多自定义内容... -->
            </div>
        </section>
    </div>

    <!-- 尾部占位容器 -->
    <div id="footer-container"></div>

    <!-- 加载通用头尾的脚本 -->
    <script>
        // 加载头部模板
        fetch('header.html')
            .then(res => res.text())
            .then(html => document.getElementById('header-container').innerHTML = html);

        // 加载尾部模板
        fetch('footer.html')
            .then(res => res.text())
            .then(html => document.getElementById('footer-container').innerHTML = html);
    </script>
</body>
</html>

注意事项 #

• 直接用file://打开本地文件时，浏览器可能因跨域限制阻止fetch请求，建议用本地服务器运行（比如Python的python -m http.server，或VS Code的Live Server插件）。
• 所有通用的CSS、JS都放在header.html和footer.html中，避免每个页面重复引入。

方案二：使用HTML <template> 标签（适合少量页面） #

如果你的页面数量不多，可以把通用模板统一存放在一个文件中，通过<template>标签标记，再用JS克隆到目标页面：

步骤1：创建模板文件templates.html #

<template id="adminlte-header">
    <!-- 完整的可复用上部代码 -->
</template>

<template id="adminlte-footer">
    <!-- 完整的可复用下部代码 -->
</template>

步骤2：在页面中渲染模板 #

<!DOCTYPE html>
<html>
<head>
    <title>AB1 Dashboard - 用户仪表盘</title>
</head>
<body class="hold-transition skin-blue sidebar-mini">
    <div id="header-container"></div>

    <!-- 页面主体内容 -->
    <div class="content-wrapper">
        <!-- 你的自定义内容 -->
    </div>

    <div id="footer-container"></div>

    <script>
        fetch('templates.html')
            .then(res => res.text())
            .then(templateHtml => {
                const tempEl = document.createElement('div');
                tempEl.innerHTML = templateHtml;

                // 克隆并插入头部
                const headerTemplate = tempEl.querySelector('#adminlte-header');
                document.getElementById('header-container').appendChild(headerTemplate.content.cloneNode(true));

                // 克隆并插入尾部
                const footerTemplate = tempEl.querySelector('#adminlte-footer');
                document.getElementById('footer-container').appendChild(footerTemplate.content.cloneNode(true));
            });
    </script>
</body>
</html>

额外优化：自动高亮当前侧边栏菜单 #

为了避免手动修改每个页面的菜单active类，可以在页面脚本中添加一段自动处理逻辑：

document.addEventListener('DOMContentLoaded', function() {
    // 获取当前页面文件名，比如index.html
    const currentPage = window.location.pathname.split('/').pop();
    // 找到对应菜单项并添加高亮类
    const activeLink = document.querySelector(`.sidebar-menu a[href="${currentPage}"]`);
    if (activeLink) {
        activeLink.parentElement.classList.add('active');
        // 如果是树形菜单，展开父级菜单
        const parentTree = activeLink.closest('.treeview');
        if (parentTree) {
            parentTree.classList.add('active', 'menu-open');
        }
    }
});

内容的提问来源于stack exchange，提问作者Muhammad Jawad