美化方法
看图，登录OpenLIst （Alist）管理后台，把美化方案的对应代码填入即可
方案一
全局自定义内容
<!--延迟加载-->
<!--如果要写自定义内容建议都加到这个延迟加载的范围内-->
<div id="customize" style="display: none;">
<div>
<!--音乐播放器-->
<meting-js fixed="true" autoplay="false" theme="#409EFF" list-folded="true" auto="QQ音乐或者网易云的链接"></meting-js>
<!--评论模块还有下面的script也是-->
<center>
<div class="newValine" id="vcomments"></div>
</center>
<script>
new Valine({
visitor: true,
el: '#vcomments',
avatar: 'wavatar',
appId: 'Your appId',
appKey: 'Your appKey',
placeholder: "有什么问题欢迎评论区留言~么么哒"
})
</script>
<br />
<center class="dibu">
<div style=" line-height: 20px;font-size: 9pt;font-weight: bold;">
<span>
"
<span style="color: rgb(13, 109, 252); font-weight: bold;" id="hitokoto">
<a href="#" id="hitokoto_text">
"人生最大的遗憾,就是在最无能为力的时候遇到一个想要保护一生的人."
</a>
</span> "
</span>
<p style="margin-left: 10rem;font-size: 8pt;">
<small>
—— Anwen's Cloud
</small>
</p>
</div>
<div style="font-size: 13px; font-weight: bold;">
<span class="nav-item">
<a class="nav-link" href="xxxxxxxxxx"
target="_blank">
<i class="fab fa-qq" style="color:#409EFF" aria-hidden="true">
</i>
QQ |
</a>
</span>
<span class="nav-item">
<a class="nav-link" href="mailto:[email protected]" target="_blank">
<i class="fa-duotone fa-envelope-open" style="color:#409EFF" aria-hidden="true">
</i>
邮箱 |
</a>
</span>
<span class="nav-item">
<a class="nav-link" href="xxxxxx" target="_blank">
<i class="fas fa-edit" style="color:#409EFF" aria-hidden="true">
</i>
博客 |
</a>
</span>
<span class="nav-item">
<a class="nav-link" href="xxxxxxxx" target="_blank">
<i class="fas fa-comment-lines" style="color:#409EFF;" aria-hidden="true">
</i>
留言 |
</a>
</span>
<span class="nav-item">
<a class="nav-link" href="xxxxxxx" target="_blank">
<i class="fa fa-cloud-download" style="color:#409EFF;" aria-hidden="true">
</i>
云盘 |
</a>
</span>
<!--后台入口-->
<span class="nav-item">
<a class="nav-link" href="/@manage" target="_blank">
<i class="fa-solid fa-folder-gear" style="color:#409EFF;" aria-hidden="true">
</i>
管理 |
</a>
</span>
<!--版权，请尊重作者-->
<span class="nav-item">
<a class="nav-link" href="https://github.com/Xhofe/alist" target="_blank">
<i class="fa-solid fa-copyright" style="color:#409EFF;" aria-hidden="true">
</i>
Alist
</a>
</span>
<br />
<!--添加一个访问量-->
<span>
本"<span style="color: rgb(13, 109, 252); font-weight: bold;"><a href="#">目录</a></span>"访问量 <span id="busuanzi_page_pv" style="color: rgb(13, 109, 252); font-weight: bold;"></span> 次 本站总访问量 <span id="busuanzi_site_pv" style="color: rgb(13, 109, 252); font-weight: bold;"></span> 次 本站总访客数 <span id="busuanzi_site_uv" style="color: rgb(13, 109, 252); font-weight: bold;"></span> 人
</span>
<br />
<!--添加备案信息-->
<span class="nav-item">
<a class="nav-link" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">
<i class="fa-solid fa-shield-check" style="color:#409EFF;" aria-hidden="true">
</i>
冀 ICP备2222000777号
</a>
</span>
</div>
</center>
<br />
<br />
</div>
<!--一言API-->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
<!--延迟加载范围到这里结束-->
</div>
<!--延迟加载配套使用JS-->
<script>
let interval = setInterval(() => {
if (document.querySelector(".footer")) {
document.querySelector("#customize").style.display = "";
clearInterval(interval);
}
}, 200);
</script>
<!-- 渐变背景初始化,如果要使用渐变背景把下面的那一行注释去掉即可-->
<!-- 下面的几行都是渐变的一套,自定义头部内还有一个关联的自定义CSS -->
<!--<canvas id="canvas-basic"></canvas> -->
<script src="https://npm.elemecdn.com/[email protected]/dist/granim.min.js"></script>
<script>
var granimInstance = new Granim({
element: '#canvas-basic',
direction: 'left-right',
isPausedWhenNotInView: true,
states : {
"default-state": {
gradients: [
['#a18cd1', '#fbc2eb'],
['#fff1eb', '#ace0f9'],
['#d4fc79', '#96e6a1'],
['#a1c4fd', '#c2e9fb'],
['#a8edea', '#fed6e3'],
['#9890e3', '#b1f4cf'],
['#a1c4fd', '#c2e9fb'],
['#fff1eb', '#ace0f9']
]
}
}
});
</script>
全局自定义头部
<!--Alist V3建议添加的，已经默认添加了，如果你的没有建议加上-->
<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<!--引入字体，全局字体使用-->
<link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/lxgwwenkai-regular.css" />
<!--评论系统使用的js-->
<script src="https://unpkg.com/valine/dist/Valine.min.js"></script>
<!--不蒜子计数器-->
<script async src="https://busuanzi.9420.ltd/js"></script>
<!-- Font6，自定义底部使用和看板娘使用的图标和字体文件-->
<link type="text/css" rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/css/fontawesome.min.css" media="all" />
<link href="https://npm.elemecdn.com/[email protected]/css/all.min.css" rel="stylesheet" />
<!--音乐播放器所用的文件-->
<!-- require APlayer -->
<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>
<!-- require MetingJS -->
<script src="https://npm.elemecdn.com/[email protected]/js/Meting.min.js"></script>
<style>
/* 去除通知栏 右上角 X */
.notify-render .hope-close-button {
display: none;
}
/*去掉底部*/
.footer {
display: none !important;
}
/* 此选项两处CSS 在v3.31.0中已优化 滚动显示 和 右下角设置网格模式尺寸大小 */
/* 文字超长自动换行 */
/*.name-box .name {
white-space: unset !important;
overflow: unset !important;
}*/
/* 缩略图图片变大 代码中的160px 自己改 现在是注释状态若需要自行解除注释 */
/*.obj-box > div {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))
}
.obj-box > div .item-thumbnail{
height: 100px;
}*/
/*
图片API用法点进去都会有食用说明的,API来自网络不保证实效性稳定性自己测试
樱花：https://www.dmoe.cc
夏沫：https://cdn.seovx.com
搏天：https://api.btstu.cn/doc/sjbz.php
姬长信：https://github.com/insoxin/API
小歪：https://api.ixiaowai.cn/
保罗：https://api.paugram.com
墨天逸：https://api.mtyqx.cn
岁月小筑：https://img.xjh.me
东方Project：https://img.paulzzh.com
*/
/*白天背景图*/
.hope-ui-light {
background-image: url("https://pic.rmb.bdstatic.com/bjh/7569b014a1abafd5481298763300ae1d.png") !important;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position-x: center;
}
/*夜间背景图*/
.hope-ui-dark {
background-image: url("https://pic.rmb.bdstatic.com/bjh/ebe942a9de49856f389c65f25a338335.png") !important;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position-x: center;
}
/*主列表白天模式透明*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
background-color: rgba(255, 255, 255, 0.5) !important;
}
/*主列表夜间模式透明*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
background-color: rgb(0 0 0 / 50%) !important;
}
/*readme白天模式透明*/
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
background-color: rgba(255, 255, 255, 0.5) !important;
}
/*readme夜间模式透明*/
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
background-color: rgb(0 0 0 / 50%) !important;
}
/*顶部右上角切换按钮透明*/
.hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
background-color: rgba(255, 255, 255, 0.5) !important;
}
.hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
background-color: rgb(0 0 0 / 50%) !important;
}
/*右下角侧边栏按钮透明 第一个是白天 第二个是夜间*/
.hope-ui-light .hope-c-PJLV-ijgzmFG-css {
background-color: rgba(255, 255, 255, 0.5) !important;
}
.hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
background-color: rgb(0 0 0 / 50%) !important;
}
/*白天模式代码块透明*/
.hope-ui-light pre {
background-color: rgba(255, 255, 255, 0.1) !important;
}
/*夜间模式代码块透明*/
.hope-ui-dark pre {
background-color: rgba(255, 255, 255, 0) !important;
}
/*左侧侧边栏目录*/
/*白天模式*/
.hope-ui-light .hope-c-PJLV-ieGWMbI-css {
background: rgba(255, 255, 255, 0.5) !important;
}
/*夜间模式*/
.hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
background-color: rgb(0 0 0 / 50%) !important;
}
/* 返回顶部 */
.hope-c-PJLV-ihVEsOa-css {
background: rgba(255, 255, 255, 0.5) !important;
}
.hope-ui-dark .hope-c-PJLV-ihVEsOa-css {
background-color: rgb(0 0 0 / 50%) !important;
}
/*顶部*/
#root > .header {
background: rgba(255, 255, 255, 0);
}
/*导航条*/
/*白天模式*/
.hope-ui-light .body > .nav {
background-color: rgba(255, 255, 255, 0.5);
border-radius: var(--hope-radii-xl);
}
/*夜间模式*/
.hope-ui-dark .body > .nav {
background-color: rgb(0 0 0 / 50%);
border-radius: var(--hope-radii-xl);
}
/*隐藏导航条遮罩*/
.body > .nav::after {
display: none;
}
/*底部CSS，.App .table这三个一起的*/
dibu {
border-top: 0px;
position: absolute;
bottom: 0;
width: 100%;
margin: 0px;
padding: 0px;
}
.App {
min-height: 85vh;
}
.table {
margin: auto;
}
/*全局字体*/
* {
font-family: LXGW WenKai;
}
* {
font-weight: bold;
}
body {
font-family: LXGW WenKai;
}
/*以下为评论系统专用*/
/*适配大小契合度*/
.newValine {
width: min(96%, 940px);
flex-direction: column;
row-gap: var(--hope-space-2);
border-radius: var(--hope-radii-xl);
padding: var(--hope-space-2);
box-shadow: var(--hope-shadows-lg);
}
/*评论区 - 白天模式透明度*/
.hope-ui-light .newValine {
background-color: rgba(255, 255, 255, 0.5) !important;
}
/*评论区 - 夜间模式透明度*/
.hope-ui-dark .newValine {
background-color: rgb(0 0 0 / 50%) !important;
}
/*输入栏里面跳舞的小人背景图,jsdelivr加载慢的可以自己替换或者删掉*/
.vedit {
background-image: url("https://cdn.jsdelivr.net/gh/anwen-anyi/imgAnwen/images/OuNiJiang.gif");
background-size: contain;
background-repeat: no-repeat;
background-position: right bottom;
transition: all 0.25s ease-in-out 0s;
}
textarea#comment-textarea:focus {
background-position-y: 120px;
transition: all 0.25s ease-in-out 0s;
}
/*渐变背景CSS*/
#canvas-basic {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -999;
}
/* 以下为音乐播放器额外配置 */
/* 如果你想要音乐播放器不是很靠底部可以自己设置一下数值 0是靠最底部 */
.aplayer .aplayer-body,
.aplayer.aplayer-withlist {
bottom: 0rem !important;
}
/*音乐播放器进一步进行隐藏*/
/* 需要就加不需要就不用加 */
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
left: -66px !important;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
left: 0 !important;
}
</style>
方案二
全局自定义内容
<script>
// 快捷设置
const NOTICE_TITLE = '公告';
const NOTICE_CONTENT = '自行替换：公告内容';
const NOTICE_BACKGROUND = '#FF5722'; // 弹窗背景色
</script>
<style>
/* ==================== 样式配置变量 ==================== */
:root {
/* 搜索框容器背景色 */
--search-container-bg: rgba(76, 175, 80, 0.15);
}
/* 自定义壁纸（无模糊效果） */
.hope-ui-light {
background-image: url("自行替换：背景") !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-attachment: fixed !important;
background-position: center !important;
}
/* 搜索框容器样式 - 使用更精确的选择器 */
div.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ijviteX-css {
background-color: var(--search-container-bg) !important;
}
/* 其他透明效果 - 恢复为原来的 rgba(255, 255, 255, 0.5) */
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css,
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css,
.hope-modal-content {
background-color: rgba(255, 255, 255, 0.5) !important;
}
/* 全局字体 */
body, * {
font-family: "LXGW WenKai" !important;
font-weight: bold !important;
}
/*导航条*/
/*白天模式*/
.hope-ui-light .body > .nav {
background-color: rgba(255, 255, 255, 0.5);
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
/*隐藏导航条遮罩*/
.body > .nav::after {
display: none;
}
/* 白天模式顶部标题栏 */
.hope-ui-light .header.hope-center.hope-c-jKOUQW.hope-c-PJLV {
background-color: rgba(255, 255, 255, 0.5) !important;
/* 参数说明：rgba(红, 绿, 蓝, 透明度)
0.x 表示 50% 透明度，可根据需要调整（0=全透明，1=不透明）*/
}
</style>
<script type="text/javascript">
// 开屏动画
;(function () {
// ==================== 🔒 检查是否已播放过，防止重复执行 ====================
if (sessionStorage.getItem('markdown_splash_shown')) {
return; // 已播放过，不再执行
}
sessionStorage.setItem('markdown_splash_shown', 'true');
// ==================== 🎨 配置区 ====================
const CONFIG = {
splash: {
backgroundColor: 'white', // 启动页背景颜色
zIndex: 99999, // 启动页z-index层级
fadeInDelay: 100, // 启动页淡入延迟 (毫秒)
fadeOutDelay: 3200, // 启动页自动淡出延迟 (毫秒)
fadeDuration: 650, // 启动页淡入/淡出动画时长 (毫秒)
},
logoContainer: {
width: 250, // Logo容器宽度 (像素)
height: 250, // Logo容器高度 (像素)
},
logo: {
src: '自行替换：开屏logo', // Logo图片URL
fadeInDelay: 900, // Logo淡入延迟 (毫秒)
fadeDuration: 800, // Logo淡入动画时长 (毫秒)
dropShadow: '0 0 10px rgba(255,255,255,0.3)', // Logo阴影效果
},
highlight: {
width: 80, // 高光条宽度 (像素)
height: 400, // 高光条高度 (像素)，应大于对角线长度
color: 'rgba(255, 255, 255, 0.5)', // 高光条颜色
rotateDeg: 45, // 高光条旋转角度 (度)，与对角线斜率相关
// --- 新增/修改的配置项 ---
startOffsetRatio: -0.8, // 高光条起始位置相对于Logo容器宽度的偏移比例 (-1.12 表示从Logo左上角外一点开始)
endOffsetRatio: 0.8, // 高光条结束位置相对于Logo容器宽度的偏移比例 (1.12 表示划过Logo右下角外一点)
animationDelay: 2100, // 高光条动画延迟 (毫秒)
animationDuration: 500, // 高光条动画时长 (毫秒)
animationMode: 'linear', // 动画模式和参数
},
};
// ==================== 🧩 动态创建 DOM 元素 ====================
const splash = Object.assign(document.createElement('div'), { id: 'splash-screen' });
const container = Object.assign(document.createElement('div'), { id: 'logo-container' });
const logo = Object.assign(document.createElement('img'), {
id: 'splash-logo',
src: CONFIG.logo.src,
alt: 'Logo',
});
const highlight = Object.assign(document.createElement('div'), { id: 'highlight' });
container.appendChild(logo);
splash.appendChild(container);
splash.appendChild(highlight);
document.body.appendChild(splash);
// ==================== 🖌️ 动态注入样式 ====================
const style = document.createElement('style');
style.textContent = `
#splash-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: ${CONFIG.splash.backgroundColor};
z-index: ${CONFIG.splash.zIndex};
opacity: 0;
pointer-events: none;
transition: opacity ${CONFIG.splash.fadeDuration}ms ease;
margin: 0;
padding: 0;
}
#logo-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: ${CONFIG.logoContainer.width}px;
height: ${CONFIG.logoContainer.height}px;
overflow: hidden; /* 限制高光在Logo容器内 */
}
#splash-logo {
width: 100%;
height: auto;
opacity: 0;
transition: opacity ${CONFIG.logo.fadeDuration}ms ease;
filter: drop-shadow(${CONFIG.logo.dropShadow});
display: block;
}
#highlight {
position: absolute;
/* top 和 left 将通过 JS 动态计算和动画控制 */
width: ${CONFIG.highlight.width}px;
height: ${CONFIG.highlight.height}px;
background: ${CONFIG.highlight.color};
/* transform-origin 用于围绕中心点旋转 */
transform-origin: center center;
opacity: 0;
pointer-events: none;
}
`;
document.head.appendChild(style);
// ==================== ⏱️ 动画控制函数 ====================
let isFadingOut = false;
function triggerFadeOut() {
if (isFadingOut) return;
isFadingOut = true;
splash.style.opacity = '0';
setTimeout(() => {
splash.remove();
style.remove();
document.removeEventListener('click', triggerFadeOut);
document.removeEventListener('touchstart', triggerFadeOut);
}, CONFIG.splash.fadeDuration);
}
// 支持点击或触摸提前跳过
document.addEventListener('click', triggerFadeOut, { once: false });
document.addEventListener('touchstart', triggerFadeOut, { passive: true });
// ==================== 🎬 动画时序 ====================
splash.style.opacity = '1';
splash.style.pointerEvents = 'auto';
setTimeout(() => {
logo.style.opacity = '1';
}, CONFIG.logo.fadeInDelay);
setTimeout(() => {
// 计算高光条的旋转角度（基于Logo容器尺寸）
const containerRect = container.getBoundingClientRect();
const diagonal = Math.sqrt(
containerRect.width * containerRect.width + containerRect.height * containerRect.height
);
const calculatedRotateDeg = Math.atan2(containerRect.height, containerRect.width) * (180 / Math.PI);
// 设置高光条的初始位置和旋转
highlight.style.top = `calc(50% - ${CONFIG.highlight.height / 2}px)`;
highlight.style.left = `calc(50% + ${containerRect.width * CONFIG.highlight.startOffsetRatio}px)`;
highlight.style.transform = `rotate(${calculatedRotateDeg}deg)`;
highlight.style.opacity = '1';
// 计算动画结束位置
const endLeft = `calc(50% + ${containerRect.width * CONFIG.highlight.endOffsetRatio}px)`;
highlight.animate(
[
{
left: highlight.style.left,
transform: `rotate(${calculatedRotateDeg}deg)`,
},
{
left: endLeft,
transform: `rotate(${calculatedRotateDeg}deg)`,
},
],
{
duration: CONFIG.highlight.animationDuration,
easing: CONFIG.highlight.animationMode,
fill: 'forwards',
}
);
}, CONFIG.highlight.animationDelay);
// 自动淡出（除非提前跳过）
setTimeout(triggerFadeOut, CONFIG.splash.fadeOutDelay);
})();
</script>
<script>
// ==================== 弹窗配置参数 ====================
// 弹窗基础设置
const NOTICE_DURATION = 5000; // 弹窗显示时长（毫秒）
const NOTICE_DELAY = 500; // 弹窗显示前延迟时间（毫秒）
// 弹窗尺寸与位置
const NOTICE_WIDTH = 350; // 弹窗宽度（像素）
const NOTICE_RIGHT = 20; // 桌面端弹窗右边距（像素）
const NOTICE_TOP = 15; // 弹窗距离顶部的距离（像素）
// 弹窗样式
const NOTICE_TEXT_COLOR = '#ffffff'; // 弹窗文字颜色
const NOTICE_BORDER_RADIUS = 10; // 弹窗圆角大小（像素）
const NOTICE_BOX_SHADOW = '4px 4px 10px rgba(0,0,0,0.2)'; // 弹窗阴影设置
// 进度条设置
const PROGRESS_HEIGHT = 6; // 进度条高度（像素）
const PROGRESS_BACKGROUND = 'rgba(255,255,255,0.3)'; // 进度条背景色
const PROGRESS_COLOR = '#ffffff'; // 进度条颜色
// 动画设置
const ANIMATION_DURATION = 500; // 桌面端动画时长（毫秒）
const MOBILE_ANIMATION_DURATION = 300; // 移动端动画时长（毫秒）
const MOBILE_BREAKPOINT = 768; // 移动端屏幕断点（像素）
const ANIMATION_EASING_IN = 'cubic-bezier(0.1, 0.9, 0.2, 1.0)'; // 桌面端滑入动画贝塞尔曲线
const ANIMATION_EASING_OUT = 'cubic-bezier(0.8, 0.0, 0.9, 0.1)'; // 桌面端滑出动画贝塞尔曲线
// 关闭按钮设置
const CLOSE_BUTTON_HOVER_BG = 'rgba(255, 255, 255, 0.2)'; // 关闭按钮悬停背景色
// ==================== 弹窗配置参数结束 ====================
// 创建公告弹窗
function createNoticePopup() {
// 创建弹窗容器
const popupContainer = document.createElement('div');
popupContainer.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:0;z-index:9999;pointer-events:none';
// 创建弹窗元素
const popup = document.createElement('div');
popup.style.cssText = 'position:absolute;top:' + NOTICE_TOP + 'px;padding:20px;box-sizing:border-box;pointer-events:auto;' +
'background-color:' + NOTICE_BACKGROUND + ';color:' + NOTICE_TEXT_COLOR + ';' +
'border-radius:' + NOTICE_BORDER_RADIUS + 'px;box-shadow:' + NOTICE_BOX_SHADOW;
// 检测屏幕宽度以决定弹窗位置
const isMobile = window.innerWidth <= MOBILE_BREAKPOINT;
const animationDuration = isMobile ? MOBILE_ANIMATION_DURATION : ANIMATION_DURATION;
if (isMobile) {
// 移动端居中显示
popup.style.cssText += ';left:50%;transform:translateX(-50%) translateY(20px);opacity:0;' +
'width:calc(100% - 40px);max-width:' + NOTICE_WIDTH + 'px;transition:all ' + animationDuration + 'ms ease-out';
} else {
// 桌面端右侧显示
popup.style.cssText += ';right:-' + NOTICE_WIDTH + 'px;width:' + NOTICE_WIDTH + 'px;' +
'transition:all ' + animationDuration + 'ms ' + ANIMATION_EASING_IN;
}
// 创建弹窗内容
popup.innerHTML = `
<div style="margin:0 0 15px 0;font-size:18px;font-weight:bold;display:flex;justify-content:space-between;align-items:center">
<span>${NOTICE_TITLE}</span>
<button id="popup-close-btn" style="background:transparent;border:none;color:${NOTICE_TEXT_COLOR};font-size:24px;cursor:pointer;padding:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 0.2s ease;outline:none;-webkit-tap-highlight-color:transparent;-webkit-appearance:none">×</button>
</div>
<div style="margin-bottom:15px;line-height:1.5">${NOTICE_CONTENT}</div>
<div style="width:100%;height:${PROGRESS_HEIGHT}px;background-color:${PROGRESS_BACKGROUND};border-radius:${PROGRESS_HEIGHT/2}px;overflow:hidden">
<div id="progressBar" style="height:100%;background-color:${PROGRESS_COLOR};width:100%;transition: none;"></div>
</div>
`;
// 添加关闭事件
const closeButton = popup.querySelector('#popup-close-btn');
const closePopup = () => {
hideNoticePopup(popup, popupContainer, isMobile);
};
closeButton.addEventListener('click', closePopup);
// 添加关闭按钮交互效果
closeButton.addEventListener('mouseenter', function() {
this.style.backgroundColor = CLOSE_BUTTON_HOVER_BG;
});
closeButton.addEventListener('mouseleave', function() {
this.style.backgroundColor = 'transparent';
this.style.transform = 'scale(1)';
});
closeButton.addEventListener('mousedown', function() {
this.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
this.style.transform = 'scale(0.9)';
});
closeButton.addEventListener('mouseup', function() {
this.style.backgroundColor = CLOSE_BUTTON_HOVER_BG;
this.style.transform = 'scale(1)';
});
// 将弹窗添加到容器
popupContainer.appendChild(popup);
document.body.appendChild(popupContainer);
// 显示弹窗
setTimeout(() => {
if (isMobile) {
popup.style.transform = 'translateX(-50%) translateY(0)';
popup.style.opacity = '1';
} else {
popup.style.right = NOTICE_RIGHT + 'px';
}
}, 100);
// 在弹窗动画完成后开始进度条动画
setTimeout(() => {
startProgressBarAnimation(popup, closePopup);
}, animationDuration);
}
// 进度条动画函数
function startProgressBarAnimation(popupElement, closeCallback) {
const progressBar = popupElement.querySelector('#progressBar');
const startTime = Date.now();
function updateProgress() {
const elapsed = Date.now() - startTime;
const progress = Math.max(0, 100 - (elapsed / NOTICE_DURATION) * 100);
if (progress > 0) {
progressBar.style.width = progress + '%';
requestAnimationFrame(updateProgress);
} else {
progressBar.style.width = '0%';
// 进度条走完后关闭弹窗
closeCallback();
}
}
requestAnimationFrame(updateProgress);
}
// 隐藏公告弹窗
function hideNoticePopup(popup, container, isMobile) {
const animationDuration = isMobile ? MOBILE_ANIMATION_DURATION : ANIMATION_DURATION;
if (isMobile) {
popup.style.transition = 'all ' + animationDuration + 'ms ease-in';
popup.style.transform = 'translateX(-50%) scale(0.95)';
popup.style.opacity = '0';
} else {
popup.style.transition = 'all ' + animationDuration + 'ms ' + ANIMATION_EASING_OUT;
popup.style.right = '-' + NOTICE_WIDTH + 'px';
}
setTimeout(() => {
if (container.parentNode) {
container.parentNode.removeChild(container);
}
}, animationDuration);
}
// 等待开屏动画结束后再显示公告弹窗
function waitForSplashAndShowPopup() {
const splashScreen = document.getElementById('splash-screen');
if (splashScreen) {
// 如果开屏动画存在，等待它结束
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList') {
mutation.removedNodes.forEach(function(node) {
if (node.id === 'splash-screen') {
// 开屏动画已结束，显示公告弹窗
observer.disconnect();
setTimeout(createNoticePopup, NOTICE_DELAY);
}
});
}
});
});
observer.observe(document.body, { childList: true });
} else {
// 如果开屏动画不存在（已结束），直接显示公告弹窗
setTimeout(createNoticePopup, NOTICE_DELAY);
}
}
// 页面加载完成后等待开屏动画结束再显示公告弹窗
window.addEventListener('DOMContentLoaded', waitForSplashAndShowPopup);
</script>
<style>
/* 隐藏字符集切换按钮 */
button.hope-select__trigger.hope-c-kvTTWD.hope-c-huZphZ {
display: none !important;
}
</style>
<script>
// 监听并隐藏字符集切换按钮
(function() {
'use strict';
// 定义要隐藏的按钮特征类名
const targetButtonSelector = 'button.hope-select__trigger.hope-c-kvTTWD.hope-c-huZphZ';
// 隐藏按钮的函数
function hideCharsetButtons() {
const buttons = document.querySelectorAll(targetButtonSelector);
buttons.forEach(button => {
button.style.display = 'none';
});
}
// 使用 MutationObserver 监听 DOM 变化
const observer = new MutationObserver(function() {
hideCharsetButtons();
});
// 开始监听 DOM 变化
observer.observe(document.body, {
childList: true,
subtree: true
});
// 页面加载完成后立即执行一次
document.addEventListener('DOMContentLoaded', hideCharsetButtons);
// 定时检查，作为备用方案
setInterval(hideCharsetButtons, 500);
})();
</script>
