title: 博客文章加载不出来的解决办法
content: 主要是解决文章无法加载的问题
总结:
1. 现存问题
很多网友和我一样,学习的这篇文章在博客园搭建的博客网站: 博客园美化「详细教程+代码配置」 - 凌云_void - 博客园 进行博客园的美化配置,但是相关配置全部完成后出现了类似下图的加载出现灰面的情况,导致文章只能访问一次,第二次访问无法阅读。

如果你只是游客,只是想临时解决这个显示问题,可以直接这么干:
- 方法1: F12打开后选中这个灰色的界面,把它的对勾去掉,就能看到遮罩下面的内容了。
- 方法2: 清空浏览器缓存,重新打开当前的文章。
下图是F12去掉css元素后看到下面的文章:

如果你是要修复你的博客文章,还有个能彻底根治的办法。
2. 成因分析
F12打开后能观察到这两个html空内容的元素阻碍了文章的阅览:

那么只要去掉这两个元素就行了。
3. 解决问题
[!tip]
这个问题从根本上是由于看板娘引起的,如果想要留着看板娘,可以暂时插入下面的代码断去除加载后的空标签,如果是想一劳永逸直接去除看板娘解决根本问题的话,直接删除看板娘代码就行,不知道啥是看板娘的代码且用的是和我同样的博客教程的看末尾。
把下面的代码段粘贴到博客侧边栏的html里面就行了。
<script>
// 等待页面完全加载(包括所有资源、主题脚本执行完毕)
window.addEventListener('load', function() {var loadingDiv = document.getElementById('loading');if (loadingDiv && loadingDiv.parentNode) {// 把 loading 里面的内容移到外面(防止内容丢失)while (loadingDiv.firstChild) {loadingDiv.parentNode.insertBefore(loadingDiv.firstChild, loadingDiv);}// 再删除空的 loading 容器loadingDiv.remove();console.log('已删除 #loading 容器,并保留了其内容');}
});
</script>
<script>
(function() {// 等待页面完全加载(包括主题渲染完成)window.addEventListener('load', function() {var topAnchor = document.querySelector('a[name="top"]');if (topAnchor) {topAnchor.remove();console.log('已删除灰色盖板元素 <a name="top">');}});
})();
</script>
粘贴到末尾的效果如下图:

博客网站后台: 博客后台 - 博客园
进去后点击设置,找到 博客侧边栏公告 ,把相关代码粘贴在末尾即可。
4. 真正一劳永逸保证文章正常阅读的办法
把看板娘的代码全删了就行了。下面就是看板娘的代码,有下面特征且大部分符合的情况下就可以去除代码了。
<!-- live2D 看板娘-->
<script src="https://l2dwidget.js.org//lib/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget
.on('*', (name) => {console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')})
.init({dialog: {enable: true,script: {'every idle 5s': '$hitokoto$','hover .star': '星星在天上而你在我心里 (*/ω\*)','tap body': '哎呀!别碰我!','tap face': '人家已经不是小孩子了!'}},"model": {<!-- jsonpath控制显示看板娘模型 -->jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json","scale": 1},"display": {"position": "right", //看板娘的表现位置"width": 210, //看板娘的宽度"height": 380, //看板娘的高度"hOffset": 20,"vOffset": -20},"mobile": {"show": true,"scale": 0.5},"react": {"opacityDefault": 0.7,"opacityOnHover": 0.2}
});
</script>
