全站页面实现DRY导航栏的最优方案咨询及JS方案改进需求

一、前端优化方案（原生JS/jQuery，解决闪烁） #

你的现有JS方案出现闪烁，核心原因是占位文本<inserter class="navbar">Home</inserter>会先被渲染，替换后才更新内容。解决思路是先隐藏占位元素，加载完成后再显示最终导航栏：

1. 前置CSS隐藏占位 #

给占位元素添加默认隐藏样式，确保初始不会渲染出占位文本：

.inserter.navbar {
    display: none;
}

2. 原生JS实现（无依赖） #

// 获取占位元素
const navInserter = document.querySelector('.inserter.navbar');
// 加载导航栏内容
fetch('nav-bar.html')
    .then(response => response.text())
    .then(html => {
        // 替换占位内容
        navInserter.innerHTML = html;
        // 显示最终导航栏（根据你的布局调整display值，比如flex）
        navInserter.style.display = 'block';
    })
    .catch(error => {
        // 加载失败降级处理
        navInserter.textContent = '导航加载失败';
        navInserter.style.display = 'block';
    });

3. jQuery实现 #

如果项目依赖jQuery，写法更简洁：

$('.inserter.navbar').load('nav-bar.html', function() {
    // 加载完成后显示导航栏
    $(this).show();
}).fail(function() {
    // 加载失败降级
    $(this).text('导航加载失败').show();
});

二、PHP服务器端渲染方案（无前端闪烁，标准做法） #

如果服务器支持PHP，这是最稳妥的方案——服务器在输出页面前就把导航栏内容插入，前端拿到的是完整页面，完全不会有闪烁：

1. 把导航栏内容保存为nav-bar.html（或.php后缀，不影响功能）
2. 在每个需要导航栏的PHP页面的对应位置，直接引入：

<?php include 'nav-bar.html'; ?>

• 若导航栏在子目录（比如includes/nav-bar.html），调整路径为include 'includes/nav-bar.html';
• 可以用require_once替代include，如果导航栏加载失败会直接抛出错误，方便排查问题：

<?php require_once 'nav-bar.html'; ?>

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