如何为文件树添加缩进线

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

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

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

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

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

.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

  • 思源笔记

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

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

    25713 引用 • 106381 回帖
  • Q&A

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

    9854 引用 • 44788 回帖 • 81 关注
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 更新了该帖

相关帖子

被采纳的回答
  • 我从 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 关键字强制应用此样式,覆盖其他可能存在的样式。

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

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • jxst991059 1 评论

    同求,我也想要这个代码片段

    我回答了,你看看回帖内容
    JeffreyChen
  • 其他回帖
  • 我用暗黑模式感觉那个框框太亮了,有点影响我看文件标题

  • jxst991059 2 赞同

    感谢,基于你提供的代码,我做了大幅精简,感觉这样就够了,也更加接近出厂默认的体验:

    .sy__file .b3-list-item__toggle {

    padding-left: 2px !important;

    padding-right: 2px;

    }

    .sy__file .b3-list.b3-list--background ul {

    border-left: 1px solid #e0e0e0;

    margin-left: 18px;

    }

  • 我实现了!下面这段代码原来是 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 回复
  • 查看全部回帖

推荐标签 标签

  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    86 引用 • 165 回帖 • 2 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 33 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    173 引用 • 1202 回帖
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    501 引用 • 1395 回帖 • 245 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 646 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 1 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    734 引用 • 1281 回帖 • 1 关注
  • Unity

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

    25 引用 • 7 回帖 • 122 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 400 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 510 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 794 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    91 引用 • 59 回帖 • 3 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • abitmean

    有点意思就行了

    33 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    438 引用 • 1250 回帖 • 594 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 5 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 3 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 9 关注
  • Swagger

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

    26 引用 • 35 回帖 • 3 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 5 关注
  • OpenCV
    15 引用 • 36 回帖 • 5 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖 • 7 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    99 引用 • 367 回帖
  • CentOS

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

    239 引用 • 224 回帖 • 1 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1742 回帖 • 7 关注