模块化html代码

HTML 页面模块化实现方案

将 HTML 页面进行模块化是前端开发中的常见需求，它可以提高代码的可维护性和复用性。针对你提供的这个建筑辅助设计工具集合页面，我们可以采用多种模块化方案，下面我将介绍几种常见的实现方式。

方案一：使用服务器端模板引擎

这是最直接的模块化方式，通过服务器端语言将页面拆分为不同的模板文件，在服务器端进行组装后再返回给浏览器。以下是使用 Node.js 和 Express 框架实现的示例：

项目结构

project/

├── public/

│   ├── css/

│   │   └── styles.css

│   ├── js/

│   │   ├── particles.js

│   │   └── main.js

│   └── img/

├── views/

│   ├── layouts/

│   │   └── default.ejs        # 主布局模板

│   ├── partials/

│   │   ├── head.ejs           # 头部模板

│   │   ├── navbar.ejs         # 导航栏模板

│   │   ├── footer.ejs         # 页脚模板

│   │   └── particleCanvas.ejs # 粒子画布模板

│   └── index.ejs              # 首页模板

├── app.js                    # Express应用

└── package.json

模板文件实现

head.ejs (头部模板)

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title><%= title %></title>

    <!-- 使用国内CDN源 -->

    <link href="/static/bootstrap.min.css" rel="stylesheet">

    <link href="/css/styles.css" rel="stylesheet">

</head>

navbar.ejs (导航栏模板)

<nav class="navbar navbar-expand-lg navbar-light">

    <a class="navbar-brand" href="http://172.16.1.8:8088/">【华科设计】建筑辅助设计相关工具集合</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarNavDropdown">

        <ul class="navbar-nav ml-auto">

            <li class="nav-item active">

                <a class="nav-link" href="http://172.16.1.8:8088/">首页</a>

            </li>

            <li class="nav-item active">

                <a class="nav-link" href="http://172.16.1.3:8888/" target="_blank">企业内网</a>

            </li>

            <li class="nav-item active">

                <a class="nav-link" href="http://172.16.1.8:8088/drupal/node/2" target="_blank">关于我们</a>

            </li>

        </ul>

    </div>

</nav>

particleCanvas.ejs (粒子画布模板)

<canvas id="particle-container"></canvas>

footer.ejs (页脚模板)

<footer class="footer">

    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

    <center>

        浏览量：<span id="busuanzi_value_site_pv"><i class="fa fa-spinner fa-spin"></i></span>

    </center>

    copyright by 华科设计--高治中

</footer>

default.ejs (主布局模板)

<!DOCTYPE html>

<html lang="zh-CN">

    <% include partials/head %>

    <body>

        <% include partials/navbar %>

        <% include partials/particleCanvas %>

        <div class="main-content">

            <div class="container mt-3">

                <%= body %>

            </div>

        </div>

        <% include partials/footer %>

        <script src="/static/jquery.slim.min.js"></script>

        <script src="/static/popper.min.js"></script>

        <script src="/static/bootstrap.min.js"></script>

        <script src="/js/particles.js"></script>

        <script src="/js/main.js"></script>

    </body>

</html>

index.ejs (首页内容模板)

<h1 class="text-center page-title">你好，我是建筑辅助设计的AI助手</h1>

<p class="text-center page-subtitle">有关建筑、规范、软件使用等任何问题都可以问我哦~</p>

<div class="card-columns">

    <div class="card">

        <div class="card-body">

            <h5 class="card-title"><a href="http://172.16.1.8:8088/chat.html" target="_blank">查规范</a></h5>

            <p class="card-text">通过知识库AI训练，查询各专业相关规范</p>

        </div>

    </div>

    <!-- 其他卡片内容... -->

</div>

app.js (Express 应用)

const express = require('express');

const path = require('path');

const app = express();

// 配置视图引擎

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'ejs');

// 静态文件服务

app.use(express.static(path.join(__dirname, 'public')));

// 首页路由

app.get('/', (req, res) => {

    res.render('index', {

        title: '【华科设计】建筑辅助设计相关工具集合'

    });

});

// 启动服务器

const port = process.env.PORT || 3000;

app.listen(port, () => {

    console.log(`服务器运行在 http://localhost:${port}`);

});

方案二：使用客户端模板引擎

如果不想使用服务器端技术，也可以在客户端使用模板引擎来实现模块化，以下是使用 Handlebars.js 的示例：

HTML 结构

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>【华科设计】建筑辅助设计相关工具集合</title>

    <!-- 使用国内CDN源 -->

    <link href="/static/bootstrap.min.css" rel="stylesheet">

    <link href="styles.css" rel="stylesheet">

</head>

