登录 注册

【功能建议】建议大纲目录优化展示效果，增加层级标识线

本贴最后更新于 1166 天前，其中的信息可能已经时移世易

效果图示如下：

16341804111.jpg

  • 思源笔记

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

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

    23025 引用 • 92623 回帖
赣州 位置
4 回帖
2
420 67 36 141 5 6 164

相关帖子

4 回帖
【功能建议】建议大纲目录优化展示效果，增加层级标识线

欢迎来到这里！

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

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

    这个暂时不添加，感谢反馈。

    1 回复
  • Gr6011010352 •
    订阅者 作者

    没关系，我只是提个建议，有空了不麻烦的话，顺手加一下 😄

  • abbj • • 4 评论
    订阅者 支持者 勇士

    +1 啊，我自己想搞但实在搞不定。

    我觉得没什么必要，没看见什么软件目录还加竖线的 。要明显区分，改各级大纲样式就好了
    Achuan-2 •
    @Achuan-2 好多文件管理器的文件树是有的，比如 tc xyplorer 之类的，vscode 也有，可惜我自己搞不定啊。有一个还是更清晰些。
    abbj •
    @abbj vscode 你一说我才发现有，然而有和没有差不多，感知完全不强 。只有第一层级的竖线有用 。要加只要仿照列表竖线加就是了
    Achuan-2 •
    @Achuan-2 我这看 vscode 也是多层级的竖线，只是会自动显示隐藏，而且最末一级显示最突出。 思源的文件树是一些并列的 li，我只会搞个 border-left，搞不定缩进关系，也实在没时间琢磨了。先这么用吧。
    abbj •
  • abbj •
    订阅者 支持者 勇士

    整出来一个，不够完美，分享下，凑合用吧。

    image.png

    image.png

    /*---------------------------------------------------*/
/*文件树缩进线v142*/
/*文件树整体结构是一个class为.b3-list.b3-list--files的ul，其中第一个li为笔记本名称，这个li同级的ul为当前笔记本的各条笔记列表，分别以li表示，每个li若有子笔记，则用一个ul包裹，内部重复这个层级结构*/
/*此外，每个li内部包含一些span，分别是折叠三角、emoji图标等*/
/*相对定位的起点，左对齐*/
ul.b3-list.b3-list--files {
	position: relative;
	padding-left: 10px !important;
}

/*每个li的起点都是一个三角，调整这个三角的缩进*/
.b3-list-item__toggle.b3-list-item__toggle--hl,
.b3-list-item.b3-list-item--hide-action,
.b3-list--files>span.b3-list-item__toggle.b3-list-item__toggle--hl,
.b3-list--files>span.b3-list-item__toggle.b3-list-item__toggle--hl fn__hidden {padding-left: 0px !important;}

ul.b3-list.b3-list--files ul>li {
	position: relative;
	padding-left: 20px !important;
}

ul.b3-list.b3-list--files ul>ul {
	position: relative;
	padding-left: 20px !important;
}

/*列表左边框作为层级线，自动显示隐藏*/
ul.b3-list.b3-list--files:hover>ul li:before,
ul.b3-list.b3-list--files:hover>ul ul:before {
	content: "";
    position: absolute;
    height: 100%;
    width: 1px;
    background-color: var(--custom-font-color-ui);
    top: 0;
	left: 2px;
	transition:all 0.5s ease-in-out;
}

/*文档树缩进线结束*/


/*---------------------------------------------------*/
/*大纲缩进线v142*/
/*大纲整体是一个class为b3-list--background的ul，一级标题是大纲的一个li，更次级标题放在和一级li同级的ul中，内部结果如上循环*/
/*先把大纲整体改为相对定位，左边距为0*/
ul.b3-list.b3-list--background {
	position:relative;
	padding-left: 0px !important;
}
/*一级标题一级包含下级标题的ul的边距设置,ul左边距作为层级线位置*/
ul.b3-list.b3-list--background>li {
	position:relative;
	margin-left: 0px;
}
ul.b3-list.b3-list--background>ul {
	position:relative;
	margin-left: 12px;
}
/*设置一级以下标题的边距*/
ul.b3-list.b3-list--background ul li {
	position:relative;
	margin-left: 18px;
}
ul.b3-list.b3-list--background ul ul {
	position:relative;
	margin-left: 20px;
}
/*相对定位模式下，清楚折叠三角左边距，避免缩进累积*/
.b3-list-item.b3-list-item--hide-action {padding-left:0px !important;}
/*ul左边框作为层级线，自动显示隐藏*/
ul.b3-list.b3-list--background:hover ul:before {
	content: "";
    position: absolute;
    height: 100%;
    width: 1px;
    background-color: var(--custom-font-color-ui);
    top: 0;
	left: 2px;
	transition:all 0.5s ease-in-out;
}
/*大纲缩进线结束*/
/*---------------------------------------------------*/
Gr6011010352
赣州
回帖
14
 帖子
9
 积分
425

近期热议

推荐标签 标签

  • 机器学习

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

    83 引用 • 37 回帖
  • sts
    2 引用 • 2 回帖 • 197 关注
  • Kafka

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

    36 引用 • 35 回帖
  • Sym

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

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

    524 引用 • 4601 回帖 • 699 关注
  • Elasticsearch

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

    117 引用 • 99 回帖 • 209 关注
  • Telegram

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

    5 引用 • 35 回帖
  • 新人

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

    52 引用 • 228 回帖
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 104 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机，如：iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖
  • 职场

    找到自己的位置，萌新烦恼少。

    127 引用 • 1706 回帖
  • App

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

    91 引用 • 384 回帖 • 1 关注
  • Chrome

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

    62 引用 • 289 回帖
  • SQLServer

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

    21 引用 • 31 回帖 • 2 关注
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 159 关注
  • Sillot

    Insights（注意当前设置 master 为默认分支）

    汐洛彖夲肜矩阵（Sillot T☳Converbenk Matrix），致力于服务智慧新彖乄，具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架（Sillot-Gibbet）基于自思源笔记（siyuan-note），前身是思源笔记汐洛版（更早是思源笔记汐洛分支），是智慧新录乄终端（多端融合，移动端优先）。

    主仓库地址：Hi-Windom/Sillot

    文档地址：sillot.db.sc.cn

    注意事项：

    1. ⚠️ 汐洛仍在早期开发阶段，尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计，使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记，开发者尽最大努力与思源笔记保持兼容，但无法实现 100% 兼容
    29 引用 • 25 回帖 • 86 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 9 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 27 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 3 关注
  • Unity

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

    25 引用 • 7 回帖 • 158 关注
  • golang

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

    497 引用 • 1388 回帖 • 277 关注
  • RESTful

    一种软件架构设计风格而不是标准，提供了一组设计原则和约束条件，主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

    30 引用 • 114 回帖 • 3 关注
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 49 关注
  • SMTP

    SMTP（Simple Mail Transfer Protocol）即简单邮件传输协议，它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 623 关注
  • JRebel

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

    26 引用 • 78 回帖 • 672 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言，在 20 世纪 90 年代中期由日本的松本行弘（まつもとゆきひろ/Yukihiro Matsumoto）设计并开发。在 Ruby 社区，松本也被称为马茨（Matz）。

    7 引用 • 31 回帖 • 216 关注
  • 自由行
    • 4 关注

最新标签