前端优化
自定义头部代码
<!--Alist V3建议添加的，已经默认添加了，如果你的没有建议加上-->
<script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
<!--引入字体，全局字体使用-->
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />
<!-- Font6，自定义底部使用和看板娘使用的图标和字体文件-->
<link type='text/css' rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.0.1/css/fontawesome.min.css" media='all'>
<link href="https://npm.elemecdn.com/font6pro@6.0.1/css/all.min.css" rel="stylesheet">
<!--音乐播放器所用的文件-->
<!-- require APlayer -->
<link rel="stylesheet" href="https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://npm.elemecdn.com/meting@2.0.1/dist/Meting.min.js"></script>
<style>
/* 去除通知栏 右上角 X */
.notify-render .hope-close-button{
display: none;
}
/*白天背景图*/
.hope-ui-light{
background-image: url("https://yun.925173.com/d/%E9%98%BF%E9%87%8C%E4%BA%91%E7%9B%98/images/02.jpg") !important;
background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;
}
/*夜间背景图*/
.hope-ui-dark {
background-image: url(https://yun.925173.com/d/%E9%98%BF%E9%87%8C%E4%BA%91%E7%9B%98/images/03.jpg) !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;
}
/*readme透明*/
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css{
background-color: rgba(255, 255, 255, 0.5) !important;
}
/*顶部右上角切换按钮透明*/
.hope-c-ivMHWx-hZistB-cv.hope-icon-button{
background-color: rgba(255, 255, 255, 0.3) !important;
}
/*右下角侧边栏按钮透明*/
.hope-c-PJLV-ijgzmFG-css{
background-color: rgba(255, 255, 255, 0.5) !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;
}
/*底部CSS，.APP .tanle这三个一起的*/
dibu {
border-top: 0px;
position: absolute;
bottom: 0;
width: 100%;
margin: 0px;
padding: 0px;
}
.App {
min-height: 85vh;
}
.table {
margin: auto;
}
/*去掉底部*/
.footer {
display: none !important;
}
/* 设置全局字体样式 */
* {
font-family: LXGW WenKai;
font-weight: bold;
}
/* 设置全局字体颜色为白色 */
body {
font-family: LXGW WenKai;
color: white; /* 将文字颜色设置为白色 */
}
/*渐变背景CSS*/
#canvas-basic {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -999;
}
</style>
<!--看板娘 -自定义大小，隐藏对话框和对话框高度-->
<style type="text/css">
#waifu #live2d {
height: 350px!important;
width: 350px!important;
}
#waifu-tips {
top: -60px;
/*display:none !important;隐藏对话框*/
}
</style>
<!--看板娘加载指定模型-->
<script>
localStorage.setItem('modelId', '7');
localStorage.setItem('modelTexturesId', '3');
</script>
<!--自己选左右-->
<script src="https://api.itggg.cn/live2dnew/left/index.js"></script>
<script src="https://api.itggg.cn/live2dnew/right/index.js"></script>
<!--以下四个两个主用两个备用的,选一条使用即可-->
<!--自己选左右-->
<script src="https://api.itggg.cn/live2dnew/left/index.js"></script>
<script src="https://api.itggg.cn/live2dnew/right/index.js"></script>
<!--备用的，自己选左右-->
<script src="https://luluossfile.lulufind.com/work/teacher_u20221017ce7b5991_1666420843832_19934968_file.js"></script>
<script src="https://luluossfile.lulufind.com/work/teacher_u20221017bb6d7454_1666420849979_19584065_file.js"></script>
自定义内容代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 延迟加载 -->
<div id="customize" style="display: none;">
<center class="dibu">
<!-- 用于显示名人名言或诗句的空标签 -->
<p id="quote"></p>
<div style="font-size: 13px; font-weight: bold;">
<!-- 邮箱链接 -->
<span class="nav-item">
<a class="nav-link" href="mailto:a508729728@gmail.com" target="_blank">
<i class="fa-duotone fa-envelope-open" style="color:#00E6BB" aria-hidden="true"></i>
邮箱 |
</a>
</span>
<!-- 博客链接 -->
<span class="nav-item">
<a class="nav-link" href="https://www.925173.com" target="_blank">
<i class="fas fa-blog" style="color:#00E6BB" aria-hidden="true"></i>
博客 |
</a>
</span>
<!-- 更多链接和导航项目可以在这里添加 -->
<span class="nav-item">
<a class="nav-link" href="#" target="_blank">
<i class="fas fa-comment-lines" style="color:#00E6BB;" 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:#00E6BB;" 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:#00E6BB;" aria-hidden="true"></i>
Alist
</a>
</span>
<br />
</div>
</center>
<br />
<br />
</div>
<!-- 延迟加载范围结束 -->
</head>
<body>
<!-- 您的网页内容放在这里 -->
<!-- 网站底部信息，包括ICP备案和网站运行时间 -->
<footer style="text-align: center; background-color: #f0f0f0; padding: 10px;">
<p style="font-size: 14px;">ICP备案号：<a href="http://www.beian.miit.gov.cn" target="_blank">ICP备XXXXXXXX号</a></p>
<p style="font-size: 12px; color: #888;">
网站运行时间：<span id="runtime"></span>
</p>
</footer>
<!-- JavaScript代码来显示网站运行时间 -->
<script>
// 获取网站上线时间
const websiteStartDate = new Date('2023-10-05'); // 请替换为您的网站上线日期
// 更新网站运行时间
function updateRuntime() {
const now = new Date();
const diffMilliseconds = now - websiteStartDate;
const diffDays = Math.floor(diffMilliseconds / (1000 * 60 * 60 * 24)) + 1; // 加1以包括当前日期
const diffYears = Math.floor(diffDays / 365);
const remainingDays = diffDays % 365;
const runtimeText = `${diffYears}年${remainingDays}天`;
const runtimeElement = document.getElementById('runtime');
if (runtimeElement) {
runtimeElement.textContent = runtimeText;
}
}
// 初次加载时更新运行时间
updateRuntime();
// 定时更新运行时间（每天更新一次）
setInterval(updateRuntime, 86400000);
</script>
<!-- 渐变背景初始化，如果要使用渐变背景，去掉下面的注释 -->
<!--<canvas id="canvas-basic"></canvas> -->
<script src="https://npm.elemecdn.com/granim@2.0.0/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>
<!-- 使用外部API获取名言或诗句数据并显示在页面上的JavaScript -->
<script>
// 从外部API获取名言或诗句数据
fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
const 名言 = data.hitokoto;
// 将名言设置为<p>标签的文本内容
document.getElementById('quote').textContent = 名言;
// 显示延迟加载内容
document.querySelector("#customize").style.display = "";
})
.catch(error => {
console.error('获取名言失败:', error);
// 显示延迟加载内容（即使获取失败）
document.querySelector("#customize").style.display = "";
});
</script>
</body>
</html>
评论 (0)