登录 注册

【求代码片段】如何为文件树添加缩进线

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

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

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

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

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


.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

  • 思源笔记

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

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

    18900 引用 • 70819 回帖
  • Q&A

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

    6609 引用 • 29654 回帖 • 250 关注
1 引用
【代码片段分享】思源笔记用到现在积累的所有代码片段 • 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
654 189 22 350 4 6 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 回帖
【求代码片段】如何为文件树添加缩进线

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • JeffreyChen • • 1 评论
    付费者 支持者 捐赠者

    我从 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 关键字强制应用此样式，覆盖其他可能存在的样式。

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

    1 引用
    如果看不懂是什么意思，随便改一改数值，重新加载之后看看变化就知道了
    JeffreyChen •
  • 其他回帖
  • jxst991059 • • 1 评论
    付费者

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

    我回答了，你看看回帖内容
    JeffreyChen •
  • jxst991059 • • 1 赞同
    付费者

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

    .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;

    }

  • 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
上海
回帖
92
 帖子
17
 积分
1421

近期热议

推荐标签 标签

  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    19 引用 • 31 回帖 • 3 关注
  • API

    应用程序编程接口（Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

    76 引用 • 421 回帖 • 1 关注
  • Sym

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

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

    523 引用 • 4581 回帖 • 690 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台，同时可以将自己看到的精彩内容分享到微信朋友圈。

    129 引用 • 793 回帖 • 1 关注
  • TensorFlow

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

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

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用，而且功能强大。你无需专门学习，只需看上几眼，就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 598 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    330 引用 • 614 回帖 • 1 关注
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖 • 1 关注
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    181 引用 • 448 回帖
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 1 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    70 引用 • 532 回帖 • 715 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    116 引用 • 99 回帖 • 269 关注
  • NGINX

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

    311 引用 • 546 回帖 • 32 关注
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    941 引用 • 1458 回帖 • 151 关注
  • 持续集成

    持续集成（Continuous Integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通过每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

    14 引用 • 7 回帖
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 249 关注
  • 国际化

    i18n（其来源是英文单词 internationalization 的首末字符 i 和 n，18 为中间的字符数）是“国际化”的简称。对程序来说，国际化是指在不修改代码的情况下，能根据不同语言及地区显示相应的界面。

    7 引用 • 26 回帖 • 4 关注
  • Sandbox

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

    371 引用 • 1217 回帖 • 582 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念，推广开源项目，为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖 • 2 关注
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 335 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构，这是有关软件整体结构与组件的抽象描述，用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    140 引用 • 441 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据（或者事件）流的 API。它组合了观察者模式，迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 127 关注
  • CSDN

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

    14 引用 • 155 回帖
  • Solo

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    1425 引用 • 10043 回帖 • 468 关注
  • Dubbo

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

    60 引用 • 82 回帖 • 610 关注
  • TGIF

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

    284 引用 • 4481 回帖 • 657 关注
  • 机器学习

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

    76 引用 • 37 回帖

最新标签