登录 注册

【分享】导图挂件更新

写在前面：这次需要稍微改一下 main.js，所以不方便直接在集市上更新。

一、挂件做了哪些修改？

  1. 样式上，改成了黑夜模式，个人感觉比原来的蓝白配色好看一丢丢；
  2. 原来的超链接，点击之后跳转的很慢，改成了引用块跳转的形式，现在打开速度快多了；
  3. 添加超链接悬浮预览，这里设置成：按住 Alt 后鼠标悬浮在节点上才会显示预览，不然容易误操作，老是弹出预览；
  4. 插入超链接的时候，除了可以使用【复制块超链接】的方式，还可以使用【复制该块为引用块】的形式。
  5. 因为悬浮预览、块引用跳转要用到 main.js 里面的几个方法，所以需要在 main.js 中把方法挂到 window 对象上，方便在挂件中调用。

这里说一下使用【复制该块为引用块】的形式插入超链接：

  • 选中块——【复制该块为引用块】
  • 双击导图某个节点的边框（节点进入编辑模式），如果使用节点的文字作为锚文本，那么此时直接 Ctrl+k 就能插入超链接；如果需要使用复制过来的引用块本来的文字作为锚文本，那么先删掉节点中的文字再按 Ctrl+k 即可。

二、视频演示

1、插入引用块

2、悬浮预览 + 链接跳转

三、开始使用

1、更新挂件

  • 下载挂件的压缩包后，解压得到一个【思维导图】的文件夹；
  • 打开挂件所在文件夹 笔记数据所在文件夹\data\widgets\
  • 删掉旧的思维导图挂件，将新的放进去；

2、修改 main.js

这是因为要用到 main.js 里面的几个方法，所以需要把方法挂到 window 对象上，方便在挂件中调用。

使用编辑器比如 vsCode 打开 笔记安装的文件夹\SiYuan\resources\stage\build\app\main.js，使用查找/替换功能：

搜索

t.WYSIWYG=class

替换成

window._o=n(1828);window._M=n(5751);t.WYSIWYG=class

M 和 o.png

搜索

t.initBlockPopover=()

替换成

window._a=n(3781);t.initBlockPopover=()

方法 a.png

修改后保存并关闭。

3、思源笔记清除缓存

打开【思源笔记】——【更多】——【开发者工具】

清除缓存.png

然后关闭【开发者工具】，重启笔记。

4、插入挂件，开始使用

四、挂件压缩包

1、v1

思维导图.rar

2、v2

稍微修改了一下：

  1. 检索界面，点击某个搜索结果后，高亮该结果对应的节点，方便在导图中判断节点的位置；
  2. 节点的路径显示后，前方加一个删除按钮，用于删除点击搜索结果后上方显示的路径；
  3. 搜索结果列表，由原来的溢出部分用省略号代替，改成横向滚动条，方便查看完整的搜索结果；

思维导图.rar

3、v3

小修改

  • 导图数据保存到【属性】-【备注】中。数据较多时代码块性能较差，写到属性会好很多；
  • 点击【保存按钮】，保存成功会有弹窗提示；
  • 处理根节点选中后缩放跳动的问题；
  • 添加刷新按钮（导图布局混乱的时候，方便刷新恢复）
  • 外观上简化一下，去掉框线，只留文字和超链接的下划线，连线换了个鲜艳点的颜色。
  • 跳转后高亮目标文本；

思维导图 3.rar

截图.png

4、v4 ——给节点设置背景颜色

使用过程中发现，一些看过的内容无法跟任务列表一样标记完成状态，所以加上这个。

使用方法：

  • 鼠标点击节点的边框（不要直接点链接，会跳转）来选中节点，上方选好颜色后，点【确定】就能改变节点背景色；

或者：

  • 先选好颜色，然后再选中节点，然后按快捷键 Alt+x

如果需要改变多个节点的颜色，可以先选中一个，然后通过上下左右方向键切换到其他节点，再使用快捷键修改节点颜色。

思维导图 4.rar

