解决侧边栏文档和目录对齐及间距问题

解决侧边栏文档和目录对齐及间距问题

目录

• 解决侧边栏文档和目录对齐及间距问题
• 目录
• 版权
• 环境
• 问题
• 解决

[toc]

版权

次问题由 《时光》和《白木》大佬一起解决，感谢2位大佬。💖💖💖

环境

Teek@1.5.0-2025.9.23版本

Teek-one开箱即用版仓库：https://cnb.cool/onedayxyy/vitepress-theme-teek-one-public

问题

问题：侧边栏 文件图标 和 目录图标 无法对齐问题

2025年10月11日提出。

One风格：

时光风格：

存在问题：

待前端大佬解决问题：

具体问题描述：

解决

（1）编辑docs\.vitepress\theme\style\sidebar.scss文件，添加如下代码:

/*为独立文档兜底缩进，与一级文件夹平齐*/
.VPSidebarItem.level-0 .items {
    padding-left: 0px !important;
}

/*为独立文档  让高度和目录高度保持一致*/
.VPSidebarItem.level-0 {
  padding-bottom: 10px !important;
}

次文件完整代码：

// 导入包含混合器定义的文件
@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;
}



/*为独立文档兜底缩进，与一级文件夹平齐*/
.VPSidebarItem.level-0 .items {
    padding-left: 0px !important;
}

/*为独立文档  让高度和目录高度保持一致*/
.VPSidebarItem.level-0 {
  padding-bottom: 10px !important;
}

（2）验证

运行项目，观察效果：（可以看到，原来问题已解决😜）

结束。