如何在其他页面动态插入mainpage.html的公共头部和底部

核心实现逻辑是将全站通用的头部、底部代码抽离为独立的公共文件，业务页面通过PHP内置的引入语法调用即可，无需重复编写相同代码。

1. 抽离公共头部文件 #

新建header.php文件，存放所有页面通用的头部代码、公共样式引用、导航栏等内容：

<!-- header.php 公共头部代码 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 预留自定义页面标题变量，不同业务页面可单独配置 -->
    <title><?php echo isset($page_title) ? $page_title : '站点默认标题'; ?></title>
    <!-- 公共CSS统一放在此处，所有引入的页面无需重复引入 -->
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/css/nav.css">
</head>
<body>
<!-- 全站通用导航栏 -->
<nav class="site-nav">
    <div class="nav-wrapper">
        <a href="/" class="site-logo">站点LOGO</a>
        <ul class="nav-list">
            <li><a href="/index.php">首页</a></li>
            <li><a href="/about.php">关于我们</a></li>
            <li><a href="/product.php">产品列表</a></li>
            <li><a href="/contact.php">联系我们</a></li>
        </ul>
    </div>
</nav>

2. 抽离公共底部文件 #

新建footer.php文件，存放所有页面通用的页脚内容、公共脚本引用：

<!-- footer.php 公共底部代码 -->
<!-- 全站通用页脚 -->
<footer class="site-footer">
    <div class="footer-wrapper">
        <p>© 2024 你的站点名称 保留所有权利</p>
        <p>ICP备案号：粤ICP备XXXXXX号</p>
    </div>
</footer>
<!-- 公共JS统一放在此处，所有引入的页面无需重复引入 -->
<script src="/static/js/common.js"></script>
<script src="/static/js/nav.js"></script>
</body>
</html>

3. 业务页面引入公共头尾 #

以首页index.php为例，只需要编写页面独有的业务代码，头尾直接引入即可：

<?php
// 配置当前页面的自定义标题
$page_title = '首页';
// 引入公共头部，路径根据你的文件存放位置调整
include './header.php';
?>

<!-- 此处编写当前页面独有的业务内容 -->
<main class="home-page">
    <h1>欢迎访问本站</h1>
    <p>这是首页独有的内容区域</p>
</main>

<?php
// 引入公共底部，路径根据你的文件存放位置调整
include './footer.php';
?>

注意事项 #

• 路径匹配：如果不同层级的页面都要引入头尾，推荐用绝对路径避免出错，写法为include $_SERVER['DOCUMENT_ROOT'] . '/header.php';
• 引入语法选择：如果要求头尾必须加载，缺失就中断页面渲染，用require代替include即可
• 公共资源统一管理：所有通用的CSS、JS、导航、页脚修改时只需要调整公共文件，所有页面会同步更新，无需逐个修改

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