登录 注册

about 文档树的彩虹目录

其实我眼红好久了，obsidian 的彩虹目录。

之前跟开发文档树的大大 @zxkmm 私聊了一下，大大似乎有做彩虹目录的意愿，只是不知道方案怎么定，所以来问问大家

目前在思源里只看到过这种 @EmberSky

颜值就是第一要素

@zxkmm 大大提醒了我一点，我看中它的最重要的缘故，很可能是因为它的颜值！！！

  • 当文档树特别长了之后，那个文档树点开就只是无聊寡淡的一个大方块，只有密密麻麻的文档标题映入眼帘，枯燥啊乏味
  • 本人不爱用 icon 图标区分层级，一来图标需要选，每次都选就挺麻烦，二来，原生图标不好看（我的审美），自己找的图标未必好看，page 和 file 有的有图标有的没图标，各种不协调，不好看
  • 彩虹目录可以有数种颜色轮换，至少文档树看起来活泼多了

关于层级展示

通过彩虹色分层，父级和子级可以清晰区分。

举个例子：

  • 父层 A-红色
    • A1-红
    • A2-红
    • A3-红
  • B-绿
    • B1-绿
    • B2-绿
  • C-蓝
    • C1-蓝
    • C2-蓝

trollface 这种彩虹色，在折叠状态下，可以用色块就直接区分各个父级 file。在展开状态下，每一个文件夹的父子层级也非常明显，通过同色系可以让人更专注某一个特定区域。

如果是 @zxkmm 大大提到的另一个方案，那么展示出来就会是以下效果。

  • A-红

    • A1-绿
    • A2-绿
    • A3-绿

  • B-红

    • B1-绿
    • B2-绿
    • B3-绿

  • C-红

折叠状态下，父层文件夹是同一种颜色，想象文档树的效果，就是一个大红块啊。

展开状态下，虽说也有一点区分效果，但相较 ob 的那种彩虹方案，还是有点逊色。

现在探讨的问题

设想的彩虹目录有以下几种方案：

1. folder+file，只有背景彩虹色

02ce33901c9400e4ae4a2426265effb4f8e45250.png

2. folder+file，只有字体彩虹色（我个人最倾向这种，颜色只是来分层）

1.jpg

3.folder+file，字体 + 背景，双重彩虹色

2.jpg

4. 字体 + 背景，只有 foloder 有颜色，file 没有颜色

Annotation20230208141154.png

（我认为倒是没有必要自定义 folder 或者 file 颜色——随便增加选项，说不定会弄成杀马特。就是像 obsidian 七种彩虹色轮换就足够了——简洁优雅）

so 如果有彩虹目录，大家倾向于哪个方案呢？

ps：话说思源有投票器吗？我隐约在哪里看见过，这种选项问题总感觉用投票器比较方便，只是我不会，会用的麻烦告诉一下

  • 思源笔记

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

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

    23020 引用 • 92599 回帖
2 操作
Floria233 在 2024-08-26 17:31:22 更新了该帖
Floria233 在 2024-08-26 15:41:28 更新了该帖
2 感谢
3 收藏
2 操作
14 回帖
4
3
322 253 61 1 1 6

相关帖子

14 回帖
about 文档树的彩虹目录

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • EmberSky •
    付费者

    我差不多是按照这个图做的, 有特殊需求, 可以自己微调一下

    个人看法: 如果不会代码, 可以自己简单学习一下, 这样以后如果遇见一些简单的需求都可以自行搞定, 把思源折腾成自己想要的模样, 不是很爽么

    image.png

    1 回复
  • 其他回帖
  • EmberSky • • 2
    付费者

    或者你要的是这种

    image.png

    颜色的问题, 就自己调吧, 众所周知, 开发没有审美, 何况我是个后台的的开发

    :root {
  /* 可修改 - 背景颜色 */
  --b3-tree-node-background-1: var(--b3-font-background1);
  --b3-tree-node-background-2: var(--b3-font-background2);
  --b3-tree-node-background-3: var(--b3-font-background3);
  --b3-tree-node-background-4: var(--b3-font-background4);
  --b3-tree-node-background-5: var(--b3-font-background5);
  --b3-tree-node-background-6: var(--b3-font-background6);
  --b3-tree-node-background-7: var(--b3-font-background7);
}


div.sy__file>div.fn__flex-1>ul:nth-of-type(1) {background-color: var(--b3-tree-node-background-1);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(2) {background-color: var(--b3-tree-node-background-2);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(3) {background-color: var(--b3-tree-node-background-3);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(4) {background-color: var(--b3-tree-node-background-4);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(5) {background-color: var(--b3-tree-node-background-5);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(6) {background-color: var(--b3-tree-node-background-6);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(7) {background-color: var(--b3-tree-node-background-7);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(8) {background-color: var(--b3-tree-node-background-1);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(9) {background-color: var(--b3-tree-node-background-2);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(10) {background-color: var(--b3-tree-node-background-3);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(11) {background-color: var(--b3-tree-node-background-4);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(12) {background-color: var(--b3-tree-node-background-5);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(13) {background-color: var(--b3-tree-node-background-6);}
div.sy__file>div.fn__flex-1>ul:nth-of-type(14) {background-color: var(--b3-tree-node-background-7);}
    1 引用
  • Floria233 •
    付费者 作者

    这个就是选项 1，fold+file，只有背景色

  • Silvester •

    感觉这个帖子第二个不错
    https://siyuannote.com/docs/article/1724424437

    image.png

    1 回复
    2 操作
    Silvester 在 2024-09-08 11:53:42 更新了该回帖
    Silvester 在 2024-08-27 18:07:01 更新了该回帖
  • 查看全部回帖
Floria233
回帖
120
 帖子
27
 积分
2232