PHP引入header和footer时如何按需加载对应页面的CSS与JS资源

你可以通过以下两种常用方案实现需求： #

方案1：单页面自定义资源数组（灵活度最高） #

• 第一步：在每个页面对应的内容代码前，先声明当前页面需要的自定义CSS、JS资源数组，再引入header文件
  示例（文章页代码）：

  <?php
  // 定义当前页专属CSS资源
  $page_css = [
      'article.css',
      'code-highlight.css'
  ];
  // 定义当前页专属JS资源
  $page_js = [
      'article.js',
      'comment.js'
  ];
  // 引入头部文件
  include('header.inc.php');
  ?>
  
  <!-- 文章页主体内容 -->
  
  <?php include('footer.inc.php'); ?>
  

• 第二步：修改header.inc.php，在公共CSS输出后，判断并遍历输出当前页的自定义CSS
  header.inc.php示例：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
      <meta charset="UTF-8">
      <title>站点标题</title>
      <!-- 全站公共CSS，所有页面都加载 -->
      <link rel="stylesheet" href="/css/common.css">
      <link rel="stylesheet" href="/css/nav.css">
      <?php
      // 输出当前页自定义CSS
      if (!empty($page_css)) {
          foreach ($page_css as $css_file) {
              echo '<link rel="stylesheet" href="/css/' . htmlspecialchars($css_file) . '">';
          }
      }
      ?>
  </head>
  <body>
  <!-- 公共头部导航、侧边栏等内容 -->
  

• 第三步：修改footer.inc.php，在公共JS输出后，判断并遍历输出当前页的自定义JS
  footer.inc.php示例：

  <!-- 公共底部备案信息、友链等内容 -->
  <!-- 全站公共JS，所有页面都加载 -->
  <script src="/js/common.js"></script>
  <script src="/js/dark-mode-toggle.js"></script>
  <?php
  // 输出当前页自定义JS
  if (!empty($page_js)) {
      foreach ($page_js as $js_file) {
          echo '<script src="/js/' . htmlspecialchars($js_file) . '"></script>';
      }
  }
  ?>
  </body>
  </html>
  

方案2：路由匹配自动加载（适合路由规则固定的站点） #

如果你的站点使用统一路由入口，可以直接在header、footer中根据当前路由判断要加载的资源，无需每个页面单独定义：

<?php
// 示例：获取当前页面路由，根据路由加载对应资源
$current_route = $_SERVER['REQUEST_URI'];
// 地图页才加载地图相关资源
if (str_contains($current_route, '/map')) {
    echo '<link rel="stylesheet" href="/css/map.css">';
    echo '<script src="/js/map.min.js"></script>';
}
// 日历页才加载日历相关资源
if (str_contains($current_route, '/calendar')) {
    echo '<link rel="stylesheet" href="/css/calendar.css">';
    echo '<script src="/js/calendar.min.js"></script>';
}
?>

注意事项 #

• 输出资源路径时建议用htmlspecialchars()做转义处理，避免XSS安全风险
• 有依赖顺序的JS要注意加载顺序，比如依赖jQuery的自定义JS，要确保公共JS部分先加载jQuery，再输出自定义JS
• 全站通用的公共资源统一放在header、footer的公共部分加载，不要每个页面重复声明，减少冗余

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