[js] 文档树文档置顶和设置颜色 [0.0.8 完美版]

功能

  1. 文档树中,选择文档或文件夹,右键置顶,即在父级文件夹中置顶选中的文档或文件夹。
  2. 文档树中,选择文档或文件夹,右键选择颜色,即为选中的文档或文件夹添加指定的颜色。
  3. 文档树中,右键菜单出现时,按住 shift(手机版长按置顶按钮),可以置顶到顶层(支持文档和文件夹)。
  4. 兼容 pc 版和手机版

注意:暂不支持笔记本的置顶和设置颜色。

最新版 0.0.8

  1. 增加记住顶层置顶文件夹展开状态;
  2. 修复文件夹置顶到顶层后定位不到问题;
  3. 增加置顶/取消置顶时自动定位到目标文档;
  4. 修复文档全部折叠后顶层置顶恢复后需要刷新才能显示的问题;
  5. 修复已取消的顶层置顶无法实时同步问题;
  6. 优化交互体验细节

效果

动画演示
r119.gif

pc 版
image.png

手机版
image.png

使用说明

参数说明

// 是否开启置顶功能,true 开启,false 不开启
const isEnableTopmost = true;

// 是否开启颜色功能,true 开启,false 不开启
const isEnableColor = true;

// 是否开启顶层置顶功能,true 开启,false 不开启
const isEnableTopmostLevel1 = true;

// 预设颜色列表,格式 {"主题":{"明暗风格":{"编码":{style:"颜色值", "description":"颜色描述"}}}},编码值必须唯一,编码修改则原来设置的颜色将失效
// "---1": {}, 代表分割线,后面的序号必须递增
// (切换主题或亮色暗色风格时自动会切换配色方案)
// 为了让目录树的颜色更突出,默认加了加粗显示(font-weight:bold 样式),如果你不需要去掉这个样式即可

let colors = { "default": { "light": { "now": { "style": "color:#1D4ED8;font-weight:bold;", "description": "NOW" }, ... }, "dark": { "now": { "style": "color:#42A5F5;font-weight:bold;", "description": "NOW" }, ... } } };

第一次运行后,会把该默认配置保存到 /data/storage/tree_colors_user_config.json 中,以后配置颜色只需要修改该文件即可,这样不受代码片段升级的影响。

也可以把 tree_colors_user_config.json 发出来与大家分享您的创意。

该配色灵感来自 @Floria233 大佬提供的配色方案,感谢 @Floria233 大佬!

see [js] 文档树文档置顶和设置颜色 [0.0.8 完美版] - Floria233 的回帖

存储文件及使用说明
  1. 修改/data/storage/tree_colors_user_config.json 文件即可修改默认配色方案(第一次运行后生成)
  2. 取消全部置顶只需删除/data/storage/tree_topmost.json 文件即可(第一次置顶时生成)
  3. 取消全部颜色只需删除/data/storage/tree_colors.json 文件即可(第一次设置颜色时生成)
  4. 取消全部顶层置顶只需删除/data/storage/tree_topmost_level1.json 文件即可(第一次设置顶层置顶时生成)
更新说明

0.0.4 版本及以前的用户升级,需要先备份好代码里的 colors 参数配置再升级。

0.0.5 及以后的用户升级,只需要备份好/data/storage/tree_colors_user_config.json 文件即可。

缘起

看到论坛小伙伴们和我都有置顶的需求,就实现了这个功能,顺便也把我想要的颜色配置也实现了。

起初本想用插件来着,后来鉴于能用就不折腾的思想,一切从简了。

分享您的配色方案

也可以把您的 tree_colors_user_config.json 配色方案贴出来与大家分享。

默认配色方案如下(切换主题或亮色暗色风格时自动会切换颜色方案)

亮色主题
image.png

image.png

image.png

暗色主题
image.png

image.png

image.png

多个风格主题,可在不同文件夹中使用不同风格样式。

旧版本(0.0.4 版)

与 0.0.5+ 的区别是不支持根据主题及明暗风格配置颜色方案。

代码

https://gitee.com/wish163/mysoft/blob/db03ef3d4206b5235ee7b85d2dd273f717b315d1/%E6%80%9D%E6%BA%90/%E7%BB%99%E6%96%87%E6%A1%A3%E6%A0%91%E6%96%87%E6%A1%A3%E6%B7%BB%E5%8A%A0%E9%A2%9C%E8%89%B2%E5%92%8C%E7%BD%AE%E9%A1%B6.js

效果

pc 版

image.png

手机版

image.png

参数说明
// 是否开启置顶功能,true开启,false不开启 const isEnableTopmost = true; // 是否开启颜色功能,true开启,false不开启 const isEnableColor = true; // 预设颜色列表,格式 {"编码":{style:"颜色值", "description":"颜色描述"}},编码值必须唯一 // 也可以把该配置贴出来与大家分享您的创意 //默认颜色组采用20种人类最易识别的颜色 see https://zhuanlan.zhihu.com/p/508870810 const colors = { "orangeRed": { style: "color:#e6194B", description: "橙红色" }, "green": { style: "color:#3cb44b", description: "绿色" }, "yellow": { style: "color:#ffe119", description: "黄色" }, ... }

鸣谢

再次感谢 @Floria233 大佬的配色灵感及提供这么多好的配色方案!

打赏作者

image.png

代码

👇 打赏后可见(为什么要打赏后可见?主要想通过这种方式统计使用人数及用户需求,以帮助作者分析哪些功能是用户最需要的)

打赏 30 积分后可见
30 积分 • 5 打赏
  • 思源笔记

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

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

    26149 引用 • 108624 回帖 • 1 关注
  • 代码片段

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

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

    193 引用 • 1376 回帖

