独立PHP公共头部文件如何仅为单个页面引入指定脚本与样式

操作步骤 #

• 先改造全局加载的独立head PHP文件
  别把Owl相关的引入代码硬塞在公共head里全局加载，只要在公共head的</head>闭合标签前，加一段动态输出页面专属资源的逻辑就行：

  <?php
  // 公共head文件内预留的资源渲染位
  if (!empty($page_assets)) {
      foreach ($page_assets as $asset) {
          echo $asset;
      }
  }
  ?>
  

• 再给需要轮播的单个页面定义专属资源
  注意这段定义代码要写在页面最顶部，位置必须在引入全局公共head文件的代码之前，把Owl的样式、脚本、初始化代码组装成数组交给上面的逻辑位渲染：

  <?php
  // 以下为需要使用轮播的指定页面的顶部代码
  // 定义当前页要额外加载的专属资源
  $page_assets = [
      // 加载OwlCarousel样式表
      '<link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" media="screen" rel="stylesheet" type="text/css">',
      // 加载OwlCarousel脚本
      '<script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>',
      // 嵌入初始化代码，加判断避免未加载完成时报错
      '<script>
      window.addEventListener("DOMContentLoaded", () => {
          if (typeof $(".owl-carousel").owlCarousel === "function") {
              $(".owl-carousel").owlCarousel({
                 items: 1,
                 nav: true,
                 dots: false,
                 loop: true
              });
          }
      })
      </script>'
  ];
  
  // 按原有逻辑引入全局公共head文件即可
  include "你的公共head文件实际路径.php";
  ?>
  

注意事项 #

• 其他没有定义$page_assets变量的全站页面，完全不会加载Owl的样式、脚本，也不会跑对应的初始化逻辑，不会拖慢全局页面的加载速度
• 只有你指定的单个页面，会自动把对应资源插入到head的预留位置，加载效果和直接把代码写在head标签里完全一致
• 千万别把之前写在公共head里的Owl初始化代码留在全局文件里，否则其他页面就算没引Owl脚本，也会触发owlCarousel is not a function的JS报错，把这段初始化代码挪到上面提到的页面专属资源里就可以规避这个问题

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