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

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

一级树和二级树,在没有某些特定 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:这三个设计,大大未来说不定某天可能也许就会加入到插件中,也有可能不会(因为真就我个人是这么要求的)

  • 思源笔记

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

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

    26397 引用 • 109772 回帖 • 2 关注
  • 代码片段

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

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

    204 引用 • 1481 回帖 • 2 关注

相关帖子

欢迎来到这里!

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

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

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

  • HugZephyr

    思路是个好思路, 点赞

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

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

    1 回复
  • Floria233 2 评论 via Android

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

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

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

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

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

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

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

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

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

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

推荐标签 标签

  • WebSocket

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

    48 引用 • 206 回帖 • 279 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    291 引用 • 4495 回帖 • 663 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 615 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 14 关注
  • MongoDB

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

    91 引用 • 59 回帖
  • Postman

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

    4 引用 • 3 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 2 关注
  • C++

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

    108 引用 • 153 回帖
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • 链书

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

    链书社

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

    14 引用 • 257 回帖 • 1 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 373 关注
  • 音乐

    你听到信仰的声音了么?

    62 引用 • 512 回帖 • 1 关注
  • Kubernetes

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

    118 引用 • 54 回帖 • 5 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 2 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    240 引用 • 224 回帖 • 1 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 39 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 313 关注
  • abitmean

    有点意思就行了

    36 关注
  • 创造

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

    186 引用 • 1021 回帖 • 1 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 409 关注
  • 倾城之链
    23 引用 • 66 回帖 • 167 关注
  • 小说

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

    32 引用 • 108 回帖 • 1 关注
  • 小薇

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

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

    35 引用 • 468 回帖 • 762 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    36 引用 • 200 回帖 • 39 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 184 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 562 关注