One

主题

00:00:00
2025-08-312025-08-30博客搭建Teek
491
2.4m
0

侧边栏hover美化 ​

侧边栏hover美化 ​

image-20250830164321469

目录 ​

[toc]

环境 ​

在 Teek@1.4.5-2025.8.24 上测试成功。

2025年8月30日测试。

版权 ​

配置来自《Hyde Blog | 人心中的成见是一座大山》大佬的指导，感谢大佬💖💖💖。

效果 ​

给侧边栏文件/目录 添加hover效果。

配置 ​

（1）新建docs\.vitepress\theme\style\sidebar.scss文件：

css
// 导入包含混合器定义的文件
@use "./var";

/* 侧边栏缩放效果 */
.group:has([role="button"]) .VPSidebarItem.level-0 .items {
    padding-left: 15px !important;
    border-left: 1px solid var(--vp-c-divider);
    border-radius: 2px;
    transition: all 0.25s ease;
}

/* 侧边栏项基本样式 */
#VPSidebarNav .VPSidebarItem > .item {
    align-items: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

#VPSidebarNav .VPSidebarItem > .item:hover {
    transform: translateX(4px);
}

/* 侧边栏项激活状态 */
#VPSidebarNav .VPSidebarItem.is-active > .item {
    color: var(--vp-c-brand);
}

/* 侧边栏项图标基本样式 */
#VPSidebarNav .VPSidebarItem > .item::before {
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background-size: cover;
    margin-right: 6px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

#VPSidebarNav .VPSidebarItem > .item:hover::before {
    transform: scale(1.1);
}

/* 文档项图标 - 折叠状态 */
#VPSidebarNav .VPSidebarItem:not(.is-link).collapsed > .item::before {
    background-image: url("/svg/document.svg");
}

/* 文档项图标 - 展开状态 */
#VPSidebarNav .VPSidebarItem:not(.is-link) > .item::before {
    background-image: url("/svg/document-open.svg");
}

/* 链接项图标 */
#VPSidebarNav .VPSidebarItem.is-link > .item::before {
    background-image: url("/svg/file.svg");
}

/* 深色模式支持 */
.dark #VPSidebarNav .VPSidebarItem > .item::before {
    filter: brightness(0.8);
}

.dark #VPSidebarNav .VPSidebarItem.is-active > .item::before {
    filter: brightness(1) hue-rotate(180deg);
}

// 侧边栏二级菜单激活左侧|激活样式
// #VPSidebarNav .VPSidebarItem .items {
//     overflow: hidden;
// }

//使用混合器为侧边栏一级标题应用渐变文本
// .VPSidebarItem.level-0 .text {
//     // @include var.text-gradient;
//     color: var(--vp-c-brand-1) !important;
// }

// 一级文件夹hover渐变效果
.VPSidebarItem.level-0 .item:hover .text {
    @include var.text-gradient;
    opacity: 0.9;
}

// 或者为激活状态的侧边栏项应用渐变
.VPSidebarItem.level-0.is-active .text {
    @include var.text-gradient;
}

（2）引入

编辑docs\.vitepress\theme\style\index.scss文件：

css
@use "./sidebar.scss" as *; // 侧边栏样式

（3）验证。

结束。

最近更新