# course静态页面改造方案.

适用：511遇见 /course/ 目录静态教程页面改造，解决多页面头部底部重复修改麻烦，基于PHP include公共模板，原页面HTML内容完全保留。

🎯改造目标

1. 将多个重复的静态页面公共部分（head、导航、分页、页脚、JS）抽离为公共PHP文件；
2. 每个业务页面只保留中间主体main卡片内容；
3. 修改导航、页脚、统计只需要修改公共文件，全部页面自动同步；
4. 兼容原有HTML代码，中间部分直接写原生HTML，不用学复杂PHP；
5. 处理旧链接SEO，防止404。

📁目录结构（服务器 /course/ 目录）

course/
├─ inc/                      # 公共模板文件夹
│  ├─ header.php            # 公共头部：DOCTYPE、head元标签、css、导航栏、上方分页
│  └─ footer.php             # 公共底部：下方分页、footer版权、全部JS脚本
├─ index.php                 # 原 index.html 改造
├─ index1.php                # 原 index1.html 改造
├─ video.php                 # 原 video.html 改造
├─ wydj.php                  # 原 wydj.html 改造
├─ yydj.php                  # 原 yydj.html 改造
├─ sydj.php                  # 原 sydj.html 改造
├─ indexa.php                # 原 indexa.html 改造
├─ .htaccess                 # 伪静态301重定向（处理旧.html链接跳转）
└─ img/ css/                 # 原有图片、css资源不动

1、公共模板文件内容

inc/header.php

作用：页面最开头，包含 <!DOCTYPE html>、head、meta、css、顶部导航、上方分页。

<?php
/**
 * course公共头部模板
 * @var string $page_title 页面标题
 * @var string $page_brand 页面大标题
 * @var string $extra_css 额外css文件，选填
 */
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title><?php echo $page_title; ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="511遇，易语言，大漠，多线程，模拟器，手游雷电API，ADB,wordpress,平面设计等视频教程。">
  <!-- Favicon -->
  <link href="/assets/img/brand/favicon.png" rel="icon" >
  <!-- Favicons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="./img/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="./img/favicon.png" type="image/png">
  <!-- Icons -->
  <link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css](https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css)">
  <!-- Argon CSS -->
  <link type="text/css" href="./css/style.min.css" rel="stylesheet">
  <?php if(!empty($extra_css)):?>
  <link rel="stylesheet" href="<?php echo $extra_css;?>">
  <?php endif;?>
  <!-- 百度统计，需要就保留，不需要直接删掉这整块 -->
  <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "[https://hm.baidu.com/hm.js?15c141dd41d16b47f32d4c5476e1f6f4](https://hm.baidu.com/hm.js?15c141dd41d16b47f32d4c5476e1f6f4)";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
  <header class="header-global">
    <nav id="navbar-main" class="navbar navbar-main navbar-expand-lg navbar-transparent navbar-light headroom">
      <div class="container">
        <a class="navbar-brand mr-lg-5" href="./index.php"><h1 class="text-white mb-0 text-2xl"><?php echo $page_brand; ?></h1></a>
        <button class="navbar-toggler d-none" type="button" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbar_global">
          <ul class="navbar-nav align-items-lg-center ml-lg-auto">
            <li class="nav-item d-none d-lg-block ml-lg-4">
              <a href="[http://www.511yj.com/](http://www.511yj.com/)" target="_blank" class="btn btn-neutral btn-icon font-normal">
                <span class="btn-inner--icon">
                  <i class="fa fa-cloud-upload mr-2"></i>
                </span>
                <span class="nav-link-inner--text">511遇见官网</span>
              </a>
            </li>
            <li class="nav-item d-none d-lg-block ml-lg-4">
              <a href="./wydj.php" target="_blank" class="btn btn-neutral btn-icon font-normal">
                <span class="btn-inner--icon">
                  <i class="fa fa-cloud-upload mr-2"></i>
                </span>
                <span class="nav-link-inner--text">端游一键端</span>
              </a>
            </li>
            <li class="nav-item d-none d-lg-block ml-lg-4">
              <a href="./yydj.php" target="_blank" class="btn btn-neutral btn-icon font-normal">
                <span class="btn-inner--icon">
                  <i class="fa fa-cloud-upload mr-2"></i>
                </span>
                <span class="nav-link-inner--text">页游一键端</span>
              </a>
            </li>
            <li class="nav-item d-none d-lg-block ml-lg-4">
              <a href="./sydj.php" target="_blank" class="btn btn-neutral btn-icon font-normal">
                <span class="btn-inner--icon">
                  <i class="fa fa-cloud-upload mr-2"></i>
                </span>
                <span class="nav-link-inner--text">手游一键端</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!---右上分页导航 开始----->
        <section class="section pt-0">
          <nav aria-label="Page navigation">
            <ul class="pagination pagination-lg justify-content-center">
          <li class="page-item">
            <a class="page-link" href="./video.php" title="视频教程预览">1</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="./index.php" title="教程目录-1">2</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="./index1.php"  title="教程目录-2">3</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="./wydj.php"  title="端游单机一键端">4</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="./yydj.php" title="页游单机一键端">5</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="./sydj.php" title="手游单机一键端">6</a>
          </li>
            </ul>
          </nav>
        </section>
       <!---右上分页导航结束----->
    </nav>
  </header>
<main>

inc/footer.php

