Web开发新手咨询：多HTML页面复用通用组件与布局的实现方案

阿华AIGC实验室

2026-5-7

用PHP Include实现多页面布局复用的实操指南

嘿，作为刚入门Web开发的新手，你选PHP Include来解决布局复用问题真的是个很接地气的思路！我来一步步给你讲清楚怎么操作，保证你看完就能上手。

第一步：拆分通用组件为独立PHP文件

首先，我们把basic.html里那些重复出现的固定部分（头部、侧边栏、页脚、公共脚本）拆成单独的PHP文件，这样每个页面都能直接引用它们：

head.php - 存放页面头部的固定内容（可以加个动态标题，方便每个页面自定义）

<head>
  <!-- 这里放你原来的fixed stuff，比如meta标签、样式表链接 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php echo isset($pageTitle) ? $pageTitle : '我的网站'; ?></title>
  <link rel="stylesheet" href="styles.css">
</head>

sidebar.php - 存放侧边栏的固定内容

<div class="sidebar">
  <!-- 这里是你原来的sidebar内容 -->
  <nav>
    <ul>
      <li><a href="index.php">首页</a></li>
      <li><a href="price.php">价格页</a></li>
      <li><a href="blog.php">博客页</a></li>
    </ul>
  </nav>
</div>

footer.php - 存放页脚和公共脚本

<footer>
  <!-- 这里是你原来的fixed footer内容 -->
  <p>© 2024 我的个人网站 | 保留所有权利</p>
</footer>

<!-- 公共脚本放在这里 -->
<script src="common.js"></script>

第二步：构建你的price.php页面

注意：要把原来的price.html改成price.php后缀（因为PHP代码需要服务器解析，纯HTML文件不会执行PHP）。在这个文件里，我们只需要引入通用组件，然后插入页面独有的主体内容：

<?php
// 给当前页面设置自定义标题（可选，不设置的话会用head.php里的默认标题）
$pageTitle = "产品价格";
?>
<!DOCTYPE html>
<html lang="zh-CN">
<?php include 'head.php'; ?> <!-- 引入头部组件 -->
<body>
  <?php include 'sidebar.php'; ?> <!-- 引入侧边栏组件 -->

  <!-- 👇 这里是price页面独有的主体内容，替换成你需要的内容即可 -->
  <div class="main-content">
    <h1>我们的产品价格</h1>
    <div class="price-card">
      <h2>基础版</h2>
      <p class="price">¥99/月</p>
      <ul>
        <li>支持5个项目</li>
        <li>基础技术支持</li>
      </ul>
    </div>
    <div class="price-card">
      <h2>专业版</h2>
      <p class="price">¥199/月</p>
      <ul>
        <li>无限项目</li>
        <li>24小时技术支持</li>
      </ul>
    </div>
  </div>

  <?php include 'footer.php'; ?> <!-- 引入页脚和公共脚本 -->
</body>
</html>

第三步：同理构建blog.php页面

和price.php的逻辑完全一致，只需要替换中间的主体内容：

<?php
$pageTitle = "技术博客";
?>
<!DOCTYPE html>
<html lang="zh-CN">
<?php include 'head.php'; ?>
<body>
  <?php include 'sidebar.php'; ?>

  <!-- 👇 blog页面独有的主体内容 -->
  <div class="main-content">
    <h1>最新博客文章</h1>
    <article class="blog-post">
      <h2>Web开发新手必知的5个布局技巧</h2>
      <p class="post-date">2024-05-20</p>
      <p>作为Web开发新手，掌握正确的布局技巧能让你的页面开发效率翻倍...</p>
      <a href="blog-post.php?id=1">阅读全文</a>
    </article>
    <article class="blog-post">
      <h2>PHP Include的正确使用姿势</h2>
      <p class="post-date">2024-05-18</p>
      <p>布局复用是Web开发的核心技巧之一，PHP Include是最适合新手的方案...</p>
      <a href="blog-post.php?id=2">阅读全文</a>
    </article>
  </div>

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

几个关键注意事项

服务器环境：PHP代码需要在支持PHP的服务器上运行，本地开发可以用XAMPP、WAMP这类工具，启动服务器后通过http://localhost/price.php访问页面，直接双击打开.php文件是看不到效果的。
文件路径：确保include的文件路径正确，如果组件文件放在components/子目录里，就要写成include 'components/sidebar.php';。
扩展性：以后如果要修改侧边栏或者页脚，只需要修改对应的.php文件，所有引用它的页面都会自动更新，不用一个个页面去改，这就是复用的核心价值！

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