From c202a012f965ae6b951a7a71b31305536f03ee9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=86=8A=E7=8C=AB=E5=88=AB=E7=86=AC=E5=A4=9C?= <84729049+PandaNocturne@users.noreply.github.com> Date: Thu, 22 Feb 2024 23:38:27 +0800 Subject: [PATCH 1/8] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E5=88=A9=E7=94=A8=20Canv?= =?UTF-8?q?as=20=E5=B9=B3=E9=93=BA=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...63\351\223\272\347\254\224\350\256\260.md" | 375 ++++++++++++++++++ 1 file changed, 375 insertions(+) create mode 100644 "10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" diff --git "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" new file mode 100644 index 000000000..3a136dcdb --- /dev/null +++ "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" @@ -0,0 +1,375 @@ +--- +uid: 20240222233410 +title: QuickAdd 脚本 - 利用 Canvas 平铺笔记 +tags: [Canvas, quickadd脚本] +description: 利用 Canvas 平铺笔记 +author: 熊猫别熬夜 +type: other +draft: false +editable: false +modified: 20240222233822 +--- + +# QuickAdd 脚本 - 利用 Canvas 平铺笔记 + +在 Obsidian 中文论坛看到这篇 [在Excalidraw中列出某笔记所有二级Heading - 经验分享 - Obsidian 中文论坛](https://forum-zh.obsidian.md/t/topic/30401) ，我就想用 Canvas 来平铺一下，这样笔记可以全局预览和编辑。 + +## Canvas 的标题引用格式 + +Canvas 是可以只显示文档的块和标题的，具体格式如下，标题是在 `subpath` 中且前面有个 `#` 号。 + +```json +{ + "nodes":[ + {"id":"d9f2b88a08cb0f1c","type":"file","file":"QuickDraft-20240221200235533.md","subpath":"#PkmerFAQ","x":-447,"y":-333,"width":960,"height":760}, + {"id":"6b050e9a6fa81b69","type":"file","file":"QuickDraft-20240221200235533.md","subpath":"#PkmerDocs","x":560,"y":-333,"width":960,"height":760}, + {"id":"454248a7b980b488","type":"file","file":"QuickDraft-20240221200235533.md","subpath":"#Fix","x":1580,"y":-333,"width":960,"height":760}, + {"id":"207cfe3dd7b01f03","type":"file","file":"QuickDraft-20240221200235533.md","subpath":"#Fix","x":-447,"y":500,"width":960,"height":760} + ], + "edges":[] +} +``` + +## 实现过程和效果 + +![2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-1](https://cdn.pkmer.cn/images/202402222335490.gif!pkmer) + +- 获取当前笔记路径 + - 提取所有标题 (可选范围，即标题参数)，暂定二级标题 +- 设定间距、宽度、高度参数 +- 循环排列即生成 JSON 数据 +- 生成 canvas 即可 + +我是固定一个 Canvas 用来编辑，我这边直接随便设置的一个 `未命名.canvas`，可以 2 种模式可以相互转换，转换的参数通过代码参数来调节。 + +### 可调整的参数 + +```js +// 大纲等级 +const level = 2; +// 卡片参数 +const width = 960; +const height = 760; +// 卡片间隔 +const space = 50; +// 每行卡片的数量限制 +const limit = 4; +// 基于库的相对路径的Canvas +const canvasPath = "未命名.canvas"; +``` + +## Quickadd 配置 Macro 代码 + +将下述脚本放在 Quickadd 的配置文件夹下，保存为 `convertMdToCanvas.js` 文件，在 Quickadd 插件设置添加 Macro 动作： + +![[2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-2.png]] + +在 Scripts 中选择对应的 `convertMdToCanvas` 脚本，点击添加即可： + +![2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-3](https://cdn.pkmer.cn/images/202402222335491.png!pkmer) + +### 脚本 + +```js +const path = require('path'); +const fs = require('fs'); +// 获取笔记的基本路径 +const file = app.workspace.getActiveFile(); +const fileFullPath = app.vault.adapter.getFullPath(file.path); + +// 可调节的参数 +// 大纲等级 +const level = 2; +// 卡片参数 +const width = 960; +const height = 760; +// 卡片间隔 +const space = 50; +// 每行卡片的数量限制 +const limit = 3; +// 基于库的相对路径的Canvas +const canvasPath = "未命名.canvas"; + +module.exports = async () => { + const canvasData = { + nodes: [], + edges: [] + }; + if (file.extension === 'md') { + console.log("开始获取二级标题"); + const heads = getHeadings(fileFullPath, level); + console.log(heads); + + let x = 0; + let y = 0; + let n = 1; + let nodes = []; + const length = heads.length; + + for (let i = 1; i <= length; i++) { + const node = { + id: "", + type: "file", + file: file.path, + subpath: "", + x: 0, + y: 0, + width: width, + height: height, + }; + + node.subpath = heads[i - 1]; + node.id = i; + node.x = x; + node.y = y; + console.log([heads[i - 1], x, y]); + + x += width + space; + if (i >= limit * n) { + y += height + space; + x = 0; + n = n + 1; + } + console.log([heads[i - 1], node.x, y]); + + nodes.push(node); + } + canvasData.nodes = nodes; + console.log(canvasData); + const canvasFile = app.vault.getAbstractFileByPath(canvasPath); + const canvasJson = JSON.stringify(canvasData, null, 2); + if (canvasFile) { + app.vault.modify(canvasFile, canvasJson); + } else { + file = await app.vault.create(kanbanFilePath, canvasJson); + } + app.workspace.activeLeaf.openFile(canvasFile); + + } else if (file.extension === 'canvas') { + fs.readFile(fileFullPath, 'utf8', (err, data) => { + if (err) throw err; + const canvasData = JSON.parse(data); + // 获取nodes中的object.file + canvasData.nodes; + const mdFilePath = canvasData.nodes[0].file; + app.workspace.activeLeaf.openFile(app.vault.getAbstractFileByPath(mdFilePath)); + }); + + } + +}; + + +function getHeadings(fileFullPath, level) { + // 读取文件内容 + const fileContent = fs.readFileSync(fileFullPath, 'utf-8'); + + // 使用正则表达式提取指定级别的标题 + const regex = new RegExp(`^#{2,${level}}\\s(.+)`, 'gm'); + const matches = []; + let match; + + while ((match = regex.exec(fileContent)) !== null) { + matches.push("#" + match[1]); + } + return matches; +} +``` + +## 配合 Modal Form 插件来调节参数 + +![2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-4](https://cdn.pkmer.cn/images/202402222335492.png!pkmer) + +> 配合 ModalForm 插件写了个表单，可以设置参数，不过体验下来，还不如提前把参数设置好一键切换来的方便，还不需要额外安装插件。 + +### 脚本 + +配置同上述一样，不过需要安装 Modal Form 插件 + +```js + +// 基于库的相对路径的Canvas +const canvasPath = "未命名.canvas"; + +const path = require('path'); +const fs = require('fs'); +const modalForm = app.plugins.plugins.modalforms.api; +// 获取笔记的基本路径 +const file = app.workspace.getActiveFile(); +const fileFullPath = app.vault.adapter.getFullPath(file.path); + + +module.exports = async () => { + + const editorForm1 = { + "title": "ConvertMdToCanvas", + "name": "ConvertMdToCanvas", + "fields": [ + { + "name": "level", + "label": "level", + "description": "提取至第几级标题，忽略一级标题", + "input": { + "type": "slider", + "min": 2, + "max": 6 + } + }, + { + "name": "width", + "label": "Width", + "description": "卡片宽度", + "isRequired": true, + "input": { + "type": "number" + } + }, + { + "name": "height", + "label": "height", + "description": "卡片高度", + "isRequired": true, + "input": { + "type": "number" + } + }, + { + "name": "space", + "label": "space", + "description": "卡片间距", + "isRequired": true, + "input": { + "type": "number" + } + }, + { + "name": "limit", + "label": "limit", + "description": "每行卡片的数量限制", + "input": { + "type": "slider", + "min": 1, + "max": 10 + } + }, + ] + }; + const canvasData = { + nodes: [], + edges: [] + }; + if (file.extension === 'md') { + // 设定默认值 + let result = await modalForm.openForm( + editorForm1, + { + values: { + level: 2, + width: 960, + height: 760, + limit: 4, + space: 50, + } + } + ); + + + // 大纲等级 + const level = result.getValue('level').value; + // 卡片参数 + const width = result.getValue('width').value; + const height = result.getValue('height').value; + // 卡片间隔 + const space = result.getValue('space').value; + // 每行卡片的数量限制 + const limit = result.getValue('limit').value; + + console.log("开始获取二级标题"); + const heads = getHeadings(fileFullPath, level); + console.log(heads); + + let x = 0; + let y = 0; + let n = 1; + let nodes = []; + const length = heads.length; + + for (let i = 1; i <= length; i++) { + const node = { + id: "", + type: "file", + file: file.path, + subpath: "", + x: 0, + y: 0, + width: width, + height: height, + }; + + node.subpath = heads[i - 1]; + node.id = i; + node.x = x; + node.y = y; + console.log([heads[i - 1], x, y]); + + x += width + space; + if (i >= limit * n) { + y += height + space; + x = 0; + n = n + 1; + } + console.log([heads[i - 1], node.x, y]); + + nodes.push(node); + } + canvasData.nodes = nodes; + console.log(canvasData); + const canvasFile = app.vault.getAbstractFileByPath(canvasPath); + const canvasJson = JSON.stringify(canvasData, null, 2); + if (canvasFile) { + app.vault.modify(canvasFile, canvasJson); + } else { + file = await app.vault.create(kanbanFilePath, canvasJson); + } + app.workspace.activeLeaf.openFile(canvasFile); + + } else if (file.extension === 'canvas') { + fs.readFile(fileFullPath, 'utf8', (err, data) => { + if (err) throw err; + const canvasData = JSON.parse(data); + // 获取nodes中的object.file + canvasData.nodes; + const mdFilePath = canvasData.nodes[0].file; + app.workspace.activeLeaf.openFile(app.vault.getAbstractFileByPath(mdFilePath)); + }); + + } + + +}; + +function getHeadings(fileFullPath, level) { + // 读取文件内容 + const fileContent = fs.readFileSync(fileFullPath, 'utf-8'); + + // 使用正则表达式提取指定级别的标题 + const regex = new RegExp(`^#{2,${level}}\\s(.+)`, 'gm'); + const matches = []; + let match; + + while ((match = regex.exec(fileContent)) !== null) { + matches.push("#" + match[1]); + } + return matches; +} +``` + +## 拓展想法 + +如果确定每个标题的格式 (如：草稿、提示、总结)，是否可以按照康奈尔笔记布局一样生成对应的 Canvas 来编辑： + +![2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-5](https://cdn.pkmer.cn/images/202402222335493.png!pkmer) + +## References + +- [在Excalidraw中列出某笔记所有二级Heading - 经验分享 - Obsidian 中文论坛](https://forum-zh.obsidian.md/t/topic/30401) From e267a0d6a318136e946049cc072fe024aa0245d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=86=8A=E7=8C=AB=E5=88=AB=E7=86=AC=E5=A4=9C?= <84729049+PandaNocturne@users.noreply.github.com> Date: Thu, 22 Feb 2024 23:40:21 +0800 Subject: [PATCH 2/8] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=85=B3=E8=81=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Quickadd/quickadd.md" | 1 + 1 file changed, 1 insertion(+) diff --git "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/quickadd.md" "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/quickadd.md" index 42d98beed..91da4529f 100644 --- "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/quickadd.md" +++ "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/quickadd.md" @@ -27,6 +27,7 @@ modified: 20240111113104 - [[Quickadd脚本-一键在系统应用中打开图片编辑]] - [[QuickAdd脚本-插入Zotero的条目PDF链接]] - [[QuickAdd脚本-修复Canvas中的失效文档的链接]] +- [[QuickAdd脚本-利用Canvas平铺笔记]] - [[copy-selection-in-canvas]] ## 参考资料 From 3ad89c6e9536d469a346f26d167af2a4a930cae0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=86=8A=E7=8C=AB=E5=88=AB=E7=86=AC=E5=A4=9C?= <84729049+PandaNocturne@users.noreply.github.com> Date: Fri, 23 Feb 2024 00:29:17 +0800 Subject: [PATCH 3/8] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=94=99=E8=AF=AF?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" index 3a136dcdb..30091582a 100644 --- "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" +++ "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" @@ -141,7 +141,7 @@ module.exports = async () => { if (canvasFile) { app.vault.modify(canvasFile, canvasJson); } else { - file = await app.vault.create(kanbanFilePath, canvasJson); + file = await app.vault.create(canvasFile, canvasJson); } app.workspace.activeLeaf.openFile(canvasFile); @@ -329,7 +329,7 @@ module.exports = async () => { if (canvasFile) { app.vault.modify(canvasFile, canvasJson); } else { - file = await app.vault.create(kanbanFilePath, canvasJson); + file = await app.vault.create(canvasFile, canvasJson); } app.workspace.activeLeaf.openFile(canvasFile); From da0e4dff4e09ecec23af2c0afbb7a96a107dec6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=86=8A=E7=8C=AB=E5=88=AB=E7=86=AC=E5=A4=9C?= <84729049+PandaNocturne@users.noreply.github.com> Date: Fri, 23 Feb 2024 00:36:14 +0800 Subject: [PATCH 4/8] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dbug2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...nvas\345\271\263\351\223\272\347\254\224\350\256\260.md" | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" index 30091582a..063f18054 100644 --- "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" +++ "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" @@ -141,7 +141,8 @@ module.exports = async () => { if (canvasFile) { app.vault.modify(canvasFile, canvasJson); } else { - file = await app.vault.create(canvasFile, canvasJson); +            file = await app.vault.create(canvasPath, canvasJson); +            canvasFile = app.vault.getAbstractFileByPath(canvasPath); } app.workspace.activeLeaf.openFile(canvasFile); @@ -329,7 +330,8 @@ module.exports = async () => { if (canvasFile) { app.vault.modify(canvasFile, canvasJson); } else { - file = await app.vault.create(canvasFile, canvasJson); +            file = await app.vault.create(canvasPath, canvasJson); +            canvasFile = app.vault.getAbstractFileByPath(canvasPath); } app.workspace.activeLeaf.openFile(canvasFile); From e657f863b18a829be6e33c57ca1434f91451704c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=86=8A=E7=8C=AB=E5=88=AB=E7=86=AC=E5=A4=9C?= <84729049+PandaNocturne@users.noreply.github.com> Date: Fri, 23 Feb 2024 09:47:37 +0800 Subject: [PATCH 5/8] =?UTF-8?q?=E6=B7=BB=E5=8A=A0Capture=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...63\351\223\272\347\254\224\350\256\260.md" | 51 +++++++++++++++---- 1 file changed, 41 insertions(+), 10 deletions(-) diff --git "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" index 063f18054..e4f412cdf 100644 --- "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" +++ "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Quickadd/QuickAdd\350\204\232\346\234\254-\345\210\251\347\224\250Canvas\345\271\263\351\223\272\347\254\224\350\256\260.md" @@ -32,7 +32,7 @@ Canvas 是可以只显示文档的块和标题的，具体格式如下，标题 ## 实现过程和效果 -![2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-1](https://cdn.pkmer.cn/images/202402222335490.gif!pkmer) +![2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-1](https://cdn.pkmer.cn/images/202402230946313.gif!pkmer) - 获取当前笔记路径 - 提取所有标题 (可选范围，即标题参数)，暂定二级标题 @@ -62,11 +62,11 @@ const canvasPath = "未命名.canvas"; 将下述脚本放在 Quickadd 的配置文件夹下，保存为 `convertMdToCanvas.js` 文件，在 Quickadd 插件设置添加 Macro 动作： -![[2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-2.png]] +![2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-2](https://cdn.pkmer.cn/images/202402230946314.png!pkmer) 在 Scripts 中选择对应的 `convertMdToCanvas` 脚本，点击添加即可： -![2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-3](https://cdn.pkmer.cn/images/202402222335491.png!pkmer) +![2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-3](https://cdn.pkmer.cn/images/202402230946315.png!pkmer) ### 脚本 @@ -141,8 +141,7 @@ module.exports = async () => { if (canvasFile) { app.vault.modify(canvasFile, canvasJson); } else { -            file = await app.vault.create(canvasPath, canvasJson); -            canvasFile = app.vault.getAbstractFileByPath(canvasPath); + canvasFile = app.vault.create(canvasPath, canvasJson); } app.workspace.activeLeaf.openFile(canvasFile); @@ -179,7 +178,7 @@ function getHeadings(fileFullPath, level) { ## 配合 Modal Form 插件来调节参数 -![2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-4](https://cdn.pkmer.cn/images/202402222335492.png!pkmer) +![2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-4](https://cdn.pkmer.cn/images/202402230946316.png!pkmer) > 配合 ModalForm 插件写了个表单，可以设置参数，不过体验下来，还不如提前把参数设置好一键切换来的方便，还不需要额外安装插件。 @@ -330,8 +329,7 @@ module.exports = async () => { if (canvasFile) { app.vault.modify(canvasFile, canvasJson); } else { -            file = await app.vault.create(canvasPath, canvasJson); -            canvasFile = app.vault.getAbstractFileByPath(canvasPath); + canvasFile = app.vault.create(canvasPath, canvasJson); } app.workspace.activeLeaf.openFile(canvasFile); @@ -366,12 +364,45 @@ function getHeadings(fileFullPath, level) { } ``` +## Quickadd 配置 Capture + +![2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-5](https://cdn.pkmer.cn/images/202402230946317.png!pkmer) + +### 脚本 + +该代码由 Obsidian 中文论坛的 PlayerMiller 提供，来源于： + +````md +```js quickadd +const fs = require('fs'), getFBP = path => app.vault.getAbstractFileByPath(path), getHeadings = (vFPath, lv) => { + let fileContent = fs.readFileSync(vFPath, 'utf-8'), regex = new RegExp(`^#{2,${lv}} (.+)`, 'gm') + , mats = [], mat; while ((mat = regex.exec(fileContent)) !== null) mats.push(`#${mat[1]}`); return mats; +} + , file = app.workspace.getActiveFile(), vFPath = app.vault.adapter.getFullPath(file.path), cvsData = { nodes: [], edges: [] } + , lv = 2, width = 960, height = 760, space = 50, limit = 4, cvsPath = '未命名.canvas'; // 参数行 +switch (file.extension) { + case 'md': let heads = getHeadings(vFPath, lv), x = 0, y = 0, n = 1, nodes = []; + for (let i = 1; i <= heads.length; i++) { + let node = { id: '', type: 'file', file: file.path, subpath: '', x: 0, y: 0, width: width, height: height }; + node.subpath = heads[i - 1]; node.id = i; node.x = x; node.y = y; x += width + space; + if (i >= limit * n) { y += height + space; x = 0; n += 1; }; nodes.push(node); + }; cvsData.nodes = nodes; let cvsFile = getFBP(cvsPath), cvsJson = JSON.stringify(cvsData, null, 2); + if (cvsFile) { app.vault.modify(cvsFile, cvsJson); } else cvsFile = await app.vault.create(cvsPath, cvsJson); + app.workspace.activeLeaf.openFile(cvsFile); break; + case 'canvas': fs.readFile(vFPath, 'utf8', (err, data) => { + if (err) throw err; let mdFilePath = JSON.parse(data).nodes[0].file; + app.workspace.activeLeaf.openFile(getFBP(mdFilePath)); + }); break; +} +``` +```` + ## 拓展想法 如果确定每个标题的格式 (如：草稿、提示、总结)，是否可以按照康奈尔笔记布局一样生成对应的 Canvas 来编辑： -![2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-5](https://cdn.pkmer.cn/images/202402222335493.png!pkmer) +![2024-02-21_QuickAdd脚本-利用Canvas平铺笔记_IMG-6](https://cdn.pkmer.cn/images/202402230946318.png!pkmer) ## References -- [在Excalidraw中列出某笔记所有二级Heading - 经验分享 - Obsidian 中文论坛](https://forum-zh.obsidian.md/t/topic/30401) +- [在Excalidraw中列出某笔记所有二级Heading - 经验分享 - Obsidian 中文论坛](https://forum-zh.obsidian.md/t/topic/30401) \ No newline at end of file From 26d123de9d28c1a9b0dd4e01ab3a0820597b0bdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=86=8A=E7=8C=AB=E5=88=AB=E7=86=AC=E5=A4=9C?= <84729049+PandaNocturne@users.noreply.github.com> Date: Fri, 23 Feb 2024 10:12:05 +0800 Subject: [PATCH 6/8] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B8=B2=E6=9F=93?= =?UTF-8?q?=E9=97=AE=E9=A2=98=E7=9A=84=E8=AF=AD=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...34\254\350\256\276\347\275\256\344\273\213\347\273\215.md" | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/Excalidraw\345\246\202\344\275\225\345\256\211\350\243\205\350\204\232\346\234\254_\350\204\232\346\234\254\350\256\276\347\275\256\344\273\213\347\273\215.md" "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/Excalidraw\345\246\202\344\275\225\345\256\211\350\243\205\350\204\232\346\234\254_\350\204\232\346\234\254\350\256\276\347\275\256\344\273\213\347\273\215.md" index c09023446..a9643d5d4 100644 --- "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/Excalidraw\345\246\202\344\275\225\345\256\211\350\243\205\350\204\232\346\234\254_\350\204\232\346\234\254\350\256\276\347\275\256\344\273\213\347\273\215.md" +++ "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/Excalidraw\345\246\202\344\275\225\345\256\211\350\243\205\350\204\232\346\234\254_\350\204\232\346\234\254\350\256\276\347\275\256\344\273\213\347\273\215.md" @@ -81,7 +81,7 @@ Excalidraw 插件有专门的脚本市场： #### Tip：固定按钮到侧边栏 -可以通过**“鼠标右键/鼠标左键长按”** "Obsidian 工具面板 " 的按钮，将按钮固定到 Excalidraw 侧边栏，==再次在**侧边栏**或者**工具面板**中针对按钮**“鼠标右键/鼠标左键”** 长按即可取消固定。== +可以通过**“鼠标右键/鼠标左键长按”** "Obsidian 工具面板 " 的按钮，将按钮固定到 Excalidraw 侧边栏，再次在**侧边栏**或者**工具面板**中针对按钮**“鼠标右键/鼠标左键”** 长按即可取消固定。 ![Excalidraw 如何安装脚本 + 脚本设置介绍](https://cdn.pkmer.cn/images/202312291948914.png!pkmer) @@ -101,7 +101,7 @@ Excalidraw 插件有专门的脚本市场： ### 设置脚本配置 -有些脚本有自带的配置选项，==❗需要单击第一次运行后，Excalidraw 才会加载到 Excalidraw 的插件设置里的**已安装脚本的设置**选项中==，这里面可以看到不同脚本的设置选项： +有些脚本有自带的配置选项，❗需要单击第一次运行后，Excalidraw 才会加载到 Excalidraw 的插件设置里的**已安装脚本的设置**选项中，这里面可以看到不同脚本的设置选项： ![Excalidraw 如何安装脚本 + 脚本设置介绍](https://cdn.pkmer.cn/images/202312291948917.png!pkmer) From 2a30d65f53ce689c34a6b5b2b5d931a98809251b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=86=8A=E7=8C=AB=E5=88=AB=E7=86=AC=E5=A4=9C?= <84729049+PandaNocturne@users.noreply.github.com> Date: Fri, 23 Feb 2024 19:33:59 +0800 Subject: [PATCH 7/8] =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E5=9B=BE=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\240\345\234\206\345\234\210\347\274\226\345\217\267.md" | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/ExcalidrawAutomate/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\345\217\214\345\207\273\346\267\273\345\212\240\345\234\206\345\234\210\347\274\226\345\217\267.md" "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/ExcalidrawAutomate/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\345\217\214\345\207\273\346\267\273\345\212\240\345\234\206\345\234\210\347\274\226\345\217\267.md" index da4d2eae8..d1277419f 100644 --- "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/ExcalidrawAutomate/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\345\217\214\345\207\273\346\267\273\345\212\240\345\234\206\345\234\210\347\274\226\345\217\267.md" +++ "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/ExcalidrawAutomate/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\345\217\214\345\207\273\346\267\273\345\212\240\345\234\206\345\234\210\347\274\226\345\217\267.md" @@ -1,9 +1,7 @@ --- uid: 20240221010235 title: 自定义 Excalidraw 脚本 - 双击添加圆圈编号 -tags: - - Excalidraw脚本 - - 图片注释 +tags: [Excalidraw脚本, 图片注释] description: 给Excalidraw添加圆圈编号功能 author: 熊猫别熬夜,一鸣惊人 type: other @@ -18,7 +16,7 @@ modified: 20240221010515 参考了 [一鸣惊人的脚本](https://www.bilibili.com/video/BV1XZ421m74S/?share_source=copy_web&vd_source=71b5851b6744265a191d3ec972be4787) 和 大叔的 `Scribble Helper` 脚本，用于添加有序的圆圈编号。 -![2024-01-13_自定义Excalidraw脚本-编号模式-添加圆圈编号_IMG-1](https://cdn.pkmer.cn/images/202402210103272.gif!pkmer) +![自定义 Excalidraw 脚本 - 双击添加圆圈编号](https://cdn.pkmer.cn/images/202402231932575.png!pkmer) > ✅已启动编号模式，双击添加 num > ⏩双击 num 可以重新编辑编号 From 9e6928cf71882bffe1dd9ace6b7a44c1be2a3952 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=86=8A=E7=8C=AB=E5=88=AB=E7=86=AC=E5=A4=9C?= <84729049+PandaNocturne@users.noreply.github.com> Date: Sat, 24 Feb 2024 20:08:54 +0800 Subject: [PATCH 8/8] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BD=9C=E8=80=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\233\276\347\211\207\345\210\260\345\233\276\345\272\212.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\344\270\212\344\274\240\347\224\273\346\235\277\344\270\255\347\232\204\345\233\276\347\211\207\345\210\260\345\233\276\345\272\212.md" "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\344\270\212\344\274\240\347\224\273\346\235\277\344\270\255\347\232\204\345\233\276\347\211\207\345\210\260\345\233\276\345\272\212.md" index 220303e97..63981a8d5 100644 --- "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\344\270\212\344\274\240\347\224\273\346\235\277\344\270\255\347\232\204\345\233\276\347\211\207\345\210\260\345\233\276\345\272\212.md" +++ "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\344\270\212\344\274\240\347\224\273\346\235\277\344\270\255\347\232\204\345\233\276\347\211\207\345\210\260\345\233\276\345\272\212.md" @@ -5,7 +5,7 @@ tags: - 图床 - Excalidraw脚本 description: Excalidraw 画板中引用的图片直接上传到 PicGo 的 Server 转为在线图片 -author: +author: 熊猫别熬夜 type: other draft: false editable: false