Alist

一个支持多种存储的文件列表程序，使用 Gin 和 Solidjs
这是美化后的效果：
美化效果1
美化效果2
接下来就开始美化吧！
首先你要进入alist后台中的设置然后是全局，你会看到自定义头部和自定义内容
我们的自定义头部用来加载一些css后期可以自行添加~
ALIST_V3样式参考liushen

新版本的alist结构发生了变化，不再使用alist_v2的样式，请使用alist_v3样式

ALIST_V3自定义头部 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 字体引入 -->
<link rel="preconnect" href="https://fontsapi.zeoseven.com" crossorigin />
<link rel="stylesheet"
    href="https://fontsapi.zeoseven.com/7/main/result.css"
    onerror="this.href='https://fontsapi-storage.zeoseven.com/7/main/result.css'" />

<!-- 图标库 Font6 Pro -->
<link rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.0.1/css/fontawesome.min.css">
<link rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.0.1/css/all.min.css">

<!-- 不蒜子计数器 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<!-- 一言 API -->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
ALIST_V3自定义内容 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<div id="customize" style="display: none;">
    <!-- 底部信息栏 -->
    <footer class="copyright" style="margin-top: 3rem; padding: 1rem 0; text-align: center;">
      <!-- 一言 -->
      <p id="hitokoto">你现在的气质里，藏着你走过的路，读过的书和爱过的人。</p>
  
      <!-- 友链 -->
      <div style="margin-bottom: 0rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem;">
        <a href="https://xxxx.top/" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #409EFF;">
          <i class="fas fa-home" style="margin-right: 0.4rem;"></i>主页
        </a>
        <a href="https://xxxx.top/" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #409EFF;">
          <i class="fas fa-edit" style="margin-right: 0.4rem;"></i>博客
        </a>
        <a href="https://github.com/shangskr" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #409EFF;">
          <i class="fab fa-github" style="margin-right: 0.4rem;"></i>GitHub
        </a>
        <a href="https://xxxx.com/" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #409EFF;">
          <i class="fas fa-comment-lines" style="margin-right: 0.4rem;"></i>留言
        </a>
        <a href="/@manage" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #409EFF;">
          <i class="fa-solid fa-folder-gear" style="margin-right: 0.4rem;"></i>管理
        </a>
      </div>

  
      <!-- 访问统计 -->
      <div style="margin-bottom: 0rem;">
        本<span style="color: #0d6efd;"><a href="#" style="color: #0d6efd; text-decoration: none;">目录</a></span>访问量：
        <span id="busuanzi_value_page_pv" style="color: #0d6efd;"></span> 次，
        总访问量：
        <span id="busuanzi_value_site_pv" style="color: #0d6efd;"></span> 次，
        总访客数：
        <span id="busuanzi_value_site_uv" style="color: #0d6efd;"></span> 人
      </div>

      <!-- 版权信息 -->
      <div style="margin-bottom: 0rem;">
        <i class="fa-solid fa-copyright"></i>
        2021 -
        <script>document.write((new Date()).getFullYear());</script>
        Powered by <a href="https://xxxx.top/" target="_blank" style="text-decoration: none; color: inherit;">安小歪</a>
      </div>

  
      <!-- 运行时间 -->
      <div class="runtime">
        <i class="fa fa-alarm-clock" style="color:#409EFF;"></i>
        <span id="runtime_span"></span>
      </div>
    </footer>
  </div>
  
  <!-- 样式优化 -->
  <style>
  .hope-ui-light {
      --my-color: rgba(255,255,255,0.4);
      --color-main-custom: #ffffff9e;
  }
  .hope-ui-dark {
      --my-color: rgba(0,0,0,0.4);
      --color-main-custom: #2e2e2e70;
  }
  
  * {
      font-family: "Zhuque Fangsong (technical preview)";
      letter-spacing: 2px;
  }
  
  /* 背景里面的url可以替换为自己的图片url地址 */
  body {
      background-image: linear-gradient(to bottom, var(--my-color), var(--my-color)), url("https://www.loliapi.com/acg") !important; 
      background-repeat: no-repeat !important;
      background-size: cover !important;
      background-attachment: fixed !important;
      background-position-x: center !important;
  }

  /*目录模糊背景*/
  .hope-breadcrumb__list.hope-c-cPYwgm.hope-c-PJLV.hope-c-PJLV-iehpHsP-css {
    background-color: var(--color-main-custom) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important; /* 兼容 Safari */
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
}
  
  /* 列表、Readme 区域透明度 */
  .hope-c-PJLV-igScBhH-css,
  .hope-c-PJLV-ikSuVsl-css,
  .hope-c-PJLV-ieGWMbI-css {
      background-color: #ffffff9e !important;
      backdrop-filter: blur(10px);
  }
  
  .hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
      background-color: var(--hope-colors-neutral3) !important;
  }
  
  /* 隐藏顶部 header 和底部 footer 背景 */
  .hope-c-PJLV-idaeksS-css,
  .hope-c-PJLV-ikaMhsQ-css {
      background: none !important;
  }
  
  .footer.hope-stack {
      display: none !important;
  }
  
  ::selection {
      background: #fbc2eb;
      color: #fff;
  }
  
  .copyright a,
  .copyright .by {
      text-decoration: none;
  }
  
  .copyright .by {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
  }
  
  .copyright a:hover {
      color: pink;
  }
  
  .copyright .run_item {
      display: flex;
      align-items: center;
      margin: 10px;
  }
  
  .copyright .link {
      padding: 4px;
      background: #479fff96;
      backdrop-filter: blur(10px);
      border-radius: 0 8px 8px 0;
  }
  
  .copyright .name {
      padding: 4px;
      backdrop-filter: blur(10px);
      background: var(--color-main-custom);
      border-radius: 8px 0 0 8px;
  }
  
  .copyright {
      padding: 50px;
  }
  
  .runtime {
      width: 100%;
      padding: 0px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  </style>
  
  <!-- 脚本逻辑 -->
  <script>
      // 站点运行时间
      function show_runtime() {
          window.setTimeout("show_runtime()", 1000);
          const X = new Date("11/28/2022 14:00:00");  //这里填写你的建站时间
          const Y = new Date();
          let T = (Y.getTime() - X.getTime());
          const M = 24 * 60 * 60 * 1000;
          let a = T / M;
          let A = Math.floor(a);
          let b = (a - A) * 24;
          let B = Math.floor(b);
          let c = (b - B) * 60;
          let C = Math.floor(c);
          let D = Math.floor((c - C) * 60);
          document.getElementById('runtime_span').innerHTML = "本站已运行 " + A + "天" + B + "小时" + C + "分" + D + "秒";
      }
      show_runtime();
  
      // 延迟加载逻辑
      let interval = setInterval(() => {
          const bodyContainer = document.querySelector(".body.hope-stack");
          if (bodyContainer) {
              bodyContainer.appendChild(document.getElementById("customize"));
              document.getElementById("customize").style.display = "block";
              clearInterval(interval);
          }
      }, 200);
  
      // 鼠标点击爱心特效
      !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
              }
              document.head.appendChild(a)
          }
  
          function c() {
              return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
          }
  
          var s = [];
          e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
              setTimeout(e, 1e3 / 60)
          };
  
          i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()
      }(window, document);
  </script>

