Laravel 9基于<h2>动态展示内容：本地与Hostinger部署差异问题

可能的原因 #

• PHP DOM解析环境差异：本地与Hostinger的PHP配置（如libxml参数）不同，导致解析TinyMCE输出的HTML时，对空白节点、未闭合标签的处理逻辑不一致，进而导致section内容提取错误。
• 缓存未更新：Hostinger默认开启的OPcache、页面缓存或Laravel视图/配置缓存，导致旧的处理逻辑或HTML解析结果未被替换。
• TinyMCE输出结构不一致：本地与服务器端的TinyMCE配置（如forced_root_block、schema）不同，生成的HTML结构存在差异（比如<h2>被额外<div>包裹），干扰前端/后端的节点选择逻辑。
• 前端JS逻辑兼容性问题：服务器端的JS资源被压缩、缓存，或HTML结构差异导致选择器（如nextUntil）匹配错误，错误将section内容纳入导航项。

解决步骤 #

1. 排查并修正HTML解析逻辑（PHP端） #

如果是Laravel后端处理<h2>分割section，检查DOMDocument的使用：

• 确保解析时忽略空白节点，避免多余节点干扰内容提取：

$dom = new DOMDocument();
libxml_use_internal_errors(true);
// 添加LIBXML_NOBLANKS参数，忽略空白文本节点
$dom->loadHTML($content, LIBXML_NOBLANKS | LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
libxml_clear_errors();

// 后续处理<h2>节点的逻辑保持一致
$headings = $dom->getElementsByTagName('h2');
// ... 生成section和导航的逻辑

• 打印服务器端解析后的HTML结构，与本地对比，确认<h2>节点的层级、父节点是否一致。

2. 清除所有缓存 #

• 清除Laravel缓存：

php artisan cache:clear
php artisan view:clear
php artisan config:clear
php artisan route:clear

• 登录Hostinger后台，找到「Cache Manager」，清除网站缓存和OPcache。

3. 统一TinyMCE配置 #

确保本地与服务器端的config/tiny.php（或TinyMCE初始化JS）配置一致，重点检查：

tinymce.init({
  // 强制<h2>作为独立块级元素，避免被<div>包裹
  forced_root_block: false,
  // 使用标准HTML schema，确保标签结构规范
  schema: 'html5',
  // 禁用自动换行生成多余标签
  nowrap: true,
  // ... 其他配置
});

4. 修正前端JS逻辑 #

如果是前端处理导航和section生成，调整选择器逻辑，确保只提取<h2>文本作为导航项，且section内容范围正确：

const contentContainer = document.querySelector('.article-content');
const headings = contentContainer.querySelectorAll('h2');

if (headings.length >= 2) {
  // 生成侧边导航
  const sidebarNav = document.createElement('nav');
  sidebarNav.classList.add('sticky-sidebar');

  headings.forEach((heading, idx) => {
    const sectionId = `section-${idx + 1}`;
    heading.id = sectionId;
    
    const navLink = document.createElement('a');
    navLink.href = `#${sectionId}`;
    // 只取<h2>的文本内容，避免包含子节点或多余内容
    navLink.textContent = heading.textContent.trim();
    sidebarNav.appendChild(navLink);
  });

  document.querySelector('.page-container').prepend(sidebarNav);

  // 包裹section内容
  let currentSection = null;
  // 遍历容器内的所有直接子节点
  Array.from(contentContainer.children).forEach(child => {
    if (child.tagName === 'H2') {
      if (currentSection) {
        contentContainer.insertBefore(currentSection, child);
      }
      currentSection = document.createElement('section');
      currentSection.appendChild(child);
    } else if (currentSection) {
      currentSection.appendChild(child);
    }
  });
  // 插入最后一个section
  if (currentSection) {
    contentContainer.appendChild(currentSection);
  }
}

内容的提问来源于stack exchange，提问作者Naser.Sadeghi