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

  • 思源笔记

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

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

    21601 引用 • 85463 回帖 • 3 关注
  • 代码片段

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

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

    41 引用 • 219 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 👍 👍 非常棒的思路,左边全是文件夹,右边全是文档。
    再结合一个点击打开当前文档并展开子文档树功能。

  • EmberSky

    思路是个好思路, 点赞

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

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

    1 回复
  • Floria233 2 评论

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

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

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

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

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

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

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

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

推荐标签 标签

  • Sphinx

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

    1 引用 • 198 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 2 关注
  • 创造

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

    175 引用 • 994 回帖 • 1 关注
  • 小说

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

    28 引用 • 108 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    52 引用 • 37 回帖 • 1 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    150 引用 • 3775 回帖
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 141 关注
  • 倾城之链
    23 引用 • 66 回帖 • 138 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 54 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 652 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖
  • BAE

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

    19 引用 • 75 回帖 • 623 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 494 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 132 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    12 引用 • 101 回帖 • 1 关注
  • Kubernetes

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

    110 引用 • 54 回帖
  • Bootstrap

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

    18 引用 • 33 回帖 • 669 关注
  • 钉钉

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

    15 引用 • 67 回帖 • 343 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 621 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 622 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 19 关注
  • OnlyOffice
    4 引用 • 2 关注
  • 资讯

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

    55 引用 • 85 回帖 • 1 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖
  • Git

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

    207 引用 • 358 回帖 • 1 关注
  • 大疆创新

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

    2 引用 • 14 回帖 • 3 关注