替换自定义头部中的所有内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!-- 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" />

<!--不蒜子计数器-->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script＞

<!-- 评论系统使用的js -->
<link rel="stylesheet" href="https://npm.onmicrosoft.cn/@waline/client/dist/waline.css" />
<script src="https://npm.onmicrosoft.cn/@waline/client/dist/waline.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＞

<!-- 站点运行时间 -->
<script type="text/javascript">
    function show_runtime() {
        window.setTimeout("show_runtime()", 1000);
        X = new Date("11/28/2022 14:00:00");
        Y = new Date();
        T = (Y.getTime() - X.getTime());
        M = 24 * 60 * 60 * 1000;
        a = T / M;
        A = Math.floor(a);
        b = (a - A) * 24;
        B = Math.floor(b);
        c = (b - B) * 60;
        C = Math.floor((b - B) * 60);
        D = Math.floor((c - C) * 60);
        runtime_span.innerHTML = "本站已运行 " + A +  "天" + B + "小时" + C + "分" + D + "秒"
    }
    show_runtime();
</script＞

<style>
    /* 去除通知栏 右上角 X */
    .notify-render .hope-close-button {
        display: none;
    }

    /* 白天背景图 */
    .hope-ui-light {
        background-image: url(https://xxxx.png) !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position-x: center;
    }

    /* 夜间背景图 */
    .hope-ui-dark {
        background-image: url(https://xxxx.png) !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position-x: center;
    }

    /* 主列表夜间模式透明，50%这数值是控制透明度大小的 */
    .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
        background-color: rgb(0 0 0 / 50%) !important;
    }

    /* readme夜间模式透明，50%这数值是控制透明度大小的 */
    .hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
        background-color: rgb(0 0 0 / 50%) !important;
    }

    /* 主列表透明 */
    .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 .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;
    }
