博客文章加载不出来的解决办法

1. 现存问题

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

如果你只是游客，只是想临时解决这个显示问题，可以直接这么干：

1. 方法1： F12打开后选中这个灰色的界面，把它的对勾去掉，就能看到遮罩下面的内容了。
2. 方法2： 清空浏览器缓存，重新打开当前的文章。

下图是F12去掉css元素后看到下面的文章：

这是有代价的，会出现单纯的去除背景图，直接导致文章无法滚动。

如果你是要修复你的博客文章，还有个能彻底根治的办法。

2. 错误的解决办法

[!tip]

这个错误时无法解决根本问题的,当前问题从根本上是由于看板娘引起的，如果想要留着看板娘，可以暂时插入下面的代码去除加载后的空标签，如果是想一劳永逸直接去除看板娘解决根本问题的话，直接删除看板娘代码就行，不知道啥是看板娘的代码且用的是和我同样的博客教程的看末尾。

F12打开后能观察到这两个html空内容的元素阻碍了文章的阅览：

把下面的代码段粘贴到博客侧边栏的html里面，对这两行进行延迟3s的删除，

<script>
window.addEventListener('load', function() {
    setTimeout(function() {
        var loadingDiv = document.getElementById('loading');
        if (loadingDiv && loadingDiv.parentNode) {
            while (loadingDiv.firstChild) {
                loadingDiv.parentNode.insertBefore(loadingDiv.firstChild, loadingDiv);
            }
            loadingDiv.remove();
            console.log('已删除 #loading 容器，并保留了其内容');
        }
        var topAnchor = document.querySelector('a[name="top"]');
        if (topAnchor) {
            topAnchor.remove();
            console.log('已删除灰色盖板元素 <a name="top">');
        }
    }, 3000); 
});
</script>

粘贴到末尾的效果如下图：

博客网站后台： 博客后台 - 博客园

进去后点击设置，找到 博客侧边栏公告 ，把相关代码粘贴在末尾即可。

3. 一劳永逸解决问题

原本在教程中有提供看板娘的代码：

直接把看板娘的代码全删了就行了。下面就是看板娘的代码，有下面特征且大部分符合的情况下就可以去除代码了。

<!-- 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>

删除完成就能正常加载文章了。