当前位置: 首页 > 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.rkmt.cn/news/1513230.html

相关文章:

  • 3个速度场机制,在推理预算约束下,如何让策略采样快5倍而不崩溃
  • 终极指南:如何用AntiDupl快速清理电脑中的重复图片
  • 四川华锐净化工程有限公司贵州落地案例 - 哈尺大哥
  • 【视频教程】徒手全套健身视频(初级+中级+高级)
  • C-Ware开发环境:基于C语言的网络处理器高效开发与仿真实践
  • 阿里巴巴管理层调整:无招卸任钉钉CEO,92年陈宇森接棒能否再造AI新钉钉?
  • 3分钟搞定!Windows完美打开iPhone照片的终极免费方案
  • PRO-500,TS9580,G3000,TS6080,g3810,G3811,G5080,TS5320错误代码:5B00,5B02,5B04,1700,1702,1704,P07亲测完美。
  • 3步永久保存QQ空间青春记忆:GetQzonehistory让数字回忆不再丢失
  • 如何深度优化嵌入式系统性能:RK3568开发板技术实战指南
  • 净利率不到4%的东山精密反超胜宏,市值高近700亿,光芯片是关键?
  • waifu2x-caffe深度解析:让你的低分辨率图像瞬间高清化的AI神器
  • 瑞士建筑能效管理软件商Norm Technologies:整合建筑数据,助力建筑减排与资产管理
  • 终极E-Hentai下载器完整教程:免费漫画批量下载解决方案
  • 56F8037开发板快速入门:CodeWarrior环境搭建与LED控制实战
  • 新独立站冷启动收录全攻略:配置、推送、抓取配额优化完整手册
  • S08QE8 MCU超低功耗设计实战:从架构解析到应用优化
  • 多维聚合实战:从SQL到Pandas的交叉分析与OLAP操作心法
  • 江西凌科半导体LK20N04规格书分享
  • VMware Cloud Foundation 9.1 实操详解:可选 Day-N 运维组件完整卸载指南
  • VCF 9.1 进阶实践:将【VCF 网络运维工具 (VON)】部署至非管理网络全流程详解
  • 无锡GEO优化怎么选?TOP3服务商实力排行+FAQ全解 - wxxwlm
  • 别再为Halcon和VisionPro图像转换头疼了!C#实战代码分享(含灰度/彩色图完整方案)
  • 2026 南宁润滑油、液压油、齿轮油、黄油批发商家综合实力排行榜(权威测评版) - 星际AI
  • i.MX53开发板实战:从ARM Cortex-A8入门到嵌入式Linux应用开发
  • 从NeRF的‘慢’到Instant-NGP的‘快’:多分辨率哈希编码如何成为神经渲染的加速器
  • 2026 年 6 月|济南GEO优化服务商盘点:GEO战略价值与主流服务商深度对比 - 外贸老黄
  • Multi-Node LLM Serving-vLLM+Ray(Docker)
  • MCF51QW256嵌入式MCU硬件加密与低功耗设计实战解析
  • 舒扬|四川华锐净化工程有限公司 个人简介 - 哈尺大哥