1//文章预览图渐变
2.article-image {
3    img {
4    mask: linear-gradient(to bottom, black 0%, black 25%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);  }
5}

 1/* Menu style */
 2#main-menu {
 3    list-style: none;
 4    overflow-y: auto;
 5    flex-grow: 1;
 6    font-size: 1.4rem;
 7    background-color: var(--card-background);
 8
 9    box-shadow: var(--shadow-l1);
10    display: none;
11    margin: 0 calc(var(--container-padding) * -1);
12
13    padding: 30px 30px;
14
15    @include respond(xl) {
16        padding: 15px 0;
17    }
18
19    &, .menu-bottom-section ol {
20        flex-direction: column;
21        gap: 30px;
22
23        @include respond(xl) {
24            gap: 25px;
25        }
26    }
27
28    &.show {
29        display: flex;
30    }
31
32    @include respond(md) {
33        align-items: flex-end;
34        display: flex;
35        background-color: transparent;
36        padding: 0;
37        box-shadow: none;
38        margin: 0;
39    }
40
41    li {
42        position: relative;
43        vertical-align: middle;
44        padding: 0;
45
46        @include respond(md) {
47            width: 100%;
48        }
49
50        svg {
51            stroke: currentColor;
52            stroke-width: 1.33;
53            width: 20px;
54            height: 20px;
55        }
56
57        a {
58            height: 100%;
59            display: inline-flex;
60            align-items: center;
61            color: var(--body-text-color);
62            gap: var(--menu-icon-separation);
63        }
64
65        span {
66            flex: 1;
67        }
68
69        &.current {
70            a {
71                color: var(--accent-color);
72                font-weight: bold;
73            }
74        }
75
76        &.menu-bottom-section {
77            margin-top: auto;
78
79            ol {
80                display: flex;
81                padding-left: 0;
82            }
83        }
84    }
85}

 1#main-menu { //左边菜单
 2    li {
 3        &:hover a{
 4            transition: all 0.2s ease-in-out;
 5            color: var(--light-red);
 6            transform: scale(1.05);
 7            font-weight: bold;
 8            filter: drop-shadow(var(--dropshadow-light));
 9        }
10
11        [data-scheme="dark"] & {
12            &:hover {
13                filter: drop-shadow(var(--dropshadow-dark));
14            }
15        }
16    }
17}

 1.page-link { //页面页码栏（需要添加JavaScript代码实现当前页高亮）
 2    transition: all 0.2s ease-in-out;
 3
 4    &.current.reset-style {
 5        font-weight: normal;
 6        background-color: var(--card-background);
 7        color: var(--card-text-color-secondary);
 8    }
 9    &:not(.current):hover { // 其他页面的悬停效果
10        color: var(--light-red);
11        background-color: var(--card-background-selected);
12        transform: scale(1.05);
13        font-weight: bold;
14    }
15}

 1<script>
 2/* 页码栏分页悬停效果 */
 3document.addEventListener('DOMContentLoaded', function() {
 4    const pagination = document.querySelector('.pagination');
 5    const pageLinks = document.querySelectorAll('.page-link');
 6    let currentPage = document.querySelector('.page-link.current');
 7
 8    pageLinks.forEach(link => {
 9        link.addEventListener('mouseenter', function() {
10            // 如果悬停的不是当前页面
11            if (!this.classList.contains('current') && currentPage) {
12                currentPage.classList.add('reset-style');
13            }
14        });
15
16        link.addEventListener('mouseleave', function() {
17            // 恢复当前页面样式
18            if (currentPage) {
19                currentPage.classList.remove('reset-style');
20            }
21        });
22    });
23});
24</script>

 1<!-- 扩大主页文章卡片可点击区域 -->
 2<script>
 3document.addEventListener('click', function(e) {
 4    const articleDetails = e.target.closest('.article-details');
 5    if (articleDetails && !e.target.closest('.article-category a')) {
 6        const titleLink = articleDetails.querySelector('.article-title a');
 7        if (titleLink) {
 8            window.location.href = titleLink.href;
 9        }
10    }
11});
12</script>

1//扩大主页文章卡片可点击区域(java)，同步更改鼠标光标样式
2.article-details {
3  cursor: url('/mouse/pointer.png'), pointer;
4}

 1params:
 2    comments: # 默认在第39行
 3        enabled: true
 4        provider: waline
 5
 6        waline: #默认在第75行
 7            serverURL: # 填写你的评论区网址，如：serverURL: https://xxxx.vercel.app/
 8            lang: zh-cn # 语言设置为中文
 9            emoji: # 为你的评论区引入表情
