admin

Alist V3 自定义头部代码

admin 分享 2024-06-18 2616浏览 2233

代码中每一行的代码都有注释说明,请仔细查看并使用


本文摘自源地址

Alist的使用和编译以及美化教程

自定义头部代码


<!--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" />

<!--评论系统使用的js-->
<script src='https://unpkg.com/valine/dist/Valine.min.js'></script>

<!--不蒜子计数器-->
<script async src="https://busuanzi.icodeq.com/busuanzi.pure.mini.js"></script>

<!-- 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;
}
/* 图片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://api.ixiaowai.cn/mcapi/mcapi.php") !important;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    background-position-x:center;
}
/*夜间背景图*/
.hope-ui-dark {
    background-image: url(http://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.3)!important;
}
.hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
    background-color:rgb(0 0 0 / 10%)!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;
}

/*底部CSS,.App .table这三个一起的*/
 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;
}


/*以下为评论系统专用*/
/*适配大小契合度*/
.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.8)!important;
}
/*评论区 - 夜间模式透明度*/
.hope-ui-dark .newValine {
    background-color:rgb(0 0 0 / 80%)!important;
}
/*输入栏里面跳舞的小人背景图*/
.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;
}


/*音乐播放器进一步进行隐藏*/
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
    left: -66px!important;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
    left: 0!important;
}
</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://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>



搜索栏美化代码

带毛玻璃效果

<style>
/*白天模式 搜索主体+毛玻璃*/
.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
   background-color: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}

/*白天模式 搜索栏输入框+毛玻璃*/
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{
   background-color: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}

/*白天模式 搜索按钮+毛玻璃*/
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
   background-color: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
   padding: var(--hope-space-1)!important;
}

/*夜间模式搜索主体+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
    background-color: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}

/*夜间模式搜索栏+毛玻璃*/
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{
    background-color: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}

/*夜间模式 搜索按钮+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
    background-color: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
    padding: var(--hope-space-1)!important;
}
</style>



不带毛玻璃效果

<style>
/*白天模式 搜索主体*/
.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
   background-color: rgba(255,255,255,0.2)!important;
}

/*白天模式 搜索栏输入框*/
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{
   background-color: rgba(255,255,255,0.2)!important;
}

/*白天模式 搜索按钮*/
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
   background-color: rgba(255,255,255,0.2)!important;
   padding: var(--hope-space-1)!important;
}

/*夜间模式搜索主体*/
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
    background-color: rgb(0 0 0 / 10%)!important;
}

/*夜间模式搜索栏*/
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{
    background-color: rgb(0 0 0 / 10%)!important;
}

/*夜间模式 搜索按钮*/
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
    background-color: rgb(0 0 0 / 10%)!important;
    padding: var(--hope-space-1)!important;
}
</style>



效果预览

左侧为不带毛玻璃效果,右侧为带毛玻璃效果.推荐右侧带毛玻璃效果的

Alist V3 自定义头部代码

Alist V3 自定义头部代码

自行替换鼠标样式说明


因为CDN的 HTTPS证书失效了,无法使用暂时

但是着急的话可以一个一个点击然后把哪个文件下载下来,然后自己上传一个换成自己的链接也可以..


把HTTPS 改成HTTPS 貌似还能用 试试看


