当前位置: 首页 > news >正文

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


title: 博客文章加载不出来的解决办法
content: 主要是解决文章无法加载的问题

总结:

1. 现存问题

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

image-20260612145552761

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

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

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

image-20260612145822795

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

2. 成因分析

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

image-20260612151521707

那么只要去掉这两个元素就行了。

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>

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

image-20260612145236565

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

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

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>
http://www.jsqmd.com/news/1001455/

相关文章:

  • 2026年杭州AI搜索优化源头厂商十大实力服务商前瞻评测与选型指南 - 品牌报告
  • MPC5606E汽车以太网音视频网关:架构解析与工程实践
  • 珠海金湾管道疏通 TOP5 榜(2026 年6月最新权威版)无中间商甄选商家 - 园子一号
  • 3个速度场机制,在推理预算约束下,如何让策略采样快5倍而不崩溃
  • Splunk搜索语言SPL零基础教程:index、source、sourcetype、fields核心详解
  • 【视频教程】徒手全套健身视频(初级+中级+高级)
  • 终极指南:如何用AntiDupl快速清理电脑中的重复图片
  • 四川华锐净化工程有限公司贵州落地案例 - 哈尺大哥
  • ChanlunX:如何为通达信构建高效的缠论分析DLL插件?
  • WarcraftHelper:魔兽争霸3完整兼容性修复与性能优化解决方案
  • C-Ware开发环境:基于C语言的网络处理器高效开发与仿真实践
  • 珠海香洲管道疏通 TOP5 榜(2026 年6月最新权威版)无中间商甄选商家 - 园子一号
  • 阿里巴巴管理层调整:无招卸任钉钉CEO,92年陈宇森接棒能否再造AI新钉钉?
  • MPC509外部总线接口(EBI)与片选模块配置详解
  • 宜家停售智能百叶窗,Eve推MotionBlinds升级套件,兼容Fridans且支持Matter协议
  • PRO-500,TS9580,G3000,TS6080,g3810,G3811,G5080,TS5320错误代码:5B00,5B02,5B04,1700,1702,1704,P07亲测完美。
  • 3分钟搞定!Windows完美打开iPhone照片的终极免费方案
  • USB突然无法识别设备问题解决
  • 如何深度优化嵌入式系统性能:RK3568开发板技术实战指南
  • 5个实用技巧:用Locale-Emulator轻松解决软件语言兼容性问题
  • 3步永久保存QQ空间青春记忆:GetQzonehistory让数字回忆不再丢失
  • 净利率不到4%的东山精密反超胜宏,市值高近700亿,光芯片是关键?
  • VMware ESXi 9.1.0.0100 版本解读 | 安全更新、硬件适配与集成驱动部署实战
  • ComfyUI-Impact-Pack V8:AI图像增强的终极解决方案,快速提升图像质量
  • waifu2x-caffe深度解析:让你的低分辨率图像瞬间高清化的AI神器
  • 56F8037开发板快速入门:CodeWarrior环境搭建与LED控制实战
  • 用ESP32和MPU6500做个防抖云台:从零到一的Arduino实战(附完整代码与避坑指南)
  • 瑞士建筑能效管理软件商Norm Technologies:整合建筑数据,助力建筑减排与资产管理
  • 新独立站冷启动收录全攻略:配置、推送、抓取配额优化完整手册
  • 终极E-Hentai下载器完整教程:免费漫画批量下载解决方案