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

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

效果图示如下:

16341804111.jpg

  • 思源笔记

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

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

    18683 引用 • 69711 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • abbj 4 评论

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

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

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

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

    1 回复

推荐标签 标签

  • TensorFlow

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

    20 引用 • 19 回帖 • 2 关注
  • PWA

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

    14 引用 • 69 回帖 • 133 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    138 引用 • 268 回帖 • 197 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 247 回帖 • 176 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • Kafka

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

    35 引用 • 35 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    198 引用 • 120 回帖 • 1 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 21 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 427 关注
  • Spark

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

    74 引用 • 46 回帖 • 549 关注
  • 博客

    记录并分享人生的经历。

    270 引用 • 2386 回帖
  • 自由行
  • 电影

    这是一个不能说的秘密。

    120 引用 • 597 回帖 • 2 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 291 关注
  • Chrome

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

    60 引用 • 287 回帖
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖
  • 锤子科技

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

    4 引用 • 31 回帖 • 11 关注
  • CSS

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

    180 引用 • 447 回帖
  • 架构

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

    140 引用 • 441 回帖
  • AngularJS

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

    12 引用 • 50 回帖 • 424 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    536 引用 • 672 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 430 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    675 引用 • 535 回帖
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 3 关注
  • C++

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

    106 引用 • 152 回帖 • 1 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    172 引用 • 990 回帖
  • 反馈

    Communication channel for makers and users.

    123 引用 • 906 回帖 • 193 关注