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

[HRTops]

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/