OpenList丑？美化了解一下

1
<!-- 修改 href 和 font-family 以自定义字体，删除字体 <link> 和字体 CSS 则使用 OpenList 默认字体 -->
2
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600&display=swap" rel="stylesheet">
3
<link href="https://cdn.jsdmirror.com/gh/SajunaOo/OpenList-Moe@dist/css/OpenList-Moe.min.css" rel="stylesheet">
4

5
<style>
6
/** 修改 URL 以自定义背景，删除背景 CSS 则使用 OpenList Moe 默认背景 */
7
:root {
8
  --moe-color-theme: 248 179 78; /** 主题色（必填） */
9
  --moe-bg-image-desktop: url("https://cdn.jsdmirror.com/gh/SajunaOo/OpenList-Moe-Image/light_desktop/早秋_2.webp"); /** 默认白天模式桌面端背景图 */
10
  --moe-bg-image-mobile: url("https://cdn.jsdmirror.com/gh/SajunaOo/OpenList-Moe-Image/light_mobile/沉浸感_3.webp"); /** 默认白天模式移动端背景图 */
11
}
12

13
.hope-ui-dark {
14
  --moe-bg-image-desktop: url("https://cdn.jsdmirror.com/gh/SajunaOo/OpenList-Moe-Image/dark_desktop/新春快乐_5.webp"); /** 默认夜间模式桌面端背景图 */
15
  --moe-bg-image-mobile: url("https://cdn.jsdmirror.com/gh/SajunaOo/OpenList-Moe-Image/dark_mobile/沉浸感_6.webp"); /** 默认夜间模式移动端背景图 */
16
}
17

18
/**
19
 * 自定义字体
20
 *
21
 * - 全局字体
22
 * - Markdown 区域字体
23
 * - Aplayer 音乐播放器字体
24
 * - ArtPlayer 视频播放器和 tooltip 提示字体
25
 */
26
body, .markdown-body, .aplayer, .art-video-player, [class*=hint--]:after {
27
  font-family: 'Noto Serif SC' !important;
28
}
29
</style>

JavaScript 和备案信息#

在 OpenList 的自定义内容添加以下代码：

1
<script src="https://cdn.jsdmirror.com/gh/SajunaOo/OpenList-Moe@dist/js/OpenList-Moe.min.js"></script>
2

3
<!-- 如果你不需要添加备案号，请删除以下代码 -->
4
<div class="beian-container" style="text-align: center;" hidden>
5
  <a class="hope-anchor hope-c-PJLV-idrWMwW-css" href="https://beian.miit.gov.cn" target="_blank" rel="noopener" style="font-size: 14px;">
6
    豫 ICP 备 2025000000 号</a>
7
</div>
8

9
<script>
10
// 备案信息加载
11
(()=>{let _o;const _f=()=>{const e=document.querySelector('.footer'),t=document.querySelector('.beian-container');return e&&t&&(e.append(t),t.hidden=!1,_o?.disconnect(),_o=null,!0)};_f()||(_o=new MutationObserver(_f), _o.observe(document,{childList:1,subtree:1}))})();
12
</script>