节点添加颜色.gif

1 引用
【 分享 】思维导图小挂件（添加关键字检索 + 缩放功能）； • BryceAndJuly
16 操作
BryceAndJuly 在 2022-05-22 13:00:33 更新了该帖
BryceAndJuly 在 2022-05-13 21:40:14 更新了该帖
BryceAndJuly 在 2022-05-13 20:48:22 更新了该帖
BryceAndJuly 在 2022-05-13 20:46:26 更新了该帖 BryceAndJuly 在 2022-05-13 20:45:13 更新了该帖 BryceAndJuly 在 2022-05-10 22:31:00 更新了该帖 BryceAndJuly 在 2022-05-10 22:02:56 更新了该帖 BryceAndJuly 在 2022-05-10 21:38:55 更新了该帖 BryceAndJuly 在 2022-05-10 16:24:14 更新了该帖 BryceAndJuly 在 2022-05-10 13:54:32 更新了该帖 BryceAndJuly 在 2022-05-10 13:53:45 更新了该帖 BryceAndJuly 在 2022-05-07 16:47:30 更新了该帖 BryceAndJuly 在 2022-05-01 17:37:51 更新了该帖 BryceAndJuly 在 2022-05-01 17:20:32 更新了该帖 BryceAndJuly 在 2022-04-29 08:54:52 更新了该帖 BryceAndJuly 在 2022-04-28 22:34:29 更新了该帖
深圳 位置
2 感谢
1 关注
3 收藏
1 赞同
1 引用
16 操作
26 回帖
6
2
2
509 279 35 1 3 190

相关帖子

26 回帖
【分享】导图挂件更新

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • shuoying •
    捐赠者 订阅者

    可以试试自动跟踪主题颜色模式

    window.top.siyuan.config.appearance.mode === 0; // 浅色模式
window.top.siyuan.config.appearance.mode === 1; // 深色模式

window.matchMedia('(prefers-color-scheme: light)').matches === true; // 浅色模式
window.matchMedia('(prefers-color-scheme: drak)').matches === true; // 深色模式
    1 回复
    1 操作
    shuoying 在 2022-04-29 19:02:27 更新了该回帖
  • 其他回帖
  • BryceAndJuly •
    订阅者 作者

    1、关于导图添加关系线

    关系线就懒得弄了，分支内容之间的联系由双链来构建就可以了。

    2、希望能设置导图方向

    现在也可以，节点是可以拖拽的，你把它拖到一边就成了单向的了，如下方视频所示。

    3、关于弄 Obsidian 插件

    暂时没这个想法，不过 jsmind 是开源的，你随时可以拿来改。附上 jsmind 的仓库地址：

    GitHub - hizzgdev/jsmind: Javascript version of mind mapping Javascript version of mind mapping . Contribute to hizzgdev/jsmind development by creating an account on GitHub. GitHub - github.com

  • BryceAndJuly •
    订阅者 作者

    1、没有找到 笔记本安装的文件夹

    你可以右键桌面上思源笔记快捷方式的那个图标——【打开文件所在位置】，应该就能看到 resources 那个文件夹了。然后就可以找到

    resources\stage\build\app\main.js

    2、第 4 步，插入挂件，开始使用

    就是平常使用挂件的步骤，文档中输入 / 后弹出列表——点击 挂件 ，选中要使用的挂件。

  • BryceAndJuly •
    订阅者 作者

    刚刚自己用的时候发现有些细节没处理好，稍微修改了一下：

    1. 检索界面，点击某个搜索结果后，高亮该结果对应的节点，方便在导图中判断节点的位置；
    2. 节点的路径显示后，前方加一个删除按钮，用于删除点击搜索结果后上方显示的路径；
    3. 搜索结果列表，由原来的溢出部分用省略号代替，改成横向滚动条，方便查看完整的搜索结果；
    1 回复
  • 查看全部回帖
BryceAndJuly
道阻且长,行则将至 深圳
回帖
56
 帖子
15
 积分
606