AList 网盘存储列表美化记录

Author： kared
发布时间：February 21, 2024
37 views
No comments
11817 words
Categories：资源收藏

本文章的美化内容参考自网络，并作为本站主题美化记录，如有新增将会实时更新。
</div>

本文最后更新时间：2024 年 2 月 21 日 01:48:00 
</div>

`AList` 是一个支持多存储的文件列表程序，我的 `AList` 站点基于 Docker 部署在 NAS 中，由 `AList V3.30.0` 提供强力驱动。本文将详细介绍我的 `AList` 站点美化方案，同时，由于我的站点仅供内部使用，所以未添加音乐播放器、猫娘、计数器和评论等功能，如需添加更多更详细的美化方案可以参考：https://anwen-anyi.github.io。

## 自定义头部

食用方法：找到 `管理 -> 设置 -> 全局 -> 自定义头部` 修改添加下面代码即可，由于自定义头部代码大部分为 `CSS` 代码，因此 `CSS` 代码需要按照下面方式添加到自定义头部中：

```javascript

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

<style>

/* 在这里添加 CSS 样式 */

</style>
```

如果添加音乐播放器、猫娘、计数器和评论等功能，可能需要引入更多的 `js` 文件，请自行设置。

### 移除搜索中的快捷键

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d4f3be2593c356aedfce48737a5dee1588" aria-expanded="true"><div class="accordion-toggle"><span style="">移除搜索中的快捷键</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d4f3be2593c356aedfce48737a5dee1588" class="collapse collapse-content"><p></p>

```css
/* 移除搜索中的快捷键 */
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ihYBJPK-css {
    display: none !important;
}
```

### 移除整个搜索按钮

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f86d1c53ff1239938a9bf174f2e0d69b67" aria-expanded="true"><div class="accordion-toggle"><span style="">移除整个搜索按钮</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f86d1c53ff1239938a9bf174f2e0d69b67" class="collapse collapse-content"><p></p>

```css
/* 移除整个搜索按钮 */
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ikEIIxw-css {
    display: none !important;
}
```

### 搜索按钮改透明效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7bc7eb7d25d364fe861d274f7a258c2f30" aria-expanded="true"><div class="accordion-toggle"><span style="">搜索按钮改透明 - 毛玻璃效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-7bc7eb7d25d364fe861d274f7a258c2f30" class="collapse collapse-content"><p></p>

```css
/* 搜索按钮改透明毛玻璃效果-亮色 */
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
    background: rgba(255, 255, 255, 0.2)!important;
    backdrop-filter: blur(10px)!important;
}

/* 搜索按钮改透明毛玻璃效果-暗色 */
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
    background: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}
```

</br>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ab9a7d39d2bbbd76d65e7e45ee6e738e71" aria-expanded="true"><div class="accordion-toggle"><span style="">搜索按钮改透明 - 非毛玻璃效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ab9a7d39d2bbbd76d65e7e45ee6e738e71" class="collapse collapse-content"><p></p>

```css
/* 搜索按钮改透明非毛玻璃效果-亮色 */
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
    background: rgba(255, 255, 255, 0.2)!important;
}

/* 搜索按钮改透明非毛玻璃效果-暗色 */
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
    background: rgb(0 0 0 / 10%)!important;
}
```

### 搜索栏透明美化效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-fd0b751f63c0431239598cfd9d36986c79" aria-expanded="true"><div class="accordion-toggle"><span style="">搜索栏透明美化 - 毛玻璃效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-fd0b751f63c0431239598cfd9d36986c79" class="collapse collapse-content"><p></p>

```css
/* 搜索主体透明毛玻璃效果 - 亮色 */
.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;
}

```

</br>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f3b02a9d6ad2c146cd75a5bce92aa63a64" aria-expanded="true"><div class="accordion-toggle"><span style="">搜索栏透明美化 - 非毛玻璃效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f3b02a9d6ad2c146cd75a5bce92aa63a64" class="collapse collapse-content"><p></p>

```css
/* 搜索主体透明非毛玻璃效果 - 亮色 */
.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;
}
```

### 视图切换按钮改透明

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d89fc8f71d91502b94977e0f2caa810475" aria-expanded="true"><div class="accordion-toggle"><span style="">视图切换按钮改透明</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d89fc8f71d91502b94977e0f2caa810475" class="collapse collapse-content"><p></p>

```css
/* 视图切换按钮改透明-亮色 */
.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;
}
```

### 移除网站图标与搜索/切换按钮

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1885a12a21c4b0926538effe68e45f1927" aria-expanded="true"><div class="accordion-toggle"><span style="">移除网站图标与搜索/切换按钮</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1885a12a21c4b0926538effe68e45f1927" class="collapse collapse-content"><p></p>

