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

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

效果图示如下:

16341804111.jpg

  • 思源笔记

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

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

    22340 引用 • 89396 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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 回复

推荐标签 标签

  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 477 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    325 引用 • 1395 回帖
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 625 关注
  • Lute

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

    25 引用 • 191 回帖 • 16 关注
  • 心情

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

    59 引用 • 369 回帖
  • SVN

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

    29 引用 • 98 回帖 • 680 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 431 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    125 引用 • 169 回帖 • 1 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 2 关注
  • 游戏

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

    176 引用 • 815 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 113 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖
  • Maven

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

    186 引用 • 318 回帖 • 303 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 175 关注
  • 创业

    你比 99% 的人都优秀么?

    84 引用 • 1399 回帖
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    351 引用 • 1814 回帖
  • 程序员

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

    567 引用 • 3532 回帖
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    55 引用 • 85 回帖 • 2 关注
  • Node.js

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

    139 引用 • 269 回帖 • 43 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • Firefox

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

    8 引用 • 30 回帖 • 407 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 628 关注
  • 负能量

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

    88 引用 • 1235 回帖 • 411 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖
  • 深度学习

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

    53 引用 • 40 回帖 • 2 关注
  • 学习

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

    169 引用 • 506 回帖
  • WebClipper

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

    3 引用 • 9 回帖