<!--较为个性化的鼠标指针样式,可结合个人需要自行修改-->
<style>
  body {
    cursor: url(http://luluossfile.lulufind.com/work/teacher_u20221021b3a89013_1666841028833_10660845_file.cur), default;
  }
  select{
    cursor: url(http://luluossfile.lulufind.com/work/teacher_u2021090299b56677_1666842679271_10490748_file.cur), pointer;
  }
  button,a:hover{
    cursor: url(http://luluossfile.lulufind.com/work/teacher_u20221017ac9f1124_1666842626270_11086578_file.cur), pointer;
  }
  input{
    cursor:url(http://luluossfile.lulufind.com/work/teacher_u2021090299b56677_1666842633386_14976764_file.cur), text;	
  }
  textarea,input:focus{
    cursor:url(http://luluossfile.lulufind.com/work/teacher_u202210176ba36766_1666842640146_15845280_file.cur), text;	
  }
  code{
    cursor: url(http://luluossfile.lulufind.com/work/teacher_u20221021b3a89013_1666842646779_15864973_file.cur), default;	
  }
  pre>code{
    cursor: url(http://luluossfile.lulufind.com/work/teacher_u202210176ba36766_1666842653500_10010236_file.cur), default;	
  }
</style>



版权声明:
    “邓先生工作室”文章为自撰和网摘为一体,网摘文章及图片版权归原作者所有,转载本文请注明出处,请勿用于商务用途。如有侵犯您的权益,请及时联系toneydeng@qq.com予以删除!
2233条评论
  • 游客 发表于 27分钟前 回复

    楼主的帖子提神醒脑啊!http://www.indaseg.com/a/

  • 游客 发表于 40分钟前 回复

    楼主是我最崇拜的人!http://www.a5km.com/yxgl/dnf/26894.html

  • 游客 发表于 41分钟前 回复

    楼主是一个典型的文艺青年啊!http://www.a5km.com/yxgl/dnf/26886.html

  • 游客 发表于 50分钟前 回复

    谢谢楼主的分享!http://www.cndongdang.cn

  • 游客 发表于 2小时前 回复

    哥回复的不是帖子,是寂寞!http://www.a5km.com/yxgl/jdqs/27310.html

  • 游客 发表于 2小时前 回复

    收藏了,楼主加油!http://www.dnf70.com/2169.html

  • 游客 发表于 2小时前 回复

    楼主的文笔不错!http://www.a5km.com/yxgl/dnf/25327.html

  • 游客 发表于 2小时前 回复

    以后要跟楼主好好学习学习!http://www.dnf70.com/1233.html

  • 游客 发表于 3小时前 回复

    鉴定完毕!http://mj-life.cn/621346.html

  • 游客 发表于 3小时前 回复

    楼主的头像能辟邪啊!http://www.a5km.com/yxgl/jdqs/27659.html

  • 游客 发表于 3小时前 回复

    楼主英明!http://www.a5km.com/yxgl/dnf/22332.html

  • 游客 发表于 4小时前 回复

    最近回了很多帖子,都没人理我!http://www.dnf70.com/2983.html

  • 游客 发表于 4小时前 回复

    今天怎么了,什么人都出来了!http://www.a5km.com/yxgl/dnf/26791.html

  • 游客 发表于 4小时前 回复

    收藏了,怕楼主删了!http://4oytl.khaneh-sazi.com/9/5.html

  • 游客 发表于 5小时前 回复

    收藏了,很不错的内容!http://www.a5km.com/yxgl/jdqs/27566.html

  • 游客 发表于 5小时前 回复

    世界末日我都挺过去了,看到楼主我才知道为什么上帝留我到现在!http://www.dnf70.com/2983.html

  • 游客 发表于 6小时前 回复

    很多天不上线,一上线就看到这么给力的帖子!http://www.a5km.com/wzjc/jdqskm/21793.html

  • 游客 发表于 6小时前 回复

    这一年啥事没干,光研究楼主的帖子了!http://www.dnf70.com/2983.html

  • 游客 发表于 6小时前 回复

    支持一下!http://ia7h.szxczh.com

  • 游客 发表于 6小时前 回复

    楼上的心情不错啊!http://www.a5km.com/yxgl/dnf/22332.html

  • 游客 发表于 6小时前 回复

    顶顶更健康!http://wg8a.731193.com

  • 游客 发表于 6小时前 回复

    楼主内心很强大!http://www.dnf70.com/912.html

  • 游客 发表于 7小时前 回复

    楼主你想太多了!http://11vsv.zzllzzll.com/6/4.html

  • 游客 发表于 7小时前 回复

    我和我的小伙伴都惊呆了!http://www.a5km.com/yxgl/dnf/24005.html

  • 游客 发表于 7小时前 回复

    楼主是男的还是女的?http://www.a5km.com/yxgl/jdqs/27914.html

  • 游客 发表于 8小时前 回复

    楼主是我最崇拜的人!http://www.a5km.com/yxgl/dnf/23735.html

  • 游客 发表于 9小时前 回复

    我裤子脱了,纸都准备好了,你就给我看这个?http://yvz7p.dzyxq.com/21/5.html

  • 游客 发表于 10小时前 回复

    楼主今年多大了?http://www.a5km.com/yxgl/jdqs/27500.html

  • 游客 发表于 10小时前 回复

    收藏了,怕楼主删了!http://www.dnf70.com/1867.html

  • 游客 发表于 10小时前 回复

    雷锋做好事不留名,都写在帖子里!http://plq.qishu123.com