```css
/* 移除网站图标与搜索/切换按钮 */
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iiOacaA-css {
    display: none!important;
}
```

### 移除站点公告关闭按钮

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2c9875e49668f23e5dec2add9bcadccb45" aria-expanded="true"><div class="accordion-toggle"><span style="">移除站点公告关闭按钮</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-2c9875e49668f23e5dec2add9bcadccb45" class="collapse collapse-content"><p></p>

```css
/* 移除站点公告关闭按钮 */
.notify-render .hope-close-button{
    display: none;
}
```

### 文字超长自动换行

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-60d7419324ada7c89e59a0f75439682a55" aria-expanded="true"><div class="accordion-toggle"><span style="">文字超长自动换行</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-60d7419324ada7c89e59a0f75439682a55" class="collapse collapse-content"><p></p>

```css
/* 文字超长自动换行 */
.name-box .name {
    white-space: unset !important;
    overflow: unset !important;
}
```

### 自定义网站背景图

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a3713998196b225c771a8355558ae47033" aria-expanded="true"><div class="accordion-toggle"><span style="">自定义网站背景图</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-a3713998196b225c771a8355558ae47033" class="collapse collapse-content"><p></p>

```css
/* 自定义网站背景图-亮色-GIF可用 */
.hope-ui-light {
    background-image: url("https://s3.bmp.ovh/imgs/2024/02/12/5700b0ceb8cc8c39.jpeg") !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position-x: center;
}

/* 自定义网站背景图-暗色-GIF可用 */
.hope-ui-dark {
    background-image: url("https://s3.bmp.ovh/imgs/2024/02/12/e137914b0749d93d.jpg") !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position-x: center;
}
```

### 主列表透明

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1d4267153ba19ec48382f5cdc417606179" aria-expanded="true"><div class="accordion-toggle"><span style="">主列表透明</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1d4267153ba19ec48382f5cdc417606179" class="collapse collapse-content"><p></p>

```css
/* 主列表透明-亮色 */
.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透明

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-bdd4d2ed263f12b7dff600dfe65bffa20" aria-expanded="true"><div class="accordion-toggle"><span style="">README透明</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-bdd4d2ed263f12b7dff600dfe65bffa20" class="collapse collapse-content"><p></p>

```css
/* 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;
}
```

### 侧边栏按钮透明

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-b4835dca111ec9cd87f4c50a84aa74d450" aria-expanded="true"><div class="accordion-toggle"><span style="">侧边栏按钮透明</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-b4835dca111ec9cd87f4c50a84aa74d450" class="collapse collapse-content"><p></p>

```css
/* 侧边栏按钮透明-亮色 */
.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;
}
```

### 代码块透明

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-83503111e24929d26dc7a4687a4115f76" aria-expanded="true"><div class="accordion-toggle"><span style="">代码块透明</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-83503111e24929d26dc7a4687a4115f76" class="collapse collapse-content"><p></p>

```css
/* 代码块透明-亮色 */
.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;
}
```

### 移除底部信息

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c85493a9646d5c60a0dc448eff5b824942" aria-expanded="true"><div class="accordion-toggle"><span style="">移除底部信息</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-c85493a9646d5c60a0dc448eff5b824942" class="collapse collapse-content"><p></p>

```css
/* 移除底部信息 */
.footer {
    display: none !important;
}
```

### 设置全局字体

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3f052e24e9f1a747073d85937c0379bf20" aria-expanded="true"><div class="accordion-toggle"><span style="">设置全局字体</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-3f052e24e9f1a747073d85937c0379bf20" class="collapse collapse-content"><p></p>

```css
/* 设置全局字体 */
*{font-family:LXGW WenKai}
*{font-weight:bold}
body {font-family: LXGW WenKai;}
```

### 隐藏登陆LOGO图标

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-56dc9fcd311c4557da2d2e15697f982620" aria-expanded="true"><div class="accordion-toggle"><span style="">隐藏登陆LOGO图标</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-56dc9fcd311c4557da2d2e15697f982620" class="collapse collapse-content"><p></p>

```css
<style>
/* 隐藏登陆LOGO图标 */
.hope-c-PJLV-ibwASZs-css{
    display: none;
}
```

### 自定义鼠标样式

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a1ef950c50253fb6b54b116b27b9c8bd17" aria-expanded="true"><div class="accordion-toggle"><span style="">自定义鼠标样式</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-a1ef950c50253fb6b54b116b27b9c8bd17" class="collapse collapse-content"><p></p>

```css

