豪华炫酷光彩夺目的彩色层级大纲

直接上图,是不是很炫目

20220621172802.png 20220621172937.png

需求场景

该设计如此夸张地攫取注意力是因为我有十几个长文档标题太多,一个个折叠打开麻烦而且需要老翻大纲,很难看清 A 标题的同级标题和所属父标题。用颜色如此设计可以更轻松找到多个标题的上下级、同级标题以及我是第几层标题。我就用 PS 提个设想,非常感谢群友用代码帮我实现了!

图示是 zhang-light 主题默认的颜色,可以自己调色和加边或者弄圆角和弧线连接让它不那么显眼。

代码及作者

十分感谢 notion 主题作者和 zhang-light 主题作者完成代码!

/* 多彩层级大纲 */
/* 相关代码来自于dark+主题作者zuoqiu-yingyi和starDust主题作者,特别感谢notion主题作者Roy,灵感来源于"思源群友" */
div.sy__outline ul {
    background-color: var(--b3-font-background1);
}

div.sy__outline ul>ul {
    background-color: var(--b3-font-background2);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul {
    background-color: var(--b3-font-background3);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul {
    background-color: var(--b3-font-background4);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background5);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background6);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background7);
    margin-left: 10px;
}

div.sy__outline ul>ul>ul>ul>ul>ul {
    background-color: var(--b3-font-background8);
    margin-left: 10px;
}

我习惯的 margin-left 是 15px。直接塞代码进去标题左内边距会很夸张,用下面这个粗浅的代码覆盖一下比较好。 2022-7-1 更:用了会把文档树和反链的缩进也给宰了,等我问问大佬先

/* 覆盖掉夸张的标题左内边距 */别用!!!!!!
.b3-list-item__toggle {
    padding-left: 1px !important;
}

逛街突然发现 zhang-light 作者发帖了【CSS 片段】多彩大纲层级 - 链滴 (ld246.com),感谢~

结尾丢个何弹:不觉得这很酷吗?作为一名理工男我觉得这太酷了,很符合我对未来生活的想象。科技并带着趣味。

  • 主题
    30 引用 • 181 回帖
  • CSS

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

    171 引用 • 420 回帖 • 2 关注
  • 思源笔记

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

    融合块、大纲和双向链接,构建你永恒的数字花园。

    102 引用 • 1057 回帖
2 操作
p1120 在 2022-07-01 13:58:36 更新了该帖
p1120 在 2022-06-23 14:58:48 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 147 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    14 引用 • 67 回帖 • 446 关注
  • Postman

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

    4 引用 • 2 回帖 • 1 关注
  • 程序员

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

    498 引用 • 3597 回帖
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 462 关注
  • Redis

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

    263 引用 • 245 回帖 • 507 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    296 引用 • 539 回帖 • 348 关注
  • 安装

    你若安好,便是晴天。

    119 引用 • 1179 回帖 • 1 关注
  • gRpc
    9 引用 • 5 回帖 • 15 关注
  • Typecho

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

    11 引用 • 52 回帖 • 492 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 68 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 126 回帖
  • AngularJS

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

    12 引用 • 50 回帖 • 347 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    103 引用 • 297 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。目前全球有 28% 的网站使用 jQuery,是目前最受欢迎的 JavaScript 库。

    62 引用 • 134 回帖 • 773 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 581 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    118 引用 • 73 回帖 • 327 关注
  • CSDN

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

    14 引用 • 155 回帖
  • 安全

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

    167 引用 • 809 回帖 • 364 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 525 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 502 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 420 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 658 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    320 引用 • 309 回帖 • 347 关注
  • RabbitMQ

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

    49 引用 • 60 回帖 • 458 关注
  • Spark

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

    74 引用 • 46 回帖 • 560 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