登录 注册

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

  • 思源笔记

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

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

    21204 引用 • 83564 回帖
2 操作
Floria233 在 2024-08-26 17:31:22 更新了该帖
Floria233 在 2024-08-26 15:41:28 更新了该帖
2 感谢
3 收藏
2 操作
14 回帖
4
3
257 229 26 2

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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 •
    付费者 作者

    哈哈哈，感谢。其实真学过一点点——大概是皮毛末端的程度。

    平时并不折腾，只有非常不能忍受的问题才会想要去解决——比如修改编辑器的字体 css，所以学的不成体系，基本只能照猫画虎的改。

    今天忽然想到彩虹目录，很大部分原因是在另一个帖子看到大大贴的图，一下子被提醒到了。😄

  • Zhangwuji • • 1 • 2 评论

    多彩文档树

    感谢，这个更漂亮啊 😍
    Floria233 •
    @Floria233 重复造轮子的过程，这个很早之前就有相关讨论了。你可以看看集市的 OneNote 主题和 blue-dog 主题，基本上都是应用这种多彩文档树效果的变形
    Zhangwuji •
  • EmberSky •
    付费者

    你竟然贴我的图, 哈哈哈 😂

    看了一下你的需求, 听起来好像是这样的

    1. 不同的文档有不同的颜色
    2. 固定的第一个子节点是一个颜色, 第二个子节点是一个颜色, 依次类推

    所以有个极其简陋的 css 方案

    效果如下

    image.png

    备注: 如果有更多的子文档, 需要自己增加代码

    div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(12) {background-color: var(--b3-font-background12);}

    /* 可修改 - 背景颜色 *//* 可修改 - 背景颜色 */
: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);
  --b3-tree-node-background-8: var(--b3-font-background8);
  --b3-tree-node-background-9: var(--b3-font-background9);
  --b3-tree-node-background-10: var(--b3-font-background10);
  --b3-tree-node-background-11: var(--b3-font-background11);
  --b3-tree-node-background-12: var(--b3-font-background12);
}



div.sy__file>div.fn__flex-1 ul:nth-of-type(1)>li {background-color: var(--b3-font-background1);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(2)>li {background-color: var(--b3-font-background2);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(3)>li {background-color: var(--b3-font-background3);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(4)>li {background-color: var(--b3-font-background4);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(5)>li {background-color: var(--b3-font-background5);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(6)>li {background-color: var(--b3-font-background6);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(7)>li {background-color: var(--b3-font-background7);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(8)>li {background-color: var(--b3-font-background8);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(9)>li {background-color: var(--b3-font-background9);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(10)>li {background-color: var(--b3-font-background10);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(11)>li {background-color: var(--b3-font-background11);}
div.sy__file>div.fn__flex-1 ul:nth-of-type(12)>li {background-color: var(--b3-font-background12);}

div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(1) {background-color: var(--b3-font-background1);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(2) {background-color: var(--b3-font-background2);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(3) {background-color: var(--b3-font-background3);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(4) {background-color: var(--b3-font-background4);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(5) {background-color: var(--b3-font-background5);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(6) {background-color: var(--b3-font-background6);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(7) {background-color: var(--b3-font-background7);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(8) {background-color: var(--b3-font-background8);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(9) {background-color: var(--b3-font-background9);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(10) {background-color: var(--b3-font-background10);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(11) {background-color: var(--b3-font-background11);}
div.sy__file>div.fn__flex-1 ul>ul li:nth-of-type(12) {background-color: var(--b3-font-background12);}

    不过话说, 我感觉你想要的这种效果很奇怪, 文档树加了颜色之后, 看起来非常非常乱, 就像这样, 不过每个人都有自己的习惯, 反正我是接受不了哈哈哈

    image.png

    1 回复
  • 查看全部回帖
Floria233
回帖
54
 帖子
16
 积分
354