[js] 默认大纲输入模式,一个代码片段值 6 块钱吗?附文档树、大纲目录、标签书签等过滤器更新,文档树一键展开,双击折叠标题和列表

  • 文档树、大纲目录、标签书签、反链等面板简单过滤器

    • 原贴地址:[js] 各种小界面的过滤器,更多功能等接力 - 链滴

    • 更新:

      • // add filters for all各种过滤器 - 优化版 V1.0
        // 原作者版本: https://ld246.com/article/1736828257787
        // chuchen接力版:增加按钮循环控制,css优化,支持拼音模糊搜索:首字母或全拼
        // V0.2:支持混合逻辑语法:'空格 '分割关键词(AND逻辑),'竖线|'分割关键词(OR逻辑),'英文感叹号!'开头的关键词(NOT逻辑),暂不支持转义
        // V0.3:支持关键词高亮,支持Achuan大佬的最新的脚注面板https://ld246.com/article/1752516343833
        // V0.4:支持按钮隐藏,在任意reset按钮连续右键3次恢复
        // V0.5:支持移动端面板过滤器,MOBILE_ENABLED开关
        // V0.6: 性能优化、模块化架构重构、添加LRU缓存机制管理优化、支持单个字全拼高亮、支持多音字识别和搜索、预加载拼音库
        // V0.7: 优化文档树过滤体验,紧凑布局,扁平化样式
        // V0.8:针对文档树过滤器进行超性能优化,预构建DOM映射,批量拼音转换,动态批次大小,智能调度策略
        // V0.9:集成展开文档树功能,支持一键展开、折叠按钮递归深度控制、笔记本右键菜单展开、移动端长按展开
        // V1.0:DOM查询缓存,批量事件委托 ,CSS选择器合并
        
    • 特别提醒,建议把拼音库提前下载到本地,放到自己喜欢的路径,像我那样设定即可。'/plugins/myFonts/pinyin-pro.min.js',

    • 重构,新的增强:

      • 限于当前过滤的规则仅处理面板出现的内容,所以查找文档名需要先全部展开笔记本——特此增加一键展开所有笔记本的按钮,也可以右击指定的笔记本(移动端为长按)。
      • 一键按钮需要等待上次展开动作完成,可能出现页面字体重叠,需要手动刷新索引(选不限的情况则每次都自动刷新),可根据自己的笔记本情况调整每次展开的策略——策略同时绑定到每个文档树折叠按钮。
      • 展开过程中可通过点击笔记本,则折叠自动中断动作。
      • 1image.png
      • 2image.png
    • 分享地址:思源笔记代码片段/Chuchen_各种过滤器_优化版.js · chuchen0719/思源笔记-代码片段分享 - 码云 - 开源中国

    (屎山代码太长了~发不出来)

  • 默认大纲输入模式【¥6】??

    • 前情

      • 很多人提到思源笔记,会把它归类“文档型笔记”,以区分于“大纲型笔记”。
        当然思源用户也知道,横竖都兼容,就敲多个- 的事情。
      • 总有些别的笔记难民在纠结思源用大纲的会不会碍手,确实我也是从大纲类型笔记主力转移过来的,因为我更偏好于大纲笔记的记录方式,更容易激发“结构化思考”。
      • 在对思源用多了之后,发现还是有些操作空间的,特别是最近 2 个月发现代码片段就足以实现。
    • 路径

      • 首先,我能看到的差别在哪?

        1. 首先是要省掉手打前缀符的功夫,光标所在自动转换为列表就好了。
        2. 其次是要方便缩进缩出,这是大纲笔记的精神,而思源节点是嵌套结构。
        3. 列表块不同类型的兼容?有序列表,任务列表与无序列表在同一个列表块要注意什么?
        4. 列表与标题的真“大纲”之争?虽然两者在思源不冲突,但如何实现在用列表的时候能体现纲领。
        5. 如果都是列表块(容器块),以后可以支持更有趣的查询?
      • 那现在这个代码就是用些很简单粗暴的方式实现了前三点。至于流畅度,这个很主观,我只能说我能接受。

    • 现有的功能演示:

      1. 自动转换块,以面包屑按钮为准,默认是自动激活,但前提是需要先(点击)激活编辑区,按钮快捷键默认是 Alt+I(可修改),轮流切换可开关。

      2. 单个块按 tab 合并

        1. 如果前一个块是列表块,会合并为一个容器块。
        2. 如果前一个块是段落块,会把这个段落块转换为列表块再合并为一个容器块。
        3. 如果涉及有序列表和任务列表,会出现额外的处理。
      3. 多选按 tab

        1. 除特定的块(比如分隔线、嵌入块)外, 段落块(含图片块)、列表块、标题块、超级块、引述块、代码块、公式块、表格块等都可以一起合并到同一个列表块。
      4. 切换类型

        1. 默认快捷键是 Alt+K,轮流切换整个列表块的类型,如果不需要那么统一,建议在下一个节点转换好再合并。
        2. 移动端是长按列表项时候出现的菜单,对了前面功能(除了多选 tab)在移动端都是支持的。
        3. 在超级块里面的列表块做了特别的支持。
      5. shift+tab

        1. 如果已转换的块不想用列表想用默认的怎么办?

          1. 如果是刚转换完的用 ctrl+z,如果不是之前转换的用 shift+tab。
        2. 转换为段落块时对原容器块的属性进行了一定程度的保留(转移)——这个在原生是不考虑的,确实也太细了。

    • PixPin20250823165424.webp

    • PixPin20250823222132.webp

    • 已知的问题和不足:

      1. 几乎所有的操作都可以撤回,用 W 佬方法实现的,但是说好了——撤回了之后不能再恢复重做。
      2. 在移动端转换、合并等动作后光标经常会丢失,但是可以通过分屏解决,这个问题想过很多思路,但是没完美解决。在手机的浏览器测试却是正常的,很奇怪。
      3. 转换合并过程中可能会导致块的原有 updatetime 或者引用那些丢失,这个已经尽量避免。
    • 辅助的代码:

      1. 双击列表项或标题自动折叠.js

        1. 分享地址:思源笔记代码片段/Chuchen_双击折叠标题或列表.js · chuchen0719/思源笔记-代码片段分享 - 码云 - 开源中国
        2. 支持移动端
      2. 调整移动端的工具条.css——已集成,看视频

      3. 留给后面的彩蛋~

    • 写在后面:

      • 可能这是社区第一次有人在卖代码片段的?哈哈,
      • 其实我也愿意分享,也内心感激几乎都是为爱发电的插件 up,细说起来代码都是在前人的分享基础上修修补补的功能,如果哪些对我帮助过的大佬感兴趣,或愿意帮忙看看哪里写的不好,我也乐意提供。
        但不妨碍我想看看这些代码有没有几块钱的价值,看看这种需求是否小众,看看这些功能是否有意义?
      • 我是 JS 初学者,基本也是靠 AI 去实现这个功能的,考虑到估计后面 AI 方面的付费少不了,我需要真金白银的支持去支撑更多的构思的实现。
      • 连几块钱都要?是的,对我来说,这是有价值的。
      • 我相信换了别人这样的功能肯定也不难搓出来的,对于有需求的人,相比去花到买 token 的钱,或许这个更省?

  • 思源笔记

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

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

    28446 引用 • 119789 回帖
  • 代码片段

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

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

    285 引用 • 1988 回帖
