[css] 关于二级文档树的某些定制设计

一级树和二级树,在没有某些特定 CSS 的加持下,这两个文档树的展示逻辑是会有些冲突的(这是我自己的使用体验,有些地方让我迷惑)。

我之前私下向大大请教时,大大帮忙给我写了几个 CSS,基本解决了我的问题。

我不清楚别人是否有类似的问题,也不清楚大大为什么没把这几个设计给集成到插件中——有可能真就只有我龟毛而已。

(没有去问,则是遵循“不该问的问题就别问”,我在这种奇怪的地方有点社恐啊哈哈哈)

第一个 CSS 隐藏二级文档树的文件夹 这个与二级文档树三灯泡之三联动使用

/* 隐藏二级文档列表含有子文档的文档 */ .misuzu2027__doc-list li[data-type="navigation-file"][data-count]:not([data-count="0"]){ display:none; }

第二个 CSS 隐藏一级文档树的单文档

.file-tree.sy__file li[data-type="navigation-file"][data-count][data-count="0"]{ display:none; }

第三个 CSS 二级文档树的文件夹用高亮 icon 标识

/* 含有子文档的 icon 背景 */ .misuzu2027__doc-list li[data-type="navigation-file"][data-count]:not([data-count="0"]) span:first-of-type{ background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); }

嗯,这三个 CSS 是参照我个人的使用习惯,请大大帮忙写的。

在这三个 CSS 的加持下,二级文档树和传统的印象笔记文档树就非常相似了(没有这三个的话,对我而言,目前思源一级文档树还是会产生不少干扰)

又又 ps:这三个设计,大大未来说不定某天可能也许就会加入到插件中,也有可能不会(因为真就我个人是这么要求的)

  • 思源笔记

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

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

    24920 引用 • 102634 回帖
  • 代码片段

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

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

    133 引用 • 900 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • zhunge 1 评论

    这 3 个 CSS 太好了,正需要!从为知笔记转过来,很喜欢文件夹的分类方式。大佬的二级文档树插件解决的大部分问题,加上这 3 个 CSS,几乎完美模仿了文件夹!期望以后能把这几个 CSS 加入插件中。感谢!

    不谢( ̄︶ ̄*))这个也是我请这个插件的开发者大大写的,话说根据这段时间的使用经验,这三个感觉不必同时开启,我目前最常用的就只是开启那个标志文件夹 icon 的 CSS——因为现在开发者大大已经给这个插件增加了拖动功能,之前没有,二级树里有文件夹感觉也没啥影响了
    Floria233
  • 其他回帖
  • Floria233 2 评论 via Android

    嗯,可能是我有点强迫症。

    二级文档树里还有 folder 的话,基本上针对这个 folder 的操作,不管是点击展开 or 选中弹出菜单等等,现在一二级树都能做,如果两个同时出现,每次估计我都得纠结一下在哪边树点击。

    我现在新建二级文档树子文档的方式是——

    1 新建平级子文档,就用二级树文档标题后面那个“➕”号,这是昨天才更新的功能(😂 我写完了才发现)

    2 新建子级子文档,就直接在打开的文档力量,用新建 Ctrl+n,再加上另外的 css 辅助,一级文档树不会展开天梯(我最烦这个东西)

    如果一个二级树还有多个子文件夹,树的长度会被拉长,而且这样布局和一级树的属性有重合之处。

    偶尔我也会在二级树开启文件夹,目前还没有重度使用,估计这个需求不大 😄

    1 操作
    Floria233 在 2024-10-15 11:44:08 更新了该回帖
    话说, 这个插件的作者在思源社区叫什么名字, 大佬效率好快
    EmberSky
    不知道啊,搜索没搜到过,我都是在 github 反馈的
    Floria233
  • EmberSky

    思路是个好思路, 点赞

    我选择思源有一个非常重要的原因就是, 思源可以在文件下创建文件, 是文件的同时也是文件夹
    我当初试了很多笔记软件, 大部分笔记都是:文件夹是文件夹, 文件是文件, 感觉楼主这个需求就是偏向于这种
    我尝试了楼主给的 css, 很别扭, 可能是个人习惯问题
    同时感觉如果这么用的话, 思源这个特性不能很好的体现

    以上纯属个人看法, 软件最重要的是自己用着舒服

    1 回复
  • wenbocn

    👍 👍 非常棒的思路,左边全是文件夹,右边全是文档。
    再结合一个点击打开当前文档并展开子文档树功能。

推荐标签 标签

  • Elasticsearch

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

    117 引用 • 99 回帖 • 207 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖 • 1 关注
  • Docker

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

    494 引用 • 928 回帖
  • Hibernate

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

    39 引用 • 103 回帖 • 719 关注
  • CodeMirror
    2 引用 • 17 回帖 • 157 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    116 引用 • 54 回帖 • 4 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    132 引用 • 796 回帖
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 821 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖 • 1 关注
  • 机器学习

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

    83 引用 • 37 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 1 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 433 关注
  • Typecho

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

    12 引用 • 67 回帖 • 447 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 384 关注
  • 以太坊

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

    34 引用 • 367 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖
  • 架构

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

    143 引用 • 442 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1742 回帖
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 76 回帖
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    78 引用 • 396 回帖
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    36 引用 • 155 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • Wide

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

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

    30 引用 • 218 回帖 • 644 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 547 关注
  • danl
    165 关注