登录 注册

如何为文件树添加缩进线

本贴最后更新于 445 天前，其中的信息可能已经东海扬尘

根据好心人的回答，我自己改了改代码，也分享一下：

⭕ 主要改动为：（适用于明亮模式，暗黑模式需要自己调下颜色）
① 图标保持为原大小。
② 缩进线间距调大、调细。（我真的密恐，受不了那么密密麻麻还很粗的缩进线）
③ 添加了笔记区隔。

这个代码的缺陷是：存在不必要的缩进线，导致观感不够好，理想状况下，笔记本下的第一条缩进线应该是不需要的。

欢迎美工大佬们进一步改进、分享代码 🌸


.sy__file .b3-list-item__toggle {
   padding-left:8px !important;
   padding-right:1px;
   color:#899fad; 
}

.sy__file .b3-list.b3-list--background ul {
   border-left:1px dotted #c5d2db;
   margin:0px 0px 0px 16.5px;
}

.sy__file .fn__flex-1 {
   margin:0px;
   padding-right:5px;
}
.layout--float .file-tree {
   margin-right:5px;
}
.fn__flex-1.fn__flex-column.file-tree.sy__file .b3-list-item {
   margin-left:0px !important;
}

/* 笔记本 区隔 */
.sy__file ul.b3-list.b3-list--background {
    border-radius: 0.3em;
    margin: 6px 10px 6px 12px;
    outline: 1.5px double #d2dfe8;
    overflow: hidden;
}

其实还可以为 无子文档的文档 添加一个记号以便优化显示效果，但由于这个记号会污染大纲，而我又不知道如何才能让它不影响到大纲，故未采用。

b3-list-item.b3-list-item--hide-action .b3-list-item__toggle.fn__hidden::before {
    content: '○'; 
    font-size: 30%;
    display: block;
    position: absolute;
    visibility: visible;
    transition: var(--b3-transition);
    margin-bottom: 2px;
    margin-left: 2.3px;
}

如何为文件树添加类似 Obsidian 里的这种列表项引导线？

image.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    22337 引用 • 89380 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    8112 引用 • 37001 回帖 • 160 关注
1 引用
[css] [js] 思源笔记用到现在积累的所有代码片段 • JeffreyChen
4 操作
GloR 在 2023-09-03 09:16:54 更新了该帖
GloR 在 2023-09-02 15:22:35 更新了该帖
GloR 在 2023-09-02 15:18:43 更新了该帖
GloR 在 2023-09-02 15:17:14 更新了该帖
上海 位置
20 悬赏
1 感谢
2 收藏
1 引用
4 操作
10 回帖
5
2
2
938 291 22 528 4 7 1 82

相关帖子

被采纳的回答
  • JeffreyChen •
    付费者 支持者 捐赠者

    我从 Cliff-Dark 主题上把对应的 CSS 片段扒下来了：

    
/*文件树缩进线*/
.sy__file .b3-list-item__toggle {
   padding-left:1px !important;
   padding-right:1px;
   color:var(--b3-theme-primary);
   opacity:0.6;
}
.sy__file .b3-list-item__icon {
   margin-left:0px;
   margin-right:0px;
   padding:0px 0px;
   transform:scale(0.6);
}
.sy__file .b3-list.b3-list--background ul {
   border-left:2px solid var(--b3-theme-background-light);
   margin:0px 0px 0px 10px;
}
.sy__file .fn__flex-1 {
   margin:0px;
   padding-right:5px;
}
.layout--float .file-tree {
   margin-right:5px;
}
.fn__flex-1.fn__flex-column.file-tree.sy__file .b3-list-item {
   margin-left:0px !important;
}

    如果你想改一改样式，可以参考以下 GPT 的回答：

    --GPT 回答分界线--

    在这段代码中，每个模块的作用如下：

    1. .sy__file .b3-list-item__toggle 模块：

      • padding-left:1px !important;：设置列表项的左内边距为 1 像素。
      • padding-right:1px;：设置列表项的右内边距为 1 像素。
      • color:var(--b3-theme-primary);：设置列表项的文本颜色为预定义的主题主色。
      • opacity:0.6;：设置列表项的透明度为 0.6。

    2. .sy__file .b3-list-item__icon 模块：

      • margin-left:0px;：将列表项图标的左外边距设置为 0 像素。
      • margin-right:0px;：将列表项图标的右外边距设置为 0 像素。
      • padding:0px 0px;：将列表项图标的内边距设置为 0 像素。
      • transform:scale(0.6);：将列表项图标进行缩放，缩放比例为 0.6。

    3. .sy__file .b3-list.b3-list--background ul 模块：

      • border-left:2px solid var(--b3-theme-background-light);：在文件列表的左侧添加一个宽度为 2 像素、颜色为预定义的背景亮色的实线边框。
      • margin:0px 0px 0px 10px;：设置文件列表的外边距，上、右、下边距为 0 像素，左边距为 10 像素。

    4. .sy__file .fn__flex-1 模块：

      • margin:0px;：将元素的外边距设置为 0 像素。
      • padding-right:5px;：将元素的右内边距设置为 5 像素。

    5. .layout--float .file-tree 模块：

      • margin-right:5px;：将浮动布局中的文件树元素的右外边距设置为 5 像素。

    6. .fn__flex-1.fn__flex-column.file-tree.sy__file .b3-list-item 模块：

      • margin-left:0px !important;：将文件树中的列表项的左外边距设置为 0 像素，并使用 !important 关键字强制应用此样式，覆盖其他可能存在的样式。

    以上是对每个模块的简要解释，它们主要用于调整文件列表中的元素的样式，包括列表项的内边距、图标的外边距和缩放、文件列表的边框和外边距，以及文件树中的列表项的外边距。

