[EvanNav 6.3.1] 如何删除加载页面，让 Nav 更符合你的需求

EvanNav 官网（已经去除加载页）

https://evan.plus

有些朋友希望 EvanNav 不要有加载页面，于是做了这个小小教程！

好的，为了删除加载页，您需要在以下文件中进行代码修改：

1. public/index.html

删除以下代码块：

HTML

<!-- 加载缓冲页 --> <div class="loading-screen" id="loading-screen"> <div class="loading-icon"></div> <div class="loading-title" id="loading-title"></div> <div class="loading-progress"> <div class="progress-bar" id="progress-bar"></div> </div> </div> 

2. public/script.js

查找并删除以下代码块：

Javascript

// 优先加载自定义网站名称，避免延迟 const loadingTitle = utils.getElement('loading-title'); if (loadingTitle) { loadingTitle.textCOntent= settings.websiteTitle || 'My Website Favorites'; } 

然后，将文件末尾的：

Javascript

document.addEventListener('DOMContentLoaded', init); 

替换为：

Javascript

document.addEventListener('DOMContentLoaded', async function() { await init(); document.getElementById('frontend').style.opacity = '1'; }); 

3. public/styles.css

删除或注释掉以下与加载页面相关的 CSS 规则：

CSS

.loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #f8fafc; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease; } .loading-icon { width: 50px; height: 50px; border: 4px solid #1e40af; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; } .loading-title { margin-top: 1.5rem; font-size: 1.2rem; font-weight: 600; color: #1e40af; } .loading-progress { width: 200px; height: 8px; background: #e2e8f0; border-radius: 4px; margin-top: 1.5rem; overflow: hidden; } .progress-bar { width: 0; height: 100%; background: #1e40af; transition: width 0.2s ease; } @keyframes spin { to { transform: rotate(360deg); } } 

经过以上三部即可删除加载页面！切记，更改文件前「备份文件」！

我的 blog 原文： https://www.evan.xin/4074/