登录 注册

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

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

效果图示如下：

16341804111.jpg

  • 思源笔记

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

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

    22020 引用 • 87823 回帖 • 3 关注
赣州 位置
4 回帖
2
419 67 36 141 4 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

近期热议

推荐标签 标签

  • IDEA

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

    180 引用 • 400 回帖 • 2 关注
  • 负能量

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

    88 引用 • 1235 回帖 • 408 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 84 关注
  • 脑图

    脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。

    25 引用 • 83 回帖
  • OpenStack

    OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 2 关注
  • 正则表达式

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

    31 引用 • 94 回帖
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 71 关注
  • Docker

    Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的操作系统上。容器完全使用沙箱机制，几乎没有性能开销，可以很容易地在机器和数据中心中运行。

    490 引用 • 916 回帖 • 1 关注
  • Scala

    Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 124 关注
  • FlowUs

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

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

    1 引用
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 663 关注
  • SMTP

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

    4 引用 • 18 回帖 • 612 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 733 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 387 关注
  • 禅道

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

    6 引用 • 15 回帖 • 127 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 47 关注
  • 架构

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

    142 引用 • 442 回帖
  • 资讯

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

    55 引用 • 85 回帖
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖 • 1 关注
  • 30Seconds

    📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。

    • 精选常见面试题，帮助您准备下一次面试
    • 精选常见交互，帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段，帮助你获取最佳实践
    • 精选常见代码集，帮助您提高打码效率
    • 整理前端界的最新资讯，邀您一同探索新世界
    488 引用 • 383 回帖 • 6 关注
  • 新人

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

    52 引用 • 228 回帖 • 1 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年，是中国的 IT 社区和服务平台，为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖 • 2 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 706 关注
  • Hexo

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

    21 引用 • 140 回帖 • 5 关注
  • RabbitMQ

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

    49 引用 • 60 回帖 • 366 关注
  • 七牛云

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

    26 引用 • 222 回帖 • 164 关注
  • Google

    Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖

最新标签