10                - https://gcore.jsdelivr.net/gh/Saidosi/azuki-emoji-for-waline@1.0/azukisan/ # 小豆泥
11            locale:
12                admin: 博主 # 设置评论区管理员标签
13                placeholder: |- # 评论框提示词，如果需要换行则输入换行符："|-"，不需要换行的话可以删掉
14                    您无需登录即可发表评论。如果需要收到回复通知，请留下您的邮箱地址。
15                    非登录状态下，如果您留下邮箱，您的头像将自动获取并设置为您的邮箱账户头像。
16                    由于vercle.app域名受到DNS污染，大陆ip地址无法参与评论。
17                nick: 昵称（选填） #昵称栏显示的标题文字，以下同理
18                mail: 邮箱（选填） 
19                link: 网址（选填）

  1    /* 评论区整体样式-by 失迹的博客 */
  2    .waline-container {
  3        background-color: var(--card-background);
  4        border-radius: var(--card-border-radius);
  5        box-shadow: var(--shadow-l1);
  6        padding: var(--card-padding);
  7        --waline-font-size: var(--article-font-size);
  8    }
  9    .waline-container .wl-count {
 10        color: var(--card-text-color-main);
 11    }
 12    /* 暗色模式下输入框背景 */
 13    [data-scheme="dark"] .wl-panel {
 14        background: #212121;
 15    }
 16    /* 提交按钮基础样式 */
 17    .wl-btn.primary {
 18        background: var(--body-text-color);
 19        border: none;
 20    }
 21    /* 提交按钮悬停&激活状态 */
 22    .wl-btn.primary:hover, .wl-btn.primary:active {
 23        border: none;
 24        background: var(--light-red);
 25    }
 26    /* 按正序、……悬停&激活状态 */
 27    .wl-sort li {
 28        transition: color 0.2s ease-in-out;
 29        &:hover {
 30            color: var(--body-text-color);
 31        }
 32        &.active {
 33            color: var(--light-red);
 34        }
 35    }
 36    /* markdown按钮与悬停状态 */
 37    [data-waline] a {
 38        color: var(--body-text-color);
 39        transition: color 0.2s ease-in-out;
 40        &:hover {
 41            color: var(--light-red)
 42        }
 43    }
 44    /* 删除、点赞、回复、编辑按钮悬停&激活状态 */
 45    .wl-card .wl-delete, .wl-card .wl-like, .wl-card .wl-reply, .wl-card .wl-edit {
 46        transition: color 0.2s ease-in-out;
 47        &:hover, &.active {
 48            color: var(--light-red);
 49        }
 50    }
 51    /* 登录按钮悬停&激活 */
 52    .wl-btn:hover, .wl-btn:active {
 53        border-color: var(--light-red);
 54        color: var(--light-red);
 55    }
 56    /* 表情、gif、图片、预览，悬停&激活状态 */
 57    .wl-action {
 58        transition: color 0.2s ease-in-out;
 59        &:hover, &.active{
 60            color: var(--light-red);
 61        }
 62    }
 63    /* 昵称等标签栏（= =艰难对齐） */
 64    .wl-header label {
 65        font-size: 1.4rem;
 66        padding-top: 1.8rem;
 67        padding-left: 2rem;
 68        padding-right: 0;
 69    }
 70    /* 主输入框间距 */
 71    .wl-editor {
 72        padding-left: 1.6rem;
 73        padding-top: 0.5rem;
 74    }
 75    /* 昵称等栏输入框：间距、圆角、字体大小 */
 76    .wl-header input {
 77        margin: 1rem;
 78        border-radius: 4px;
 79        font-size: 1.4rem;
 80    }
 81    /* 预览两个字的颜色 */
 82    .wl-preview h4 {
 83        color: var(--body-text-color);
 84    }
 85    /* 去掉认证符号背景 */
 86    .wl-cards .wl-user .verified-icon {
 87        background: none;
 88    }
 89    /* gif栏搜索框背景色、间距、圆角、输入符 */
 90    .wl-gif-popup input {
 91        background-color: var(--card-background);
 92        padding-left: 1.6rem;
 93        border-radius: 8px;
 94        &:focus-visible {
 95            color: var(--body-text-color);
 96        }
 97    }
 98    /* gif栏图片悬停效果与样式调整 */
 99    .wl-gif-popup img {
100        border-radius: 8px;
101        border: none;
102        transition: all 0.2s ease-in-out;
103        &:hover {
104            border-radius: 8px;
105            mask: linear-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.75) 100%);
106        }
107    }
108    /* 去掉表情悬停时背景 */
109    .wl-emoji-popup button:hover {
110        background: none;
111    }
112    /* 表情悬停效果：放大+旋转 */
113    .wl-emoji-popup .wl-emoji {
114        transition: transform 0.3s ease-in-out;
115        &:hover {
116            transform: scale(1.5) rotate(-15deg);
117        }
118    }
119    /* 不显示评论ip和设备环境等 */
120    .wl-card .wl-meta>span {
121        display: none;
122    }
123    /* 设置上一条的同时调整评论文字位置弥补空缺 */
124    .wl-card .wl-content {
125        padding-top: 0;
126    }

 1// .wl 和.waline 开头的是waline评论区的选择器
 2// default光标图片
 3body,
 4html,
 5.article-content img,
 6.waline-container,
 7.wl-header label {
 8    cursor: url(../mouse/default.png),
 9    auto !important;
10}
11
12// pointer光标图片
13a:hover,
14button:hover,
15.copyCodeButton:hover,
16#dark-mode-toggle,
17.wl-actions label,
18.wl-actions a,
19.wl-emoji-popup .wl-tab-wrapper button,
20.wl-gif-popup img,
21.wl-sort li {
22    cursor: url(../mouse/pointer.png),
23    auto !important;
24}
25
26// text光标图片
27input:hover,
28.site-description,
29.article-subtitle,
30.article-content span,
31.article-content li,
32.article-content p,
33.wl-editor, .wl-input, 
34.wl-header input,
35[data-waline] p {
36    cursor: url(../mouse/text.png),
37    auto;
38}

 1// 隐藏一大堆滚动条
 2#TableOfContents, //导航栏
 3#main-menu, //左侧菜单
 4.wl-emoji-popup .wl-tab-wrapper,//评论区表情
 5.wl-gallery, //评论区gif
 6.wl-editor { //评论区主输入框
 7    scrollbar-width: none; /* Firefox */
 8    -ms-overflow-style: none; /* IE and Edge */
 9}
10
11#TableOfContents::-webkit-scrollbar,
12#main-menu::-webkit-scrollbar,
13.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar,
14.wl-gallery::-webkit-scrollbar,
15.wl-editor::-webkit-scrollbar {
16    display: none; /* Chrome, Safari and Opera */
17}