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

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

啊 做这个的原因跟思源笔记折腾记录 - 任务列表的序号 - 链滴 (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)

就是这样嗷

  • 思源笔记

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

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

    23286 引用 • 93988 回帖 • 3 关注

相关帖子

欢迎来到这里!

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

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

  • yjmsiyuan

    先赞为敬!

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

    看那位大侠去完善。

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

  • yinyon

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

推荐标签 标签

  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 777 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    325 引用 • 1395 回帖
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 213 关注
  • 以太坊

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

    34 引用 • 367 回帖 • 2 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 640 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 6 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    6 引用 • 63 回帖 • 1 关注
  • Mobi.css

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

    1 引用 • 6 回帖 • 749 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    313 引用 • 547 回帖
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    210 引用 • 2036 回帖 • 2 关注
  • 音乐

    你听到信仰的声音了么?

    61 引用 • 511 回帖
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 653 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 718 关注
  • 996
    13 引用 • 200 回帖 • 12 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 464 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 1 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 532 关注
  • jsoup

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

    6 引用 • 1 回帖 • 486 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 533 关注
  • JVM

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

    180 引用 • 120 回帖
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 772 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    159 引用 • 3801 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    26 引用 • 196 回帖 • 15 关注