<style>
  body {
    cursor: url(http://xxx/teacher_u20221021b3a89013_1666841028833_10660845_file.cur), default;
  }
  select{
    cursor: url(http://xxx/teacher_u2021090299b56677_1666842679271_10490748_file.cur), pointer;
  }
  button,a:hover{
    cursor: url(http://xxx/teacher_u20221017ac9f1124_1666842626270_11086578_file.cur), pointer;
  }
  input{
    cursor:url(http://xxx/teacher_u2021090299b56677_1666842633386_14976764_file.cur), text;
  }
  textarea,input:focus{
    cursor:url(http://xxx/teacher_u202210176ba36766_1666842640146_15845280_file.cur), text;
  }
  code{
    cursor: url(http://xxx/teacher_u20221021b3a89013_1666842646779_15864973_file.cur), default;
  }
  pre>code{
    cursor: url(http://xxx/teacher_u202210176ba36766_1666842653500_10010236_file.cur), default;
  }
</style>

```

## 自定义内容

食用方法：找到 `管理 -> 设置 -> 全局 -> 自定义内容` 修改添加下面代码即可

### 延迟加载

```javascript

<div id="customize" style="display: none;">

</div>

<script>
    let interval = setInterval(() => {
        if (document.querySelector(".footer")) {
            document.querySelector("#customize").style.display = "";
            clearInterval(interval);
        }
    }, 200);
</script>
```

### 网页鼠标点击特效

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-33303bae0da430806183697834dc91fb18" aria-expanded="true"><div class="accordion-toggle"><span style="">网页鼠标点击特效 - 核心价值观关键字</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-33303bae0da430806183697834dc91fb18" class="collapse collapse-content"><p></p>

```javascript

<script>
    (function() {
        var a_idx = 0;
        window.onclick = function(event) {
            var a = new Array("🎉富强🎉", "🐳民主🐳", "⛅文明⛅", "🤖和谐🤖", 
                              "🎉自由🎉", "🐳平等🐳", "⛅公正⛅", "🤖法治🤖", 
                              "🎉爱国🎉", "🐳敬业🐳", "⛅诚信⛅", "🤖友善🤖");
            var heart = document.createElement("b"); //创建b元素
            heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
            document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
            a_idx = (a_idx + 1) % a.length;
            heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式
            var f = 13,
            // 字体大小
            x = event.clientX - f / 2 - 30,
            // 横坐标
            y = event.clientY - f,
            // 纵坐标
            c = randomColor(),
            // 随机颜色
            a = 1,
            // 透明度
            s = 0.8; // 放大缩小
            var timer = setInterval(function() { //添加定时器
                if (a <= 0) {
                    document.body.removeChild(heart);
                    clearInterval(timer);
                } else {
                    heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s + ");";

y--;
                    a -= 0.016;
                    s += 0.002;
                }
            },
            15)
        }
        // 随机颜色
        function randomColor() {
            return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")";
        }
    } ());
</script>
```

</br>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-93bf9efd2f9ccfbe4fdb4ee39b3064764" aria-expanded="true"><div class="accordion-toggle"><span style="">网页鼠标点击特效 - 爱心</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-93bf9efd2f9ccfbe4fdb4ee39b3064764" class="collapse collapse-content"><p></p>

```javascript

<script type="text/javascript">
    !
    function(e, t, a) {
        function r() {
            for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) 
            : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x 
            + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," 
            + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
            requestAnimationFrame(r)
        }
        function n() {
            var t = "function" == typeof e.onclick && e.onclick;
            e.onclick = function(e) {
                t && t(),
                o(e)
            }
        }

function o(e) {
            var a = t.createElement("div");
            a.className = "heart",
            s.push({
                el: a,
                x: e.clientX - 5,
                y: e.clientY - 5,
                scale: 1,
                alpha: 1,
                color: c()
            }),
            t.body.appendChild(a)
        }

function i(e) {
            var a = t.createElement("style");
            a.type = "text/css";
            try {
                a.appendChild(t.createTextNode(e))
            } catch(t) {
                a.styleSheet.cssText = e
            }
            t.getElementsByTagName("head")[0].appendChild(a)
        }

### 添加站点运行时间

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-6dd4315f1f1fe4ed6ce891c4c9c02ede35" aria-expanded="true"><div class="accordion-toggle"><span style="">添加站点运行时间</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-6dd4315f1f1fe4ed6ce891c4c9c02ede35" class="collapse collapse-content"><p></p>

> 注意将其放在延迟加载中，同时由于本站的底部内容全部隐藏，所以在运行时间前面的图标上加了个跳转后台管理的超链接。

```javascript
< !--开站时间开始-->
<center> </br>
<span class="nav-item"> </span>
<span id="timeDate">🤖 载入天数. . .  </span>
<span id = "times" > ✨载入时间... </span>

### 渐变背景

#### ① 添加自定义头部

```css
/* 渐变背景CSS */
#canvas-basic {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -999;
}
```

#### ② 添加自定义内容

```javascript

---

🧐 本次分享到此结束，如果你有什么更好的美化方案，欢迎留言讨论！

Last modification：March 1, 2024

如果觉得我的文章对你有用，请随意赞赏

AList 网盘存储列表美化记录

kared • 2024 年 02 月 21 日

本文章的美化内容参考自网络，并作为本站主题美化记录，如有新增将会实时更新。
</div>

本文最后更新时间：2024 年 2 月 21 日 01:48:00 
</div>

## 自定义头部

<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />

<style>

/* 在这里添加 CSS 样式 */

</style>
```

如果添加音乐播放器、猫娘、计数器和评论等功能，可能需要引入更多的 `js` 文件，请自行设置。

### 移除搜索中的快捷键

```css
/* 移除搜索中的快捷键 */
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ihYBJPK-css {
    display: none !important;
}
```

### 移除整个搜索按钮

```css
/* 移除整个搜索按钮 */
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ikEIIxw-css {
    display: none !important;
}
```

### 搜索按钮改透明效果

```css
/* 搜索按钮改透明毛玻璃效果-亮色 */
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
    background: rgba(255, 255, 255, 0.2)!important;
    backdrop-filter: blur(10px)!important;
}

/* 搜索按钮改透明毛玻璃效果-暗色 */
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
    background: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}
```

</br>

```css
/* 搜索按钮改透明非毛玻璃效果-亮色 */
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
    background: rgba(255, 255, 255, 0.2)!important;
}

/* 搜索按钮改透明非毛玻璃效果-暗色 */
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
    background: rgb(0 0 0 / 10%)!important;
}
```

### 搜索栏透明美化效果

```css
/* 搜索主体透明毛玻璃效果 - 亮色 */
.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
   background-color: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}

/* 搜索主体透明毛玻璃效果 - 暗色 */
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
    background-color: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}