相关帖子

优质回帖

欢迎来到这里!

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

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

    置顶,是在父级文件夹中(即同一文件夹内的文档之间)置顶,而不是跨层级置顶到第一级上。
    (最新版已支持!)

    2 操作
    wilsons 在 2025-04-08 21:39:34 更新了该回帖
    wilsons 在 2025-03-11 07:58:20 更新了该回帖
  • 其他回帖
  • Floria233 1 3 评论

    回答大大的建议,这里给出一份颜色方案(说是如此,其实也就是更改了下颜色定义而已,当然,这里是我的习惯,相较颜色颜值,个人认为颜色的意义更重要)

    红色 now (红色给人感觉最紧张,一旦标注为红色,从潜意识上将会催促人赶紧改变 or 消灭这个“红色”)
    黄色 重要 (黄色也会造成一定视觉刺激,但不具备红色的危险性,虽说如此,黄色标注也不该过多,否则就会失去焦点)
    绿色 完成(这个越多越好,很有成就感)
    蓝色 任务 TODO(比较冷静的颜色,用于规划 思考 任务 之类的较为耗费意志力的活动时,给人的心理压迫最小)
    紫色 特别(注意-其他,这个颜色在自然界中很少见,在各行各业的使用场景也比较少,一旦发生就是比较特别的东西)【我给的色彩方案改成了橙色,原因是,我个人感觉同色系的紫色和粉色很相近,容易混淆】
    灰色 pass (不是“delete”,而是更像 later 处理)
    粉色 喜欢 收藏(为什么会喜欢某个文档呢?哈哈,可能这个文档实际是自己的精华笔记之类的,这个按我的用法,一般也会标注较少,而是用爱心图标取代颜色)

    • 文档靠颜色赋予某种含义,在这个 JS 的使用场景下,最好避免使用多彩文档树,否则就无法发挥这个“颜色的定义功能”
    • 颜色也不宜过多,一来将会造成选择困难症,二来文档颜色过多过杂也失去筛选的标注意义,三来颜色越多,其对应的意义就越多,则越难记住
    • 给文档标注颜色,这个功能的本质就是“给某些文档定义属性”,“属性”作为架构底层的信息设计,应当越简单越容易被记住——
      举个例子,就好比读纸质书时用彩笔标注,如果拿一整盒水彩笔去画线,那满篇的花花绿绿基本上也没啥意义了。

    image.png

    知乎给的这份颜色表大致看起来就挺不错的,不用怎么改了,我主要是改了下“蓝色”数值,它原来的那份颜色太深不易读。

    "orangeRed": { style: "color:#e6194B", description: "NOW" },
    "yellow": { style: "color:#ffe119", description: "重要" },
    "teal": { style: "color:#469990", description: "完成" },
    "blueDark": { style: "color:#87CEEB", description: "TODO" },
    "gray": { style: "color:#778899", description: "PASS" },
    "pink": { style: "color:#fabed4", description: "喜欢" },
    "orange": { style: "color:#f58231", description: "特别" }

    image.png

    改了下“特别”的 css,变成这种渐变色

    1 回复
    1 操作
    Floria233 在 2025-03-08 20:25:10 更新了该回帖
    非常好,下个版本,默认按照你这个配色方案,另外菜单去掉加粗显示,让菜单和文档树的样式一致,所见即所得。另外,如果多彩文档树也可以通过给文字添加背景色和描边等加以区分。
    wilsons
    @wilsons 感谢大大认可,哈哈
    Floria233
    "blue-green": { style: "background: linear-gradient(45deg, #d4fc79 0%, #00ffd0 40%, #0050d4 70%, #000080 100%); -webkit-background-clip: text; background-clip: text; color: transparent;", description: "特别" } 忽然想到一个更花哨的(因为我本来不喜欢橙色),所以又将橙色的方案改成了渐变色——这个从视觉上绝对是非常特殊了,这个只放在这里,用于喜欢的小伙伴用于替代,效果是青柠色渐变,很亮眼,这里好像放不了图,不过很显眼
    Floria233 1 赞同
  • veryzhh 1

    在新工作空间中也试了一下,只装载了这个 JS,能复现这个问题,即:

    • 在文档树菜单中,连续右击文档时,第一次会出现置顶及调色选项,第二次及以后不出现。
    • 这个问题,只在连续右击文档时,才会出现;只要做过其他操作,就会正常显示。
    • 其实也不影响使用,毕竟这种连续右击的情况比较少。
    1 回复
  • wilsons

    没有问题,就这样设计的。

    优先级别是 用户配置 > 代码默认配置

    在用户配置和代码默认配置内 主题配置 > default 配置

    这里之所以叫优先级别,是不会消失,是同名会覆盖,不同名被合并。

    这种设计,主要为了以默认为蓝本,去扩展想要修改的配置,而不需要完全去重新设计。

    如果你的配置中的编码完全不同,又不希望默认配置被生效,就要删除默认配置了。


    我想了下,你说的有道理,既然第一次运行时已经把默认文件存储到配置文件了,而用户又去掉了默认配置,大概是不希望再用了。

    下个版本改进下,已有用户配置文件的情况下,代码里的默认配置就不再效了。
    (最新版已支持!)

    2 操作
    wilsons 在 2025-04-08 21:41:55 更新了该回帖
    wilsons 在 2025-03-12 09:01:00 更新了该回帖
  • 查看全部回帖
wilsons
正在努力开发 wilsons 工具箱中 🛠️ 目前已正式入驻爱发电啦!💖 想催更、提需求?欢迎访问 👉 https://afdian.com/a/wilsons