3 操作
chuchen 在 2025-08-28 06:30:24 更新了该帖
chuchen 在 2025-08-28 06:22:47 更新了该帖
chuchen 在 2025-08-28 06:21:37 更新了该帖

相关帖子

欢迎来到这里!

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

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

    可以做成插件付费 你这样太原始了 😂

    1 回复
  • chuchen
    作者

    trollface 其实我有个自用插件版本,理论上插件性能会更好,但感觉没差别 但是代码片段的可读性更强~

    我其实不看好插件付费~

  • wzl199

    大佬,可以发一下或卖一下您的大纲代码片段吗?

    1 回复
  • chuchen
    作者

    哈哈哈,真的有人感兴趣吗~(惊

    我当然希望是有偿的呢,不过确实我也看出来了,价值很有限……

  • 365

    思源笔记的帖子是一周内有人回复会短暂置顶,按照这个吊规则,有以下玩法:
    把大功能,拆成一个一个小功能,每次单独发一个贴

    自己回帖顶自己

    这样可长期获得流量,W 就是这么玩的trollface

    或者像 a-chuan 那样,小红书 B 站都开号,他之前在红书有晒思源的打赏单,金额还可以

    1 回复
  • chuchen
    作者

    哈哈,谢谢,

    那些大佬们 付出了挺多,那是他们应得的。

    我 其实不是刻意在兜售,单纯是看一下 在社区里面 有几个人对这方面是有兴趣的。

    因为我是 计划 多利用思源的列表 方面的功能,我后续还有 计划去 拓展一些用法,但看下来,真正对 大纲笔记方面的用法 感兴趣的人 并不多,也可能是目前的功能 还很简单。

  • 365 1 评论

    仔细看了下,我觉得你的代码,在手机端的优势是挺大的!

    但根据我长期水论坛的经验看,大部分人手机端只是当个备份或者查看用,主要是电脑去编辑

    比如:你的代码双击折叠展开,在手机端很好用,电脑端相对优势并不大了;

    像你的其他代码也是如此,感觉侧重点在手机端,电脑端的话,默认操作也可以完成同样的事情


    看你想怎么整,如果以自用为主、分享为辅偶尔赚个小钱,侧重点还在于自己的需求;

    若是以用户的体验为主,或许侧重点应该放在电脑端,策划下电脑端可能缺啥,可能受众面更广些。

    tnnd,啰嗦的老毛病又犯了trollface

    1 回复
    具体点说呢,电脑端到底缺啥,我也不太清楚。我自己是用大纲标题的多,辅以列表,也算是用习惯了,暂时没感觉有什么明显的、让人感觉操作不舒服的地方。当然,如果后续有痛点,可能我会发个帖子再说说,暂时还木有。
    365
  • chuchen
    作者

    哈哈 谢谢你体贴的啰嗦,其实我主要场景都在 pc 端的,手机目前用的主要是写些临时灵感,用的番茄工具箱那个记事,对我来说够用。

    我目前分享出来的 js 代码不到 5 个?——过滤器(集成了文档树展开)、loadsnippets、双击折叠、还有凌晨发的代码块优化,其实 都是取之论坛 还以论坛的,并且都是先优化 pc 端(也不一定是优化,更多是符合自己需求),甚至很多功能都是坛友先提出了需求,我看还没完善就补充下的,最后顺便支持下移动端,所以我也不算不上侧重移动端,

    更多是因为在学习在练手,我还多多少少改动了从论坛拿到的其他代码,好像也不见得欢迎所以没发出。

    实际上我自认为是细节都打磨过的,起码是符合我自己口味的,

    为什么提出这个默认大纲模式的需要收费呢?

    首先我花了很多时间和头发,去打磨其中的细节以兼容思源的逻辑,图这几块钱?没任何性价比可言,

    其次我也想知道有多少人有这个需求(可能从大纲笔记转到这里的人也不见得会关注这个论坛,或者都接受了思源的模式)——当然发个投票可能也能统计,但愿意付费这件事的意义是不一样的,所以我没直接放出来。

    在我大多数笔记都用列表的场景下,我后续肯定还有新的需求出现,构思了一些,但最近发现还是需要多接触别的软件的体验,想象力还是有限,关键个人能力有限,捆绑愿景画饼也没必要。

    从一开始我就不看好有人愿意为此付费,实际也是这样,若你问我现在有没有哪个痛点别人解决了对应怎样的一个付费方案,好像也没有概念……看到很多大佬都开源插件,全是为爱发电吧,

    那我就自得其乐就好~

请输入回帖内容 ...

推荐标签 标签

  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 686 关注
  • Sillot

    Insights(注意当前设置 master 为默认分支)

    汐洛彖夲肜矩阵(Sillot T☳Converbenk Matrix),致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架(Sillot-Gibbet)基于自思源笔记(siyuan-note),前身是思源笔记汐洛版(更早是思源笔记汐洛分支),是智慧新录乄终端(多端融合,移动端优先)。

    主仓库地址:Hi-Windom/Sillot

    文档地址:sillot.db.sc.cn

    注意事项:

    1. ⚠️ 汐洛仍在早期开发阶段,尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计,使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记,开发者尽最大努力与思源笔记保持兼容,但无法实现 100% 兼容
    29 引用 • 25 回帖 • 152 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    502 引用 • 1397 回帖 • 241 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 74 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    11 引用 • 15 回帖
  • 996
    13 引用 • 200 回帖 • 6 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    4 引用 • 16 回帖 • 200 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    78 引用 • 37 回帖
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    85 引用 • 324 回帖
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    337 引用 • 324 回帖 • 4 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 799 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1062 引用 • 3456 回帖 • 124 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 1 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 350 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    60 引用 • 22 回帖 • 2 关注
  • OnlyOffice
    4 引用 • 41 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖 • 1 关注
  • 大疆创新

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

    2 引用 • 14 回帖
  • 房星科技

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

    6 引用 • 141 回帖 • 623 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 1 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 72 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 234 回帖 • 1 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 694 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4602 回帖 • 731 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    9 引用 • 75 回帖
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 51 关注