/*以下为waline评论系统专用*/
/*适配大小契合度*/
.comments {
    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 .comments {
    background-color: rgba(255, 255, 255, 0.8)!important;
}
/*评论区 - 夜间模式透明度*/
.hope-ui-dark .comments {
    background-color:rgb(0 0 0 / 80%)!important;
}
/* waline评论系统右侧的gif */
.wl-editor, .wl-input {
    background-size: contain!important;
}
#wl-edit {
    background: url(https://hexo.anxy.top/img/waline-bg.gif) 100% 100% no-repeat;
}

/*Waline表情自适应*/
.wl-emoji-popup{
    width: 100%;
}
 
/*渐变背景CSS*/
#canvas-basic {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -999;
}
 
.hope-c-PJLV-iiHckfM-css{
    min-height: 20vh!important;
}

/*音乐播放器进一步进行隐藏*/
.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://xxxxxx.js"></script＞

其中的waline的表情适配css是由SZ・Ninty提供的，从前我以为这是个bug~emmm

替换自定义内容中的所有内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!--延迟加载-->
<!--如果要写自定义内容建议都加到这个延迟加载的范围内-->
<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="comments" id="waline"></div>
        </center>
        <script＞
            Waline.init({
                el: '#waline',
                serverURL: '',
                search: false,
                meta: ["nick", "mail", "link"],
                requiredMeta: ["nick", "mail"],
                locale:{
                    placeholder: ''
                },
                emoji: []
            });
        </script＞
 
        <br />
        <center class="dibu">
            <div style=" line-height: 30px;font-size: 13pt;font-weight: bold;">
                <span style="color: rgb(255, 255, 255); font-weight: bold;" id="hitokoto">
                    <a href="#" id="hitokoto_text">
                        "一言API没有请求到啦~~"
                    </a>
                </span>
                <p style="margin-left: 10rem;font-size: 8pt;">
                </p>
            </div>

            <div style="font-size: 16px; font-weight: bold;">
                <!-- 友链信息 -->
                <span class="nav-item">
                    <a class="nav-link" href="https://hexo.anxy.top/about/" target="_blank">
                        <i class="fas fa-home" style="color:#409EFF" aria-hidden="true">
                        </i>
                        主页 |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="https://hexo.anxy.top/" 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="https://github.com/shangskr" target="_blank">
                        <i class="fab fa-github" style="color:#409EFF;" aria-hidden="true">
                        </i>
                        GitHub 
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="https://xxxx.com/" 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="/@manage" target="_blank">
                        <i class="fa-solid fa-folder-gear" style="color:#409EFF;" aria-hidden="true">
                        </i>
                        管理
                    </a>
                </span>
                <br />
                <!-- 版权信息 -->
                <span class="nav-item">
                    <i class="fa-solid fa-copyright" style="color:#409EFF;" aria-hidden="true">
                    </i>
                    2021-<script type="text/javascript">document.write((new Date()).getFullYear());</script＞ Powered by
                    <a class="nav-link" href="https://hexo.anxy.top/" target="_blank">
                        <i style="color:#409EFF;" aria-hidden="true">
                            安小歪
                        </i>
                    </a>
                </span>
                <br />
                <!--添加一个访问量-->
                <span>
                本"
                    <span style="color: rgb(13, 109, 252); font-weight: bold;"><a href="#">目录</a>
                    </span>
                "访问量 
                    <span id="busuanzi_value_page_pv" style="color: rgb(13, 109, 252); font-weight: bold;">
                    </span> 次 
                本站总访问量 
                    <span id="busuanzi_value_site_pv" style="color: rgb(13, 109, 252); font-weight: bold;">
                    </span> 次 
                本站总访客数 
                    <span id="busuanzi_value_site_uv" style="color: rgb(13, 109, 252); font-weight: bold;">
                    </span> 人
                <br />
                <!-- 站点运行时间 -->
                <i class="fa fa-alarm-clock" style="color:#409EFF" aria-hidden="true">
                </i>
                <span class="nav-item" id="runtime_span" style="color: rgb(255, 255, 255); font-weight: bold;">
                </span>
            </div>

        </center>
        <br />
        <br />
    </div>

    <!--一言API-->
    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script＞
    <!-- 延迟加载配套使用JS -->
