登录 注册

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

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

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

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

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

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


.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

  • 思源笔记

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

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

    19839 引用 • 76036 回帖
  • Q&A

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

    6897 引用 • 31121 回帖 • 227 关注
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
726 212 22 398 4 7 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 回帖
【求代码片段】如何为文件树添加缩进线

欢迎来到这里！

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

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

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

    我回答了，你看看回帖内容
    JeffreyChen •
  • 其他回帖
  • GloR •
    付费者 作者

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

    1 回复
  • 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
上海
回帖
94
 帖子
18
 积分
1421

近期热议

推荐标签 标签

  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 645 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储，专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 496 关注
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖
  • OpenStack

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

    10 引用 • 1 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 8 关注
  • AngularJS

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

    12 引用 • 50 回帖 • 437 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    45 引用 • 113 回帖 • 285 关注
  • 爬虫

    网络爬虫（Spider、Crawler），是一种按照一定的规则，自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • Maven

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

    186 引用 • 318 回帖 • 336 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘（Capacitive Keyboard）。

    5 引用 • 74 回帖 • 424 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 531 关注
  • 运维

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

    148 引用 • 257 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 179 关注
  • 友情链接

    确认过眼神后的灵魂连接，站在链在！

    24 引用 • 373 回帖
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言，应用广泛。C++ 支持多种编程范式，面向对象编程、泛型编程和过程化编程。

    106 引用 • 152 回帖
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖
  • 工具

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

    280 引用 • 715 回帖
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖 • 6 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 608 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    40 引用 • 40 回帖 • 2 关注
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 316 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 408 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 1 关注
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖 • 1 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    543 引用 • 3531 回帖
  • 招聘

    哪里都缺人，哪里都不缺人。

    189 引用 • 1056 回帖

最新标签