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

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

效果图示如下:

16341804111.jpg

  • 思源笔记

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

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

    23025 引用 • 92621 回帖

相关帖子

欢迎来到这里!

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

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

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

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

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

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

    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;
    }
    /*大纲缩进线结束*/
    /*---------------------------------------------------*/
    
    
  • 这个暂时不添加,感谢反馈。

    1 回复

推荐标签 标签

  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 518 关注
  • danl
    146 关注
  • gRpc
    11 引用 • 9 回帖 • 69 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1348 回帖
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 106 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3454 回帖 • 189 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    90 引用 • 567 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 668 关注
  • 分享

    有什么新发现就分享给大家吧!

    248 引用 • 1795 回帖 • 1 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 1 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 747 关注
  • 禅道

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

    5 引用 • 15 回帖 • 101 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    343 引用 • 723 回帖
  • 大疆创新

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

    2 引用 • 14 回帖
  • 职场

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

    127 引用 • 1706 回帖
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 361 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 317 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖 • 2 关注
  • Elasticsearch

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

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

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

    170 引用 • 414 回帖 • 387 关注
  • Markdown

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

    167 引用 • 1520 回帖
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    409 引用 • 1246 回帖 • 587 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 1 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 17 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖 • 2 关注