如何使用服务器端包含在多个HTML页面中实现可复用导航栏-php教程-PHP中文网

如何使用服务器端包含在多个HTML页面中实现可复用导航栏

霞舞

发布： 2025-11-16 11:56:02

原创

345人浏览过

如何使用服务器端包含在多个html页面中实现可复用导航栏

本教程旨在介绍一种高效的方法，通过利用服务器端脚本（特别是PHP的`include()`函数），在多个网页中集成并管理单个导航栏组件。这种方法允许开发者集中维护导航代码，确保整个网站的一致性，并大幅简化更新过程，从而避免了HTML代码的重复。

在构建现代网站时，导航栏、页脚、侧边栏等公共元素经常需要在多个页面上显示。传统方法是直接将这些元素的HTML代码复制粘贴到每个页面中，但这会导致代码冗余、难以维护，并且在需要修改时工作量巨大。为了解决这一问题，服务器端包含（Server-Side Includes, SSI）提供了一个优雅的解决方案，它允许我们在服务器处理请求时，将一个文件的内容动态地插入到另一个文件中。

为什么选择服务器端包含？

服务器端包含的优势在于其简单性和效率：

集中管理： 所有公共组件的代码都存储在一个独立的文件中。
易于维护： 只需修改一次组件文件，所有引用该组件的页面都会自动更新。
代码整洁： 减少了每个页面中的重复HTML代码，使页面结构更清晰。
性能优化： 服务器在发送页面到客户端之前完成文件合并，客户端接收到的仍是完整的HTML，无需额外的客户端脚本处理。

虽然JavaScript也可以实现客户端加载公共组件，但服务器端包含对于SEO更友好，且不依赖于客户端JavaScript的执行，保证了内容的可靠性。

立即学习“前端免费学习笔记（深入）”；

使用PHP实现可复用组件

PHP作为一种广泛使用的服务器端脚本语言，通过其内置的include()或require()函数，可以非常方便地实现文件包含。当PHP解析器遇到这些函数时，它会将指定文件的内容读取并插入到当前文件的相应位置。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

1. 创建组件文件

首先，将你的导航栏（或任何其他公共组件）的HTML代码单独保存为一个PHP文件。例如，创建一个名为header.php的文件，其中包含你的导航栏代码。

<!-- header.php -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">我的博客</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="index.php">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about.php">关于我们</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact.php">联系方式</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

登录后复制

2. 在主页面中集成

接下来，在你的主页面（例如index.php、about.php等）中，使用include()函数来引入header.php。请注意，为了让PHP解析器处理这些包含指令，你的主页面文件也必须以.php为扩展名。

<!-- index.php -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 我的博客</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 你的自定义CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <?php include("header.php"); ?>

    <main class="container mt-4">
        <h1>欢迎来到我的博客！</h1>
        <p>这是首页的独特内容。</p>
        <!-- 更多页面内容 -->
    </main>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 你的自定义JS -->
    <script src="script.js"></script>
</body>
</html>

登录后复制

当用户访问index.php时，服务器会先执行PHP代码，将header.php的内容插入到<?php include("header.php"); ?>所在的位置，然后将完整的HTML页面发送给浏览器。

注意事项与最佳实践

服务器环境： 要运行PHP代码，你的Web服务器（如Apache、Nginx）必须安装并配置PHP解释器。
文件扩展名： 任何需要包含其他文件或执行PHP代码的页面都必须使用.php扩展名，以便服务器将其作为PHP脚本处理。
include() vs. require()：
- include()：如果被包含的文件不存在或发生错误，会发出警告（E_WARNING），但脚本会继续执行。
- require()：如果被包含的文件不存在或发生错误，会发出致命错误（E_ERROR），并停止脚本执行。
- 对于导航栏这类关键组件，通常推荐使用require()或require_once()，以确保页面结构完整性。_once后缀的函数可以防止多次包含同一个文件，避免函数重定义或重复输出内容。
路径管理： include()和require()中的文件路径可以是相对路径（相对于当前执行脚本的文件）或绝对路径。建议使用相对路径或定义一个根目录常量来管理路径，以提高可移植性。
安全性： 确保被包含的文件不包含敏感信息或不当代码，因为它们会被直接插入到主页面中。
其他服务器端技术： 除了PHP，其他服务器端语言和框架也提供了类似的功能，例如Node.js的模板引擎（EJS, Pug）、Python的Jinja2、Ruby on Rails的ERB等。选择哪种技术取决于你的项目需求和团队熟悉度。