登录 注册

如何为文件树添加缩进线

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

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

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

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

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


.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

  • 思源笔记

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

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

    25222 引用 • 104013 回帖 • 1 关注
  • Q&A

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

    9642 引用 • 43838 回帖 • 95 关注
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 感谢
3 收藏
1 引用
4 操作
10 回帖
5
2
2
1.3k 342 22 686 4 7 1 201

相关帖子

被采纳的回答
  • 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 •
  • 其他回帖
  • chenshinshi •
    订阅者

    toy 主题和 cliff-dark 都有

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

    我用暗黑模式感觉那个框框太亮了，有点影响我看文件标题

  • 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
上海
回帖
129
 帖子
26
 积分
1287

近期热议

推荐标签 标签

  • SVN

    SVN 是 Subversion 的简称，是一个开放源代码的版本控制系统，相较于 RCS、CVS，它采用了分支管理系统，它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 692 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖 • 1 关注
  • 笔记

    好记性不如烂笔头。

    310 引用 • 794 回帖
  • 周末

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

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

    Shell 脚本与 Windows/Dos 下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大，比用其他编程程序编辑的程序效率更高，因为它使用了 Linux/Unix 下的命令。

    124 引用 • 74 回帖
  • 锤子科技

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

    4 引用 • 31 回帖 • 8 关注
  • CodeMirror
    2 引用 • 17 回帖 • 161 关注
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    173 引用 • 518 回帖
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 1 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 247 关注
  • Outlook
    1 引用 • 5 回帖
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统，在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖 • 1 关注
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    91 引用 • 384 回帖
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本，加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较（vimdiff）、语法高亮、全面的帮助系统、本地脚本（Vimscript）和便于选择的可视化模式。

    29 引用 • 66 回帖
  • iOS

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

    88 引用 • 139 回帖
  • SQLite

    SQLite 是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时，提供更无缝的用户体验。

    1 引用 • 2 回帖 • 82 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 55 关注
  • Docker

    Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的操作系统上。容器完全使用沙箱机制，几乎没有性能开销，可以很容易地在机器和数据中心中运行。

    494 引用 • 928 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点；但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中，从而不再需要读写 HDFS，因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 568 关注
  • OpenCV
    15 引用 • 36 回帖
  • 服务

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

    41 引用 • 24 回帖 • 4 关注
  • Chrome

    Chrome 又称 Google 浏览器，是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖 • 2 关注
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    170 引用 • 1529 回帖
  • Flume

    Flume 是一套分布式的、可靠的，可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 652 关注
  • 钉钉

    钉钉，专为中国企业打造的免费沟通协同多端平台， 阿里巴巴出品。

    15 引用 • 67 回帖 • 289 关注

最新标签