<body>

    <!-- 模板将在这里渲染 -->

    <div id="app"></div>

    <!-- 模板定义 -->

    <script id="navbar-template" type="text/x-handlebars-template">

        <!-- 导航栏HTML代码 -->

    </script>

    <script id="footer-template" type="text/x-handlebars-template">

        <!-- 页脚HTML代码 -->

    </script>

    <script id="main-content-template" type="text/x-handlebars-template">

        <!-- 主要内容HTML代码 -->

    </script>

    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>

    <script src="app.js"></script>

</body>

</html>

JavaScript 实现 (app.js)

// 注册模板

Handlebars.registerTemplate('navbar', document.getElementById('navbar-template').innerHTML);

Handlebars.registerTemplate('footer', document.getElementById('footer-template').innerHTML);

Handlebars.registerTemplate('mainContent', document.getElementById('main-content-template').innerHTML);

// 页面数据

const pageData = {

    title: '【华科设计】建筑辅助设计相关工具集合',

    tools: [

        {

            title: '查规范',

            href: 'http://172.16.1.8:8088/chat.html',

            description: '通过知识库AI训练，查询各专业相关规范'

        },

        // 其他工具数据...

    ]

};

// 渲染页面

function renderPage() {

    const navbarHTML = Handlebars.compile(Handlebars.templates.navbar)(pageData);

    const footerHTML = Handlebars.compile(Handlebars.templates.footer)();

    const mainContentHTML = Handlebars.compile(Handlebars.templates.mainContent)({ tools: pageData.tools });

    document.getElementById('app').innerHTML = `

        ${navbarHTML}

        <canvas id="particle-container"></canvas>

        <div class="main-content">

            <div class="container mt-3">

                ${mainContentHTML}

            </div>

        </div>

        ${footerHTML}

    `;

    // 初始化粒子效果

    initParticles();

}

// 粒子效果初始化

function initParticles() {

    // 粒子代码...

}

// 页面加载完成后渲染

document.addEventListener('DOMContentLoaded', renderPage);

方案三：使用 ES6 模块和 Web Components

对于更现代化的前端项目，可以使用 ES6 模块和 Web Components 来实现组件化：

项目结构

project/

├── public/

│   ├── css/

│   │   └── styles.css

│   ├── js/

│   │   ├── components/

│   │   │   ├── Navbar.js        # 导航栏组件

│   │   │   ├── Footer.js        # 页脚组件

│   │   │   ├── ToolCard.js      # 工具卡片组件

│   │   │   └── ParticleCanvas.js # 粒子画布组件

│   │   └── main.js              # 主应用

│   └── img/

└── index.html                  # 入口HTML

组件实现示例

Navbar.js (导航栏组件)

class Navbar extends HTMLElement {

    constructor() {

        super();

        this.attachShadow({ mode: 'open' });

    }

    connectedCallback() {

        this.render();

    }

    render() {

        this.shadowRoot.innerHTML = `

            <style>

                /* 导航栏样式 */

                .navbar {

                    background-color: white;

                    padding: 10px 15px;

                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

                    z-index: 1000;

                }

                /* 其他样式... */

            </style>

            <nav class="navbar navbar-expand-lg navbar-light">

                <a class="navbar-brand" href="http://172.16.1.8:8088/">【华科设计】建筑辅助设计相关工具集合</a>

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

                    <span class="navbar-toggler-icon"></span>

                </button>

                <div class="collapse navbar-collapse" id="navbarNavDropdown">

                    <ul class="navbar-nav ml-auto">

                        <li class="nav-item active">

                            <a class="nav-link" href="http://172.16.1.8:8088/">首页</a>

                        </li>

                        <!-- 其他导航项... -->

                    </ul>

                </div>

            </nav>

        `;

    }

}

customElements.define('nav-bar', Navbar);

main.js (主应用)

import './components/Navbar.js';

import './components/Footer.js';

import './components/ParticleCanvas.js';

import './components/ToolCard.js';

document.addEventListener('DOMContentLoaded', () => {

    const app = document.getElementById('app');

    // 添加导航栏组件

    const navbar = document.createElement('nav-bar');

    app.appendChild(navbar);

    // 添加粒子画布组件

    const particleCanvas = document.createElement('particle-canvas');

    app.appendChild(particleCanvas);

    // 添加主要内容

    const mainContent = document.createElement('div');

    mainContent.className = 'main-content';

    mainContent.innerHTML = `

        <div class="container mt-3">

            <h1 class="text-center page-title">你好，我是建筑辅助设计的AI助手</h1>

            <p class="text-center page-subtitle">有关建筑、规范、软件使用等任何问题都可以问我哦~</p>

            <div class="card-columns">

                ${createToolCards()}

            </div>

        </div>

    `;

    app.appendChild(mainContent);

    // 添加页脚组件

    const footer = document.createElement('page-footer');

    app.appendChild(footer);

});