页面底部：底部分页、footer版权、全部js，闭合 main body html

    <section class="section pt-0">
      <nav aria-label="Page navigation">
        <ul class="pagination pagination-lg justify-content-center">
          <li class="page-item">
            <a class="page-link" href="./video.php" title="视频教程预览">1</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="./index.php" title="教程目录-1">2</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="./index1.php"  title="教程目录-2">3</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="./wydj.php"  title="端游单机一键端">4</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="./yydj.php" title="页游单机一键端">5</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="./sydj.php" title="手游单机一键端">6</a>
          </li>
        </ul>
      </nav>
    </section>
</main>
  <footer class="footer">
    <div class="container">
      <div class="row row-grid align-items-center mb-5">
        <div class="col-lg-6">
          <h3 class="text-primary font-weight-light mb-2">511遇见视频教程</h3>
          <p class="mb-0 font-weight-light">提供易语言、大漠、ADB模拟器、多线程、hook注入、手游端游，模块API，平面设计，wordpress等视频教程。</p>
        </div>
        <div class="col-lg-6 text-lg-center btn-wrapper">
          <a href="[http://bbs.511yj.com/](http://bbs.511yj.com/)" target="_blank" class="btn btn-primary btn-icon font-normal">
            <span class="btn-inner--icon">
              <i class="fa fa-cloud-upload mr-2"></i>
            </span>
            <span class="nav-link-inner--text">511遇见论坛</span>
          </a>
        </div>
      </div>
      <hr>
      <div class="row align-items-center justify-content-md-between">
        <div class="col-md-6">
          <div class="copyright">
            &copy; 2020 511YJ.com 视频教程
          </div>
        </div>
        <div class="col-md-6">
          <ul class="nav nav-footer justify-content-end">
            <li class="nav-item">
              <a href="[http://www.511yj.com/archives](http://www.511yj.com/archives)" class="nav-link">关于</a>
            </li>
            <li class="nav-item">
              <a href="[http://www.511yj.com/archives/](http://www.511yj.com/archives/)" class="nav-link">关于遇见</a>
            </li>
            <li class="nav-item">
              <a href="[http://www.beian.miit.gov.cn/](http://www.beian.miit.gov.cn/)" class="nav-link" target="_blank"> 鲁ICP备15039387号-1</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
  <!-- Core -->
  <script src="[https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js](https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js)"></script>
  <script src="[https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js](https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js)"></script>
  <script src="[https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js](https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js)"></script>
  <script src="[https://cdn.jsdelivr.net/npm/headroom.js@0.9.4/dist/headroom.min.js](https://cdn.jsdelivr.net/npm/headroom.js@0.9.4/dist/headroom.min.js)"></script>
  <!-- Argon JS -->
  <script src="./js/argon.min.js"></script>
</body>
</html>

2、业务页面模板示例 index.php

每个页面格式完全一致，只修改页面变量，中间粘贴原页面main内的卡片HTML

<?php
//页面配置，每个页面修改这里
$page_title = '511遇见视频教程下载';
$page_brand = '511遇见视频教程';
// $extra_css = './css/xxx.css'; //需要额外css再打开
include 'inc/header.php';
?>

<!-- ========== 这里粘贴原页面 <main> 里面全部卡片HTML内容，只保留主体业务html ========== -->
<section class="section-shaped my-0 bg-center bg-cover h-120">
      <!-- Circles background -->
      <div class="shape shape-style-1 shape-primary alpha-4">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <!-- SVG separator -->
      <div class="separator separator-bottom separator-skew z-0">
        <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)">
          <polygon class="fill-white" points="2560 0 2560 100 0 100"></polygon>
        </svg>
      </div>
</section>
<section class="section -mt-64">
<div class="container container-lg">
<div class="row">
<!-- 这里放一堆你的card卡片 -->

</div>
</div>
</section>

<?php include 'inc/footer.php'; ?>

3、.htaccess（course目录下）

作用：旧的 .html 百度收录链接301永久重定向到新 .php，避免404丢失收录。

# course目录 .htaccess
RedirectMatch 301 ^/course/(.*)\.html$ /course/$1.php

✅ 上线操作步骤

1. 在服务器 /course/ 创建文件夹 inc，上传 header.php、footer.php；
2. 每个页面复制模板，把原来页面main里面卡片HTML粘贴到两个include中间，保存为 .php；
3. 上传 .htaccess 到 /course/；
4. WordPress后台 → 外观 → 菜单，把导航菜单里面旧 .html 链接全部改成 .php；
5. 浏览器访问各个php页面测试，样式、导航、分页、页脚全部正常；
6. 测试旧html链接：访问 xxx.html 会自动跳转到 xxx.php。

📝后续维护规则

1. 修改导航、页脚、统计、公共JS/CSS：只编辑 inc/header.php / inc/footer.php，所有页面自动生效；
2. 新增/修改教程卡片：编辑对应业务.php页面，修改中间的HTML部分即可；
3. 新增页面：复制一份业务页面模板，修改标题变量，粘贴新页面卡片HTML，保存为新php文件；
4. 不需要再复制一大段head、导航、页脚到每一个页面。

⚠️注意事项

1. 路径：inc/header.php 使用相对路径，保证每个php文件直接 include 'inc/header.php'；
2. 图片路径保持 ./img/xxx.jpg 相对路径不变，原有资源不动；
3. 如果服务器不支持.htaccess301，就手动提交百度资源平台，把旧html链接做改版提交；
4. PHP文件里面，中间的HTML完全原生写法，不需要写任何PHP，和写html一样。

如果你需要，我可以把 index.php / index1.php 完整成品直接输出，复制即可上传。