写的文章多了以后，翻页发现有重叠问题存在。

发现问题后，我想要F12查看什么情况，却发现F12后页面又正常了。经过多次调试后，发现只要缩放页面，就可以将页面恢复。

查找相关问题后，可能是由CSS样式问题或JavaScript 动态布局逻辑问题引起的。很可惜我前端不太会，没法自己找错误。找到的解决方式如下：

安装插件Insert Headers and Footers

在启动插件后，在footer部分添加以下代码。

<script>
window.addEventListener('load', () => {
    setTimeout(() => {
        window.dispatchEvent(new Event('resize'));
    }, 400); // 延迟400ms确保所有元素加载并布局完成
});

// 使用 MutationObserver 监听 DOM 变化
const observer = new MutationObserver(() => {
    setTimeout(() => {
        window.dispatchEvent(new Event('resize'));
    }, 200); // 延迟200ms确保页面布局完成
});

observer.observe(document.body, { childList: true, subtree: true });

</script>

原本我只使用第一部分addEventListener。发现没有解决问题，只有在首次刷新页面的时候才可以触发。而我的问题，是在页面翻页的时候才出现的，翻页并没有整体刷新页面。

所以又加了下面的部分，页面就恢复正常了。