function createToolCards() {

    const tools = [

        { title: '查规范', href: 'http://172.16.1.8:8088/chat.html', description: '通过知识库AI训练，查询各专业相关规范' },

        // 其他工具...

    ];

    return tools.map(tool => `

        <tool-card title="${tool.title}" href="${tool.href}" description="${tool.description}"></tool-card>

    `).join('');

}

选择合适的模块化方案

三种方案各有优缺点，你可以根据项目需求选择：

服务器端模板引擎：
- 优点：SEO 友好，减轻客户端负担，适合需要后端支持的项目
- 适合场景：企业内部系统、需要与数据库交互的应用
客户端模板引擎：
- 优点：纯前端实现，不需要服务器端支持
- 适合场景：小型项目、原型开发
ES6 模块和 Web Components：
- 优点：最现代化的组件化方案，符合 Web 标准，便于维护和扩展
- 适合场景：大型前端项目、需要高度可复用组件的应用

无论选择哪种方案，模块化的核心思想都是将页面拆分为独立可复用的组件，每个组件负责自己的逻辑和样式，从而提高代码的可维护性和开发效率。

SSI 配置问题排查

当按照上述步骤配置后无法显示内容，通常是由于 SSI 配置不正确或未完全生效导致的。下面我将提供详细的排查步骤和解决方案：

一、检查 XAMPP 配置

1. 确认 mod_include 模块已启用

打开httpd.conf文件，确保以下行没有被注释（即没有#前缀）：

LoadModule include_module modules/mod_include.so

2. 确认 Directory 选项配置正确

找到并修改 htdocs 目录配置，确保包含Includes选项：

<Directory "C:/xampp/htdocs">

    Options Indexes FollowSymLinks Includes

    AllowOverride All

    Require all granted

</Directory>

3. 确认 SSI 文件扩展名配置

确保添加了以下配置（如果没有则添加）：

AddType text/html .shtml

AddOutputFilter INCLUDES .shtml

4. 重启 Apache 服务器

修改配置文件后，必须重启 Apache 服务器使更改生效。

二、检查文件结构和权限

1. 确认文件路径和命名

确保文件结构如下：

htdocs/

├── includes/

│   ├── head.html

│   ├── navbar.html

│   ├── footer.html

│   └── particleCanvas.html

├── css/

│   └── styles.css

├── js/

│   └── particles.js

└── index.shtml

2. 确认文件权限

确保所有文件都有读取权限，特别是在 Linux 或 macOS 环境下。

三、调试方法

1. 创建测试文件

创建一个简单的测试文件test.shtml：

<!DOCTYPE html>

<html>

<body>

<h1>SSI测试</h1>

当前时间：<!--#echo var="DATE_LOCAL" -->

</body>

</html>

如果这个文件能够显示当前时间，则表示 SSI 配置正常。

2. 检查 Apache 错误日志

查看 XAMPP 的 Apache 错误日志文件xampp/apache/logs/error.log，查找与 SSI 相关的错误信息。

常见错误包括：

[includes:error] [pid ...] [client ...] AH01240: failed to open... - 表示包含文件路径错误
[includes:error] [pid ...] [client ...] mod_include: Options +Includes not enabled - 表示 Directory 选项配置错误

3. 使用浏览器开发者工具

在浏览器中打开开发者工具（F12 或右键检查），查看 Network 面板：

检查 index.shtml 的响应内容
检查是否有 404 或 500 错误
查看控制台是否有 JavaScript 错误

四、替代解决方案

如果上述方法仍然无法解决问题，可以考虑使用以下替代方案：

1. 使用 PHP include 语句

虽然你希望避免使用 PHP，但这是最简单的解决方案：

<!DOCTYPE html>

<html lang="zh-CN">

<?php include 'includes/head.html'; ?>

<body>

    <?php include 'includes/navbar.html'; ?>

    <?php include 'includes/particleCanvas.html'; ?>

    <div class="main-content">

        <!-- 页面内容 -->

    </div>

    <?php include 'includes/footer.html'; ?>

    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.slim.min.js"></script>

    <script src="https://cdn.staticfile.org/popper.js/1.16.1/umd/popper.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

    <script src="/js/particles.js"></script>

</body>

</html>

将文件扩展名改为.php，并确保 XAMPP 的 PHP 模块已启用。

2. 使用 JavaScript 动态加载

如果不想使用服务器端技术，可以使用 JavaScript 动态加载：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>【华科设计】建筑辅助设计相关工具集合</title>

    <link href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

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

    <div class="main-content">

        <!-- 页面内容 -->

    </div>

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

    <script>

        // 加载导航栏

        fetch('includes/navbar.html')

            .then(response => response.text())

            .then(data => {

                document.getElementById('navbar-container').innerHTML = data;

            });

        // 加载页脚

        fetch('includes/footer.html')

            .then(response => response.text())

            .then(data => {

                document.getElementById('footer-container').innerHTML = data;

            });

    </script>

