前言
今天有群友突然问我用 openList 搭建的云盘是怎么美化的，那这里刚刚好水篇文章记录一下。
主要操作
openList 是开源的，如果从源代码去改还是比较麻烦，所以这里主要使用已有的三个功能来完成美化修改。
-
设置-全局-自定义头部
-
设置-全局-自定义内容
-
元信息
具体操作
先在【设置-全局-自定义内容】和中创建如下的 HTML 架构，然后一步步往对应位置填入代码就可以了。
<head>
<style>
/*下面用来放 CSS 样式*/
</style>
</head>
<body>
<!--下面用来放 HTML 代码-->
<script>
//用来放置 JS 脚本
</script>
</body>备案号修改
效果
css 样式框架中写入如下代码：
/* ===== 备案信息样式 ===== */
#customize {
display: none;
text-align: center;
padding: 15px 0;
font-size: 13px;
line-height: 1.8;
color: #666;
}
.nav-link {
display: inline-flex;
align-items: center;
color: #333 !important;
text-decoration: none;
margin: 0 4px;
transition: color 0.2s;
}
.nav-link:hover { color: #0a93f5 !important; }
.nav-link img { height: 16px; margin-right: 4px; vertical-align: middle; }
.nav-link img[alt="ipv4-ipv6"] { height: 18px; vertical-align: -4px; }html 框架中写入如下代码：
<div id="customize">
<div class="info-group">
Copyright © 2020-<span id="year"></span>
<a class="nav-link" href="http://www.grbj.cn" target="_blank">广然笔记,</a>
Powered by <a class="nav-link" href="https://github.com/OpenListTeam/OpenList" target="_blank">OpenList.</a>
</div>
<div class="info-group">
<a class="nav-link" href="https://beian.miit.gov.cn/" target="_blank">
<img src="https://logo.grbj.cn/icp.svg" alt="ICP">湘ICP备19016271号
</a>
<a class="nav-link" href="https://beian.mps.gov.cn/#/query/webSearch?code=43010202001733" target="_blank">
<img src="https://logo.grbj.cn/police.svg" alt="公安">湘公网安备43010202001733号
</a>
<span class="nav-link"><img src="https://api.grbj.cn/ipv4-ipv6.php" alt="ipv4-ipv6"></span>
</div>
</div>页面右下角公告弹窗
效果
css 样式框架中写入如下代码：
/* ===== 备案信息样式 ===== */
#customize {
display: none;
text-align: center;
padding: 15px 0;
font-size: 13px;
line-height: 1.8;
color: #666;
}
.nav-link {
display: inline-flex;
align-items: center;
color: #333 !important;
text-decoration: none;
margin: 0 4px;
transition: color 0.2s;
}
.nav-link:hover { color: #0a93f5 !important; }
.nav-link img { height: 16px; margin-right: 4px; vertical-align: middle; }
.nav-link img[alt="ipv4-ipv6"] { height: 18px; vertical-align: -4px; }
/* ===== 弹窗系统 ===== */
#popup {
position: fixed;
bottom: 25px;
right: 25px;
width: 340px;
max-width: 85vw;
padding: 24px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(12px);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 16px;
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
z-index: 2000;
opacity: 0;
transform: translateY(20px);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
pointer-events: none;
font-family: system-ui, -apple-system, sans-serif;
}
#popup.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.popup-title {
font-size: 1.15rem;
font-weight: 800;
margin-bottom: 16px;
text-align: center;
background: linear-gradient(135deg, #0a93f5 0%, #00d4ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.popup-content p { font-size: 14px; line-height: 1.6; color: #444; margin-bottom: 12px; }
.keyword-a { color: #ff4d4f; font-weight: 600; }
.keyword-hover {
color: #0a93f5;
border-bottom: 1px dashed #0a93f5;
cursor: help;
font-weight: 600;
padding: 0 2px;
transition: all 0.2s;
}
.keyword-hover:hover { background: rgba(10, 147, 245, 0.1); }
.close-btn {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
background: #f5f5f5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #999;
transition: all 0.2s;
}
.close-btn:hover { background: #eee; color: #333; transform: rotate(90deg); }
/* ===== 图片预览 (智能定位) ===== */
#image-preview {
position: fixed;
display: none;
z-index: 2100;
padding: 6px;
background: white;
border-radius: 10px;
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
pointer-events: none;
}
#image-preview img { display: block; max-width: 220px; max-height: 220px; border-radius: 6px; }html 框架中写入如下代码：
<div id="popup">
<div class="close-btn" onclick="togglePopup(false)">×</div>
<div class="popup-content">
<div class="popup-title">「Widely 云」公告</div>
<!--<p><span class="keyword-a">⚠️ 网站功能调试中，所有功能不可用。</span></p>-->
<p><span class="keyword-a">⚠️ 请勿使用微信/QQ内置浏览器打开，避免无法访问。</span></p>
<p>1. 开启真人验证：请根据不同下载目录下方的关键词说明完成操作。
</p>
<p>2. 下载速度受总带宽限制，高峰期建议错峰下载。</p>
<p>3. eNSP下载：可加入
<span class="keyword-hover" data-img="https://images.grbj.cn/20250701212659954.png">QQ群（609580764）</span>
获取。注：QQ等级 < 4级用户暂无法入群。
</p>
</div>
</div>
<div id="image-preview"></div>js 框架中写入如下代码：
// 1. 基础信息初始化
document.getElementById('year').textContent = new Date().getFullYear();
// 2. 弹窗逻辑
const popup = document.getElementById('popup');
const preview = document.getElementById('image-preview');
const togglePopup = (show) => {
show ? popup.classList.add('active') : popup.classList.remove('active');
};
window.addEventListener('load', () => setTimeout(() => togglePopup(true), 1000));
// 3. 智能图片预览逻辑
document.querySelectorAll('.keyword-hover').forEach(el => {
el.addEventListener('mouseenter', (e) => {
const imgSrc = el.dataset.img;
preview.innerHTML = `<img src="${imgSrc}" onload="this.parentElement.style.display='block'">`;
});
el.addEventListener('mousemove', (e) => {
const gap = 20; // 距离鼠标的间隔
let x = e.clientX + gap;
let y = e.clientY - preview.offsetHeight - gap;
// 边界检测：防止超出右侧
if (x + preview.offsetWidth > window.innerWidth) {
x = e.clientX - preview.offsetWidth - gap;
}
// 边界检测：防止超出顶部
if (y < 0) {
y = e.clientY + gap;
}
preview.style.left = `${x}px`;
preview.style.top = `${y}px`;
});
el.addEventListener('mouseleave', () => {
preview.style.display = 'none';
preview.innerHTML = '';
});
});
// 4. 页脚检测逻辑 (带超时保护)
let attempts = 0;
const footerDetector = setInterval(() => {
attempts++;
if (document.querySelector('.footer') || attempts > 50) {
document.getElementById('customize').style.display = 'block';
clearInterval(footerDetector);
}
}, 200);原来页面一些样式的隐藏
原来有些样式不好看，可以通过在 css 样式框架中写入如下代码将他们隐藏起来。
/* ===== 基础隐藏与布局 ===== */
.hope-c-PJLV-idrWMwW-css, .hope-c-iHuheP, .hope-c-PJLV-ifcGSHf-css,
.hope-c-PJLV-ihQbspH-css, .hope-c-PJLV-ijzCLcW-css, .hope-c-PJLV-ibojvKk-css,
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ihYBJPK-css { display: none !important; }
.hope-c-PJLV-ibwASZs-css { width: 100%; }说明代码
效果
这个在【元信息】中添加一个根目录的元信息。选择/（根路径）
说明中填入如下内容：
## 说明
<span class="keyword-a">请不要使用微信和 QQ 内置的浏览器打开本站，你会打不开的。</span>
1. 本站提供的所有工具及软件均来源于网络。我们尊重知识产权，若您发现任何侵权内容，请通过站长邮箱（gr@grbj.cn）与我们联系，我们将尽快处理并删除相关内容。
2. 本站服务器性能和带宽资源有限，为避免爬虫和机器人干扰，本站已开启真人验证。如需获取密码，请按以下步骤操作：
- 请关注 “广然笔记” 微信公众号。
- 在微信公众号聊天框中发送<span class="keyword-a">“最后一级目录的目录名”</span>获取密码。
- 系统将自动回复密码。请注意，密码由系统不定期修改，此步骤仅为增加爬虫爬取难度。对于因此带来的不便，请理解与支持。
3. 本站为私人网盘，<span class="keyword-a">如无密码回复，即代表该资源不对外提供下载</span>。我们保留对资源下载权限的最终解释权。
4. 本站由[多吉云](https://www.dogecloud.com/?iuid=11043)和[天翼云](https://cloud.189.cn)提供加速服务。
<!DOCTYPE html>
<html>
<head>
<style>
/* 备用方案：基于视口宽度的响应式设计 */
.responsive-img {
max-width: 100%;
border: 0;
}
/* 默认显示PC图片（大图） */
.responsive-img {
content: url('https://images.grbj.cn/20250322205207355.png');
}
/* 移动端小屏幕显示移动版图片 */
@media only screen and (max-width: 768px) {
.responsive-img {
content: url('https://images.grbj.cn/20250322204643782.png');
}
}
</style>
</head>
<body>
<img id="dynamicImage" class="responsive-img" alt="广然笔记宣传">
</body>
</html>导航栏标题
效果
在根目录【元信息-顶部说明】中写入如下内容：
#### [首页](https://cloud.grbj.cn/) [ICT学习客栈](https://www.ictstu.com) [广然笔记](https://www.grbj.cn) [留言反馈](https://www.grbj.cn/widely.html)密码输入文字
效果
在【设置-全局-自定义头部】写入如下代码：
<script>
(function() {
const TIMER_INTERVAL = 600;
function getKeywordFromPath() {
const path = window.location.pathname;
const segments = decodeURIComponent(path).split('/').filter(Boolean);
if (segments.length === 0) return "该文件夹";
const last = segments[segments.length - 1];
if (last.includes('.') && segments.length > 1) return segments[segments.length - 2];
return last;
}
function insertQrCard() {
const mainContainer = document.querySelector('.obj-box > .hope-stack');
if (!mainContainer) return false;
if (document.getElementById('final-qr-box')) return false;
if (!document.body.innerText.includes('请输入密码')) return false;
const keyword = getKeywordFromPath();
const card = document.createElement('div');
card.id = 'final-qr-box';
card.style.cssText = `
width: 100%;
margin: 32px 0 16px;
padding: 20px 24px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(0px);
border-radius: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
box-sizing: border-box;
transition: all 0.2s;
`;
card.innerHTML = `
<div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;">
<!-- 左侧文字区 -->
<div style="flex: 2; min-width: 200px;">
<div style="font-weight: 600; font-size: 1.05rem; letter-spacing: -0.2px; color: #2c3e50; margin-bottom: 12px; border-left: 3px solid #2c7da0; padding-left: 12px;">关注《广然笔记》</div>
<div style="font-size: 0.85rem; color: #5a6874; margin-bottom: 8px;">关注后私信关键词：</div>
<div style="font-family: 'SF Mono', 'Fira Code', monospace; font-weight: 600; font-size: 1rem; color: #1e6f5c; margin-bottom: 16px; background: rgba(44,125,160,0.08); display: inline-block; padding: 4px 12px; border-radius: 20px;">${escapeHtml(keyword)}</div>
<div style="font-size: 0.72rem; color: #7f8c8d; line-height: 1.5; background: rgba(0,0,0,0.02); padding: 8px 12px; border-radius: 16px;">
关键词必须一模一样（大小写+空格）<br>
没有密码回复 → 目录不开放
</div>
</div>
<!-- 右侧二维码区 -->
<div style="text-align: center; flex-shrink: 0; background: rgba(255,255,255,0.6); padding: 8px; border-radius: 20px;">
<img src="https://logo.grbj.cn/wx-qrcode.png" alt="公众号二维码" style="width: 110px; height: 110px; border-radius: 16px; background: white; display: block; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
<div style="font-size: 0.7rem; margin-top: 8px; color: #5a6874;">微信扫码关注</div>
</div>
</div>
`;
mainContainer.appendChild(card);
return true;
}
function removeQrCard() {
const existing = document.getElementById('final-qr-box');
if (existing) existing.remove();
}
function escapeHtml(str) {
return str.replace(/[&<>]/g, function(m) {
if (m === '&') return '&';
if (m === '<') return '<';
if (m === '>') return '>';
return m;
});
}
setInterval(() => {
const isPasswordPage = document.body.innerText.includes('请输入密码');
if (isPasswordPage) {
insertQrCard();
} else {
removeQrCard();
}
}, TIMER_INTERVAL);
const style = document.createElement('style');
style.textContent = `
#final-qr-box {
animation: fadeSlideUp 0.3s ease-out;
}
@keyframes fadeSlideUp {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 暗色主题自适应 */
@media (prefers-color-scheme: dark) {
#final-qr-box {
background: rgba(30, 32, 38, 0.7);
border-color: rgba(255,255,255,0.08);
}
#final-qr-box .left-title {
color: #e2e8f0 !important;
}
}
`;
document.head.appendChild(style);
})();
</script>后记
如果有什么需要修改的直接复制代码给 AI 就行了，让 AI 改改然后再粘贴回去就行了。