```

</br>

```css
/* 搜索主体透明非毛玻璃效果 - 亮色 */
.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;
}
```

### 视图切换按钮改透明

```css
/* 视图切换按钮改透明-亮色 */
.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;
}
```

### 移除网站图标与搜索/切换按钮

```css
/* 移除网站图标与搜索/切换按钮 */
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iiOacaA-css {
    display: none!important;
}
```

### 移除站点公告关闭按钮

```css
/* 移除站点公告关闭按钮 */
.notify-render .hope-close-button{
    display: none;
}
```

### 文字超长自动换行

```css
/* 文字超长自动换行 */
.name-box .name {
    white-space: unset !important;
    overflow: unset !important;
}
```

### 自定义网站背景图

### 主列表透明

```css
/* 主列表透明-亮色 */
.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透明

```css
/* 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;
}
```

### 侧边栏按钮透明

```css
/* 侧边栏按钮透明-亮色 */
.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;
}
```

### 代码块透明

```css
/* 代码块透明-亮色 */
.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
/* 移除底部信息 */
.footer {
    display: none !important;
}
```

### 设置全局字体

```css
/* 设置全局字体 */
*{font-family:LXGW WenKai}
*{font-weight:bold}
body {font-family: LXGW WenKai;}
```

### 隐藏登陆LOGO图标

```css
<style>
/* 隐藏登陆LOGO图标 */
.hope-c-PJLV-ibwASZs-css{
    display: none;
}
```

### 自定义鼠标样式

```

## 自定义内容

食用方法：找到 `管理 -> 设置 -> 全局 -> 自定义内容` 修改添加下面代码即可

### 延迟加载

```javascript

<div id="customize" style="display: none;">

</div>

### 网页鼠标点击特效

</br>

### 添加站点运行时间

> 注意将其放在延迟加载中，同时由于本站的底部内容全部隐藏，所以在运行时间前面的图标上加了个跳转后台管理的超链接。

```javascript
< !--开站时间开始-->
<center> </br>
<span class="nav-item"> </span>
<span id="timeDate">🤖 载入天数. . .  </span>
<span id = "times" > ✨载入时间... </span>

### 渐变背景

#### ① 添加自定义头部

```css
/* 渐变背景CSS */
#canvas-basic {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -999;
}
```

#### ② 添加自定义内容

```javascript

---

🧐 本次分享到此结束，如果你有什么更好的美化方案，欢迎留言讨论！

AList 网盘存储列表美化记录

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

树莓派搭建 Clash 透明代理/网关

炼丹服务器 CentOS 7 安装 NVIDIA 显卡驱动

Docker 配置深度学习炼丹炉（初级）

YOLO V8 实战：私有数据集训练全指南

AList 网盘存储列表美化记录

如何优雅获取网络博客内容并生成文字云

【全面指南】Python Request 库

排序算法：深度解析 & 代码实现

炼丹服务器 CentOS 7 安装 NVIDIA 显卡驱动

【全面指南】正则表达式：文本处理的瑞士军刀

AList 网盘存储列表美化记录

Leave a Comment Cancel reply 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

AList 网盘存储列表美化记录

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款