【分享】导图挂件更新

写在前面:这次需要稍微改一下 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

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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 的仓库地址:

  • BryceAndJuly
    订阅者 作者

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

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

    resources\stage\build\app\main.js

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

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

  • BryceAndJuly
    订阅者 作者

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

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