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

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

效果图示如下:

16341804111.jpg

  • 思源笔记

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

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

    18146 引用 • 66961 回帖

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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;
    }
    /*大纲缩进线结束*/
    /*---------------------------------------------------*/
    
    
  • abbj 4 评论

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

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

    1 回复

推荐标签 标签

  • OAuth

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

    36 引用 • 103 回帖 • 5 关注
  • 小说

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

    28 引用 • 108 回帖
  • C++

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

    106 引用 • 152 回帖 • 2 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 26 关注
  • WebSocket

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

    48 引用 • 206 回帖 • 408 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 2 关注
  • 小薇

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

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

    34 引用 • 467 回帖 • 688 关注
  • 大疆创新

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

    2 引用 • 14 回帖 • 2 关注
  • JetBrains

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

    18 引用 • 54 回帖 • 1 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    710 引用 • 1173 回帖 • 193 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 17 关注
  • Redis

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

    284 引用 • 247 回帖 • 211 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 60 回帖 • 467 关注
  • Ubuntu

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

    123 引用 • 168 回帖
  • MyBatis

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

    170 引用 • 414 回帖 • 430 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    25 引用 • 215 回帖 • 160 关注
  • gRpc
    10 引用 • 8 回帖 • 50 关注
  • 机器学习

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

    76 引用 • 37 回帖
  • Markdown

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

    163 引用 • 1446 回帖
  • Unity

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

    25 引用 • 7 回帖 • 249 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 2 关注
  • 创造

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

    171 引用 • 988 回帖
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 4 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