</body>

</html>

五、最终建议

首先尝试创建测试文件test.shtml，确认 SSI 是否正常工作
如果测试文件无法显示当前时间，请仔细检查 Apache 配置和错误日志
如果测试文件正常但主页面仍无法显示，请检查包含文件的路径和内容
如果仍然无法解决，考虑使用 PHP include 作为替代方案，这是最可靠的方法

通过以上步骤，应该能够找出问题所在并解决 SSI 无法正常工作的问题。

SSI 测试失败的深度排查

当 SSI 测试页面无法显示时间，且错误日志中没有相关记录时，说明 SSI 功能可能未正确启用。下面我将提供更详细的排查步骤和解决方案：

一、重新检查 Apache 配置

1. 确认 mod_include 模块加载

在httpd.conf中找到以下行，确保没有被注释：

LoadModule include_module modules/mod_include.so

2. 启用 SSI 的正确方式

修改 Directory 配置，确保包含Options +Includes：

<Directory "C:/xampp/htdocs">

    Options Indexes FollowSymLinks +Includes

    AllowOverride All

    Require all granted

</Directory>

3. 配置 AddType 和 AddOutputFilter

确保以下配置存在

AddType text/html .shtml

AddOutputFilter INCLUDES .shtml

4. 检查是否有其他配置覆盖

搜索整个httpd.conf文件，确保没有其他地方的配置覆盖了上述设置。

二、启用详细日志记录

在httpd.conf中添加以下行，启用更详细的 SSI 日志记录：

LogLevel includes:trace3

重启 Apache 后，再次测试 SSI 页面，然后检查error.log文件，应该能看到更详细的 SSI 处理信息。

三、检查文件权限和路径

1. 文件权限

确保所有相关文件都有可读权限：

htdocs/

├── includes/

│   ├── head.html

│   ├── navbar.html

│   ├── footer.html

│   └── particleCanvas.html

├── test.shtml

└── index.shtml

2. 测试文件路径

创建一个简单的测试文件结构：

<!-- test.shtml -->

<!DOCTYPE html>

<html>

<body>

<h1>SSI测试</h1>

当前时间：<!--#echo var="DATE_LOCAL" -->

包含测试：<!--#include virtual="includes/navbar.html" -->

</body>

</html>

确保includes/navbar.html存在且内容正确。

四、验证服务器响应

使用浏览器开发者工具或 curl 检查服务器响应：

curl -v http://localhost/test.shtml

查看响应头和内容，确认：

响应状态码是否为 200
响应内容是否包含 SSI 指令（如果包含，说明 SSI 未被处理）
响应头中是否有X-Powered-By: PHP/...（如果有，可能 PHP 配置有冲突）

五、临时修改配置测试

1. 临时修改 Directory 配置

尝试将 Directory 配置修改为最宽松的设置：

<Directory "C:/xampp/htdocs">

    Options All

    AllowOverride All

    Require all granted

</Directory>

重启 Apache 后测试，这将启用所有服务器功能，帮助确认是否是某个选项被禁用导致的问题。

2. 临时修改文件扩展名

尝试将测试文件改为.html扩展名，并修改配置：

AddType text/html .html

AddOutputFilter INCLUDES .html

重启 Apache 后测试test.html，确认是否是扩展名配置问题。

六、替代解决方案

如果上述方法仍然无法解决问题，建议使用 PHP include 替代 SSI：

1. 创建测试 PHP 文件

<!-- test.php -->

<!DOCTYPE html>

<html>

<body>

<h1>PHP测试</h1>

当前时间：<?php echo date('Y-m-d H:i:s'); ?>

包含测试：<?php include 'includes/navbar.html'; ?>

</body>

</html>

2. 确认 PHP 工作正常

确保 XAMPP 的 PHP 模块已启用，访问http://localhost/test.php，如果能正常显示时间和包含内容，则说明 PHP 工作正常。

3. 转换项目到 PHP

将所有.shtml文件改为.php，并将 SSI 指令替换为 PHP include：

<?php include 'includes/head.html'; ?>

七、最终建议

如果 SSI 仍然无法工作，建议使用 PHP include 作为替代方案，这是最可靠的方法
如果需要坚持使用 SSI，建议重新安装 XAMPP，确保在安装过程中选择了所有组件
考虑使用其他 Web 服务器（如 Nginx+FastCGI），虽然配置更复杂，但可能避免 XAMPP 的一些配置问题

通过以上步骤，应该能够找出 SSI 无法正常工作的原因并解决问题。