<script＞
    let interval = setInterval(() => {
        if (document.querySelector(".footer")) {
            document.querySelector("#customize").style.display = "";
            clearInterval(interval);
        }
    }, 200);
</script＞

<!-- 网页鼠标点击特效 - 爱心 -->
<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)
        }

        function c() {
            return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
                .random()) + ")"
        }
        var s = [];
        e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
            .mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
                setTimeout(e, 1e3 / 60)
            }, i(
                ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
            ), n(), r()
    }(window, document);
</script＞

里面的评论系统自行配置

接下来就是评论的修改了（这里我也是想要折叠栏的效果emmm）

SZ・Ninty帮我提供了直接引入首页底部的效果，因为我引入的是waline评论系统感觉引入以后有点大emmm
上面自定义内容中的评论系统就是直接引入的，如果喜欢可以用这个
下面是我心心念念的折叠栏效果（用.toggle-comments 类定义了一个按钮样式，#comment-section 定义了评论区域的样式，将其初始状态设置为 display: none; 以隐藏评论内容。）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<style>
  .toggle-comments {
    color: #24292e;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  #comment-section {
    display: none;
    margin-top: 10px;
  }
</style>

<div id="comments">
  <button class="toggle-comments" onclick="toggleComments()">显示评论</button>
  <div id="comment-section">
    <!--评论模块还有下面的script也是-->
        <center>
            <div class="comments" id="waline"></div>
        </center>
        <script＞
            Waline.init({
                el: '#waline',
                serverURL: '',
                search: false,
                meta: ["nick", "mail", "link"],
                requiredMeta: ["nick", "mail"],
                locale:{
                    placeholder: ''
                },
                emoji: []
            });
        </script＞ -->
  </div>
</div>

<script＞
  function toggleComments() {
    var commentSection = document.getElementById("comment-section");
    var toggleButton = document.querySelector(".toggle-comments");
    
    if (commentSection.style.display === "none") {
      commentSection.style.display = "block";
      toggleButton.innerHTML = "隐藏评论";
    } else {
      commentSection.style.display = "none";
      toggleButton.innerHTML = "显示评论";
    }
  }
</script＞

折叠栏的这个评论你还需要添加css如下：
这个是评论按钮透明效果
1
2
3
4
/* 评论按钮透明 */
   .toggle-comments {
       background-color: rgba(255, 255, 255, 0.5) !important;
   }

还需要添加以下两个css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 评论折叠居中css -->
<style>
  .toggle-comments {
    color: #24292e;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
  }

  #comment-section {
    display: none;
    margin-top: 10px;
  }
</style>

<!-- 评论按钮线条消失术 -->
<style>
   button:focus {
    outline: none !important;
}
</style>

接下来是一些小小的美化

摘自Alist V3

搜索栏美化代码

带毛玻璃效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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>

不带毛玻璃效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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>

网页点击鼠标特效（两个）

核心价值观关键字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!-- 网页鼠标点击特效 - 核心价值观关键字 -->
<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＞

冒爱心

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!-- 网页鼠标点击特效 - 爱心 -->
<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)
            }
 
            function c() {
                return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
                    .random()) + ")"
            }
            var s = [];
            e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
                .mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
                    setTimeout(e, 1e3 / 60)
                }, i(
                    ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
                ), n(), r()
        }(window, document);
    
</script＞

最后还有一个樱花效果

添加在自定义内容中

1
2
3
4
<!-- PC端下樱花效果 -->
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery.pjax/2.0.1/jquery.pjax.min.js"></script＞
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/nprogress/0.2.0/nprogress.min.js"></script＞
<script src="https://cdn.qqsuu.cn/api/js/hua.js"></script＞

好像没了吧（不知丢了）