如何为PHP站点通过单文件引入添加全站统一导航栏等公共元素

CSS方案不可行的原因 #

CSS的::before/::after伪元素的content属性仅支持渲染纯文本内容，不会把传入的字符串当做HTML标签解析，所以你尝试的方法没法生成可交互的导航链接、标题等元素，该方案无法实现需求。

适配当前站点环境的最优方案（PHP服务端引入） #

你本身使用PHP搭建站点，服务端引入公共组件比JS方案兼容性、体验更好，不会出现JS加载延迟导致的导航闪烁、搜索引擎爬虫无法抓取导航内容的问题，操作方法：

• 把公共的导航、页头内容单独存为一个header.php文件：

<!-- header.php 内容 -->
<div id="navigation">
  <nav>
    <a href="/somePage.html">Some page</a>
    <br>
    <a href="mailto:test@example.org">Contact admin</a>
  </nav>
  <h1>站点标题</h1>
</div>
<style>
#navigation {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 999;
}
</style>

• 所有需要加载导航的页面顶部直接加一行引入代码即可：

<?php include 'header.php'; ?>

JavaScript实现单文件引入方案 #

如果你需要仅引入单个文件、不修改服务端逻辑，可以用JS实现，操作步骤如下：

1. 新建一个common.js文件，写入以下代码：

document.addEventListener('DOMContentLoaded', function() {
  // 构造导航HTML
  const navHtml = `
    <div id="navigation">
      <nav>
        <a href="/somePage.html">Some page</a>
        <br>
        <a href="mailto:test@example.org">Contact admin</a>
      </nav>
      <h1>站点标题</h1>
    </div>
  `;
  // 插入到页面顶部
  document.body.insertAdjacentHTML('afterbegin', navHtml);
  
  // 插入导航样式
  const style = document.createElement('style');
  style.textContent = `
    #navigation {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      background: #fff;
      z-index: 999;
    }
  `;
  document.head.appendChild(style);
});

2. 所有需要加载导航的页面，在<head>标签里引入该JS文件即可：

<script src="/common.js"></script>

注意：JS方案存在一定缺陷：如果用户禁用JS，导航就不会显示；页面加载时可能出现短暂的导航空白闪烁；搜索引擎爬虫可能无法抓取到JS插入的导航内容，影响站点收录。优先推荐使用PHP引入方案。

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