OpenList 美化配置分享 · 磨砂 + 必应每日一图 - 『自习室』EXYONE的篝火小屋

写在前面：这份配置以「轻盈、护眼、文艺」为目标，核心特色是必应每日壁纸 + 磨砂玻璃效果，白天黑夜都尽量舒服。适合喜欢简约风的小伙伴。已实测兼容 OpenList 最新版本（截至2026年3月），浏览器：Chrome / Edge / Safari 表现良好。

一、准备工作（必做）

在「管理后台 → 设置 → 全局」里，找到两个关键输入框：

自定义头部（head）：放 link / script / style 标签
自定义内容（body 底部）：放 html 结构 + 额外 script（可选）

我们主要用「自定义头部」塞入所有样式和资源。

先把下面这些外部资源依次复制到自定义头部的最前面（顺序不严格，但建议这样摆）：

<!-- ES6 Polyfill（兼容旧浏览器） -->
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>

<!-- 霞鹜文楷（强烈推荐的免费中文字体，阅读体验提升巨大） -->
<link rel="stylesheet" href="https://hanzi.itedev.com/fonts/986/result.css" />

<!-- Font Awesome 6 Free（图标库，后面可能用到小图标） -->
<link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/css/all.min.css" />

<!-- 如果你想加音乐播放器（可选） -->
<link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/dist/APlayer.min.css" />
<script src="https://npm.elemecdn.com/[email protected]/dist/APlayer.min.js"></script>
<script src="https://npm.elemecdn.com/[email protected]/js/Meting.min.js"></script>

小提示：这些 CDN 基本都用了国内加速镜像，加载速度通常比官方快。如果某天挂了，可以换成 jsDelivr 或 unpkg 镜像。
字体 CDN 使用的是 minc-nice-100 提供的千字网镜像加速服务，千字网是站长 exyone 本人整理维护的字体 CDN，欢迎品鉴～

二、核心样式（复制到自定义头部）

这是整套配置的灵魂，直接替换原来的 <style> 部分即可。我做了几处优化：

增加了更稳定的必应壁纸获取方式（自动最新图）
夜间模式加了更明显的暗遮罩，文字可读性更好
统一了磨砂参数，减少代码重复
补充了常见元素的适配（通知框、代码块等）

<style>
/* ===== OpenList 梅花美化 - 磨砂 + 必应每日壁纸 ===== */

/* 全局字体 */
*,
body {
  font-family: 'LXGW WenKai', system-ui, -apple-system, sans-serif !important;
  margin: 0;
}

/* 可选：极简渐变背景画布（不喜欢可以删） */
#canvas-basic {
  position: fixed;
  inset: 0;
  z-index: -999;
  pointer-events: none;
}

/* 必应每日一图（推荐使用重定向服务，自动获取最新） */
.hope-ui-light {
  background: url('https://bing.biturl.top/?resolution=1920x1080&format=image') center/cover fixed no-repeat !important;
  transition: background-image 0.8s ease;
}

.hope-ui-dark {
  background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
              url('https://bing.biturl.top/?resolution=1920x1080&format=image') center/cover fixed no-repeat !important;
  background-blend-mode: overlay;
  color: rgba(255,255,255,0.92) !important;
}

/* 统一磨砂玻璃容器（最核心效果） */
.hope-ui-light .hope-c-PJLV-ikSuVsl-css,
.hope-ui-light .hope-c-PJLV-ijgzmFG-css,          /* README */
.hope-ui-light .body > .nav,
.hope-ui-light .hope-c-PJLV-ihVEsOa-css,          /* 导航 */
.hope-ui-light pre,
.hope-ui-light .newValine,
.hope-ui-light .hope-c-ivMHWx-hZistB-cv           /* 按钮等 */ {
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border-radius: var(--hope-radii-lg);
  box-shadow: 0 6px 32px rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.18);
}

.hope-ui-dark .hope-c-PJLV-iiuDLME-css,
.hope-ui-dark .hope-c-PJLV-ijgzmFG-css,
.hope-ui-dark .body > .nav,
.hope-ui-dark .hope-c-PJLV-ihVEsOa-css,
.hope-ui-dark pre,
.hope-ui-dark .newValine {
  background: rgba(30,30,40,0.48) !important;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border-radius: var(--hope-radii-lg);
  box-shadow: 0 6px 32px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(245,245,255,0.94) !important;
}

/* 代码块夜间更友好 */
.hope-ui-dark pre {
  background: rgba(20,20,30,0.6) !important;
}

/* 顶部导航全透 */
#root > .header {
  background: transparent !important;
  backdrop-filter: blur(12px);
}

/* 底部版权区微调（可选隐藏） */
dibu {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 1.2rem 0;
  font-size: 0.92rem;
  opacity: 0.8;
}

/* 评论区（Valine / Waline 等） */
.newValine {
  margin: 1.5rem auto;
  width: min(96%, 960px);
  padding: 1.5rem;
  border-radius: var(--hope-radii-xl);
  backdrop-filter: blur(10px);
}

/* 如果开了 APlayer 音乐播放器的小调整 */
.aplayer {
  bottom: 0 !important;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
</style>

三、常见问题 & 进阶小建议

壁纸不更新怎么办？ 换用 https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN + js 动态取图（更稳，但稍复杂）。或者直接用随机风景图 API。
想加开屏动画 / LOGO？ 可以往「自定义内容」里加一段 html + js 做淡入动画（参考 bilibili 上一些大佬的写法）。
鼠标指针 / 雪花 / 樱花特效？ 性能杀手，手机端慎开。如果真想要，推荐轻量级 cursor-effects 库。
Valine 评论区背景图？ 在 .vedit 加 background-image 即可（你原来的 gif 已经很可爱了～）

最后，愿你的小站如梅花般清雅，静静绽放在冬日山间。有任何奇怪的适配 bug，欢迎回来篝火旁说一声，我再帮你调一调。

（完）