登录 注册

如何为文件树添加缩进线

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

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

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

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

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


.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

  • 思源笔记

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

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

    28452 引用 • 119811 回帖 • 1 关注
  • Q&A

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

    11158 引用 • 50674 回帖 • 50 关注
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.5k 366 26 767 5 7 1 346

相关帖子

被采纳的回答
  • 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 回帖
如何为文件树添加缩进线

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • chenshinshi •
    订阅者

    toy 主题和 cliff-dark 都有

  • 其他回帖
  • JeffreyChen •
    订阅者 付费者 支持者 捐赠者 先知 恶龙

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

  • JeffreyChen •
    订阅者 付费者 支持者 捐赠者 先知 恶龙

    现在推荐使用「文档树自定义」插件：

    image.png

    笔记本外框刚刚也加上了：Issue #8 · zxkmm/siyuan_doctree_compress

    1 操作
    JeffreyChen 在 2024-01-26 15:22:31 更新了该回帖
  • 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
上海
回帖
178
 帖子
38
 积分
1010

近期热议

推荐标签 标签

  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 123 关注
  • RYMCU

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

    4 引用 • 6 回帖 • 57 关注
  • 游戏

    沉迷游戏伤身，强撸灰飞烟灭。

    188 引用 • 833 回帖
  • Scala

    Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 181 关注
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    89 引用 • 1251 回帖 • 376 关注
  • 小说

    小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    33 引用 • 108 回帖
  • danl
    • 216 关注
  • Excel
    32 引用 • 29 回帖 • 1 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    232 引用 • 484 回帖
  • 锤子科技

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

    4 引用 • 31 回帖 • 3 关注
  • 自由行
  • Elasticsearch

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

    117 引用 • 99 回帖 • 190 关注
  • JRebel

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

    26 引用 • 78 回帖 • 692 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    34 引用 • 333 回帖 • 1 关注
  • Q&A

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

    11158 引用 • 50674 回帖 • 50 关注
  • TGIF

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

    293 引用 • 4496 回帖 • 687 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 668 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    5 引用 • 16 回帖 • 2 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 545 关注
  • 创业

    你比 99% 的人都优秀么？

    81 引用 • 1396 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3206 引用 • 8217 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx，非正式缩写为 FF），是一个开源的网页浏览器，使用 Gecko 排版引擎，支持多种操作系统，如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 368 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具，助力您的学习与思考，让您的大脑更高效的记忆。

    笔记整理交给我，一心只读圣贤书。

    1 引用 • 1 回帖 • 1 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议，并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

    960 引用 • 946 回帖
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 4 关注
  • 深度学习

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

    45 引用 • 44 回帖 • 2 关注
  • OnlyOffice
    4 引用 • 41 关注

最新标签