思源笔记折腾记录 - 标题的连续编号

本贴最后更新于 873 天前,其中的信息可能已经事过境迁

啊 做这个的原因跟思源笔记折腾记录 - 任务列表的序号 - 链滴 (ld246.com)一样,还是为了绕开动态加载时的限制。

效果就像这样

image.png

image.png

首先我们需要获取全部的打开的文档,这里用面包屑来获取:

async function 生成标题序号() { let 文档面包屑数组 = document.querySelectorAll( ".protyle-breadcrumb__bar span:first-child[data-node-id]" ); 文档面包屑数组.forEach((文档面包屑元素) => { let 文档id = 文档面包屑元素.getAttribute("data-node-id"); 生成文档内标题序号(文档id); }); setTimeout(生成标题序号, 1000); }

然后我们通过文档的实际全篇内容,绕开动态加载来计算章节号。

先获取文档内容:

let 文档内容 = await noobApi.核心api.getDoc({ id: 文档id, size: 102400 }); let 临时元素 = document.createElement("div"); 临时元素.innerHTML = 文档内容.content;

这里把获取到的内容弄到一个临时元素里,方便直接用 css 选择器来鼓捣。

放心不渲染出来的话好像不怎么占用资源。

然后就是生成标题序号了:

let 标题元素数组 = 临时元素.querySelectorAll( '[data-type="NodeHeading"]:not( [data-type="NodeBlockQueryEmbed"] div)' ); let 计数器 = [0, 0, 0, 0, 0, 0]; let 上一个标题级别 = 1; for (let i = 0; i < 标题元素数组.length; ++i) { let 当前标题级别 = parseInt( 标题元素数组[i].getAttribute("data-subtype").replace("h", "") ); if (当前标题级别 <= 上一个标题级别) { for (let j = 0; j < 计数器.length; ++j) { if (j + 1 > 当前标题级别) { 计数器[j] = 0; } } } 计数器[当前标题级别 - 1] += 1; let 标题id = 标题元素数组[i].getAttribute("data-node-id"); 上一个标题级别 = 当前标题级别 + 0; } }

最后把这些东西都弄到文档里,就是完整的计数函数了:

async function 生成文档内标题序号(文档id) { let 文档内容 = await noobApi.核心api.getDoc({ id: 文档id, size: 102400 }); let 临时元素 = document.createElement("div"); 临时元素.innerHTML = 文档内容.content; let 标题元素数组 = 临时元素.querySelectorAll( '[data-type="NodeHeading"]:not( [data-type="NodeBlockQueryEmbed"] div)' ); let 计数器 = [0, 0, 0, 0, 0, 0]; let 上一个标题级别 = 1; for (let i = 0; i < 标题元素数组.length; ++i) { let 当前标题级别 = parseInt( 标题元素数组[i].getAttribute("data-subtype").replace("h", "") ); if (当前标题级别 <= 上一个标题级别) { for (let j = 0; j < 计数器.length; ++j) { if (j + 1 > 当前标题级别) { 计数器[j] = 0; } } } 计数器[当前标题级别 - 1] += 1; let 标题id = 标题元素数组[i].getAttribute("data-node-id"); document .querySelectorAll(`.protyle-wysiwyg div[data-node-id='${标题id}']`) .forEach((一级标题元素) => { 一级标题元素 .querySelector('[contenteditable="true"]') .setAttribute( "style", `--custom-index:"${序号设置.默认设置[当前标题级别 - 1]( 计数器[当前标题级别 - 1] )} "` ); }); document .querySelectorAll(`.sy__outline [data-node-id="${标题id}"]`) .forEach((大纲项目) => { 大纲项目.setAttribute( "style", `--custom-index:"${序号设置.默认设置[当前标题级别 - 1]( 计数器[当前标题级别 - 1] )} "` ); }); 上一个标题级别 = 当前标题级别 + 0; } }

还是一样的 不过这回我里面有一个地方因为不想文件太长用到了 noobApi,自己换成对应的接口调用应该就可以了。

let 文档内容 = await noobApi.核心api.getDoc({ id: 文档id, size: 102400 });

相当于:

let 响应 = await ( await fetch("/api/filetree/getDoc", { method: "post", body: JSON.stringify({ id: data.data[0].id, size: 102400, }), }) ).json(); let 父块内容 = 响应.data.content;

可以自己改一下嗷

其实任务列表序号可以改成用类似的方法生成,不过暂时懒得做了。

还有用属性设置序列样式,也暂时懒得做了。


链接:https://pan.baidu.com/s/12CKtZeJTBOF8vOxd4XooQA?pwd=rb3u
提取码:rb3u
--来自百度网盘超级会员 V5 的分享

整个代码片段的仓库在

leolee9086/snippets (github.com)

就是这样嗷

  • 思源笔记

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

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

    26451 引用 • 110009 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 对了 里面有个序号设置 每一个设置是一个数组 从第一项到第六项(我才不说 0 到 5)trollface 分别就是一到六级标题的计算方法,看得懂的话可以改成自己想要的样式。

  • yjmsiyuan

    先赞为敬!

    最好办法是:在顶栏设置按钮,对当前文档生效即可。

    看那位大侠去完善。

  • 看不懂,先收藏点赞为敬 ❤️

  • yinyon

    请问怎样调用呢?我是小白。。。。

推荐标签 标签

  • 旅游

    希望你我能在旅途中找到人生的下一站。

    100 引用 • 905 回帖 • 2 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    955 引用 • 944 回帖
  • 叶归
    14 引用 • 62 回帖 • 23 关注
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    948 引用 • 1460 回帖 • 1 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 397 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1708 回帖
  • 996
    13 引用 • 200 回帖 • 2 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    10184 引用 • 46272 回帖 • 65 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 2 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 180 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 496 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    43 引用 • 44 回帖 • 1 关注
  • 大疆创新

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

    2 引用 • 14 回帖
  • React

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

    192 引用 • 291 回帖 • 368 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    46 引用 • 114 回帖 • 166 关注
  • 快应用

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

    15 引用 • 127 回帖 • 1 关注
  • CloudFoundry

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

    4 引用 • 16 回帖 • 198 关注
  • 钉钉

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

    15 引用 • 67 回帖 • 262 关注
  • 宕机

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

    13 引用 • 82 回帖 • 77 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 180 关注
  • Follow
    4 引用 • 12 回帖 • 9 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 59 回帖 • 2 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 743 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 618 关注
  • 分享

    有什么新发现就分享给大家吧!

    248 引用 • 1794 回帖
  • Bootstrap

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

    18 引用 • 33 回帖 • 649 关注