10 回帖
如何为文件树添加缩进线

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • GloR •
    付费者 作者

    我就是需要笔记本的区隔来着 😂

    1 回复
  • 其他回帖
  • JeffreyChen •
    付费者 支持者 捐赠者

    我把笔记本区隔的颜色改成 #5f7a8c ，那个框框就不会太显眼了

    1 回复
  • GloR •
    付费者 作者

    真有钻研精神 👍👍

    试了下，发现似乎是以牺牲笔记本下第一层级文档的缩进为代价的，不过好像也无伤大雅~

  • JeffreyChen • • 2
    付费者 支持者 捐赠者

    我实现了！下面这段代码原来是 ul ，我改成 ul>ul 之后就可以去掉第一条线了。

    .sy__file .b3-list.b3-list--background ul>ul {
   border-left:1px dotted #c5d2db;
   margin:0px 0px 0px 16.5px;
}

    现在我个人使用的完整代码片段是：

    /* 文件树缩进线&笔记本区隔 CSS片段*/
.sy__file .b3-list-item__toggle {
   padding-left:8px !important;
   padding-right:1px;
   color:#899fad; 
}

.sy__file .b3-list-item__icon {
margin-left:0px;
margin-right:0px;
padding:0px 0px;
transform:scale(0.7);
}

.sy__file .b3-list.b3-list--background ul>ul {
   border-left:1px dotted #c5d2db;
   margin:0px 0px 0px 16.5px;
}

.sy__file .fn__flex-1 {
   margin:0px;
   padding-right:5px;
}
.layout--float .file-tree {
   margin-right:5px;
}
.fn__flex-1.fn__flex-column.file-tree.sy__file .b3-list-item {
   margin-left:0px !important;
}

/* 笔记本 区隔 */
.sy__file ul.b3-list.b3-list--background {
    border-radius: 0.3em;
    margin: 6px 10px 6px 12px;
    outline: 1.5px double #5f7a8c;
    overflow: hidden;
}
    2 回复
  • 查看全部回帖
GloR
上海
回帖
121
 帖子
25
 积分
1244

近期热议

推荐标签 标签

  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 1 关注
  • 工具

    子曰：“工欲善其事，必先利其器。”

    286 引用 • 729 回帖
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖 • 1 关注
  • Oracle

    Oracle（甲骨文）公司，全称甲骨文股份有限公司（甲骨文软件系统有限公司），是全球最大的企业级软件公司，总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年，甲骨文已超越 IBM，成为继 Microsoft 后全球第二大软件公司。

    105 引用 • 127 回帖 • 382 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎，采用 Java 语言编写，不受平台的限制，同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式，可以兼容一些主流的数据库，因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 654 关注
  • 周末

    星期六到星期天晚，实行五天工作制后，指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 1 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年，是中国的 IT 社区和服务平台，为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖 • 1 关注
  • SSL

    SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 431 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    524 引用 • 4601 回帖 • 700 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 173 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 709 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 65 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • Python

    Python 是一种面向对象、直译式电脑编程语言，具有近二十年的发展历史，成熟且稳定。它包含了一组完善而且容易理解的标准库，能够轻松完成很多常见的任务。它的语法简捷和清晰，尽量使用无异义的英语单词，与其它大多数程序设计语言使用大括号不一样，它使用缩进来定义语句块。

    543 引用 • 672 回帖 • 1 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 9 关注
  • CentOS

    CentOS（Community Enterprise Operating System）是 Linux 发行版之一，它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码，因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • Vue.js

    Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖 • 19 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 625 关注
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    287 引用 • 4484 回帖 • 669 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 664 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 165 关注
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 595 关注

最新标签