见顶部预览图:
- 白板中嵌入的内容块,右上角添加刷新按钮。方便更新内容后单独重载该内容块,而不是重载整个白板 。
- 需要先单击卡片中央的【点击以开始交互】或者双击卡片的边缘区域进入卡片后才能点击该按钮
- 白板中嵌入的内容块,背景色默认设置为透明,以便元素设置的背景色生效。
内容块检索面板
(Alt+P)新增深色模式,当白板的主题为深色模式时生效(是直接设置为深色,而不是System mode)。
新增注意事项:
- 将笔记中的内容块拖拽到白板中生成卡片后,首次拖拽卡片前需要先单击卡片的
边缘区域
(中间点击以开始交互
以外的区域) 来进行重新选中。- 如果在已有其他内容的文档中误嵌入该挂件,可参考:误操作插入挂件后如何撤销?
对于当前版本:V2.0.4
如果你不想默认开启自动保存功能,可以使用VS Code之类的编辑器打开挂件文件夹Whiteboard
——custom.js
,
搜索:
window._autoSave = true;
改成:
window._autoSave = false;
如果你想调整自动保存的延时时间(默认是2000ms),可以打开挂件文件夹Whiteboard
——custom.js
搜索:
window._autoSaveDelay = 2000;
将2000 改成你想设置的数值即可,单位是毫秒。
一个基于Excalidraw的挂件,嵌入后会自动铺满文档,将一个文档当成一个白板。融合了悬浮预览、内容块的检索和嵌入等小功能。
可通过引用文档的方式来引用白板。如果需要将画好的白板导出并分享给别人,可以使用白板所在文档的导出/导入SiYuan .sy.zip
文件的功能(导出前建议先点击保存块引用
按钮,导入后点击修复块超链接
按钮)。每个白板绑定一个存储在assets/ExcalidrawFiles/
中的文件,文档删除后白板绑定的文件也会作为【未引用的资源】来方便手动删除。
白板创建时,会自动设置所在文档的属性——别名
的值为:whiteboard
,这是为了解决打开白板所在文档时页面闪现出文档标题的问题。相应的,你需要在笔记软件的设置
——外观
中添加对应的CSS代码片段:
/* 白板挂件——隐藏当前文档的标题、面包屑 */
.protyle-title.protyle-wysiwyg--attr:has(+ .protyle-wysiwyg.protyle-wysiwyg--attr[alias="whiteboard"]){
display: none !important;
}
/* 隐藏白板文档中的无序列表 */
.iframe[custom-data-assets^="assets/ExcalidrawFiles/"] ~ .list[data-subtype="u"] {
display: none !important;
}
/* 在不聚焦的情况下,隐藏白板文档顶栏的面包屑 */
.protyle-breadcrumb:has(button.protyle-breadcrumb__icon.ariaLabel.fn__none):has(+ .protyle-content.protyle-content--transition > .protyle-wysiwyg.protyle-wysiwyg--attr[alias="whiteboard"]) {
display: none !important;
}
/* 如果是新版本,比如SiYuan V3.0.16,还需要以下片段 */
.protyle-top:has(+ .protyle-wysiwyg.protyle-wysiwyg--attr[alias="whiteboard"]){
display: none !important;
}
/* 挂件——去掉边框 */
.b3-typography iframe, .protyle-wysiwyg iframe {
border: none;
}
/* 处理在白板文档中,文档树右侧(调整页面宽度)的拖拽线被遮挡的问题 */
.layout__resize--lr {
z-index: 3;
}
/* 白板文档作为嵌入块嵌入到其他文档时——隐藏底边可能出现的空白行 */
.protyle-wysiwyg__embed>.iframe[custom-data-assets^="assets/ExcalidrawFiles/"] ~ .p {
display: none;
}
/* 处理问题:挂件铺满文档的过程中,左侧出现明显闪烁的输入光标。 */
.iframe ,iframe{
-webkit-user-modify: read-only;
}
还有一个可选的样式,是设置悬浮窗大小的,个人感觉默认的窗口有点过于宽了才设置的,可以根据自己的需要来进行修改。
/* 悬浮窗口 */
.block__popover {
width: 735px;
min-height: 70vh;
max-height: 75vh !important;
}
可通过拖拽的方式快速往白板中嵌入文档/块。
需要在笔记软件的设置
——外观
中添加对应的JS代码片段来辅助获取当前拖拽块的ID。
document.addEventListener("dragstart", (event) => {
if (event.target.tagName === "SPAN" && event.target.parentElement.getAttribute('data-node-id')) {
window._currentBlockID = event.target.parentElement.getAttribute('data-node-id');
} else if (event.target.tagName === "LI" && event.target.getAttribute("data-node-id")) {
window._currentBlockID = event.target.getAttribute("data-node-id");
} else {
window._currentBlockID = null;
}
}
);
- 安装这个插件是为了能在白板中悬浮预览笔记内块/文档的内容。
- 在
设置
——集市
——插件
页面,下载并启用插件开放 API
即可。
下载完挂件后,在新建的空白文档中设置好文档标题后,输入/g
并回车,在挂件列表选择Whiteboard
即可在当前文档中插入白板,默认铺满文档。
单击左上角的保存
按钮或者使用快捷键Ctrl
+S
来保存白板的数据。左上角会弹出提示:已保存
白板的数据保存在:assets/ExcalidrawFiles/
文件夹中,文件路径类似于:
assets/ExcalidrawFiles/20231227015401-w0olmpi.excalidraw
使用白板挂件块的ID作为文件名。
- 默认开启
自动保存
,一般在增、删或移动元素后约2s触发保存。如果想默认关闭自动保存或者调整延时时间,可以参考文档顶部描述的方法。 - 如果是临时手动开启/关闭自动保存,可以使用快捷键
Alt+F
(挂件V1.0.8后的版本使用该快捷键,之前的使用Alt+S
),左上角会有提示。
编辑完后记得点击【保存】、记得点击【保存】、记得点击【保存】,不然什么都没了。 我自己使用的是手动保存模式,而且勤按Ctrl+S,所以目前还没丢过内容。
- 在白板中插入链接的方式没有变化:先复制一个链接地址(外部链接或者某个块/文档的
块超链接
),在画板中点击选中一个元素后按Ctrl
+K
后弹出链接输入框,粘贴链接并回车即可。 - 值得注意的是,如果插入的是块超链接,并且想在白板中悬浮预览该块的内容,你需要先打开预览开关。先单击白板空白处,然后按快捷键
Alt
+Q
是开启预览,按快捷键Alt
+W
是关闭预览。默认是关闭的,在开启状态下,鼠标悬浮在白板中某个元素的链接图标上时,能弹出悬浮窗来预览该块的内容,弹出窗口后可通过按ESC
键(若不生效可先点击一下该悬浮窗口的顶栏后再试)或者鼠标点击右上角X
来关闭窗口。
左上角下拉主菜单新增两个功能:保存块引用
、修复块超链接
-
保存块引用
- 获取白板中已嵌入的块超链接,以引用块的形式插入到白板挂件块后的无序列表中,建立白板对其他文档/块的引用关系。
- 引用关系建立后,白板文档以
SiYuan .sy.zip
形式导出时能自动包含已嵌入白板的文档/块,保证导出白板时数据的完整性。
-
修复块超链接
- 一般在白板文档以
SiYuan .sy.zip
形式被导入后,才用到该功能。 - 该功能生效的前提是:需要在白板文档以
SiYuan .sy.zip
形式被导出前就使用保存块引用
功能来更新白板对其他块的引用关系。 - 在导入过程中,文档/块的ID被软件重置,这通常会导致白板上已有的块超链接失效。该功能根据引用块中新旧块ID的对应关系,更新白板中的块超链接,达到修复失效块超链接的目的。
- 一般在白板文档以
可通过拖拽的方式快速在白板中嵌入文档/块
-
1、使用拖拽方式来嵌入文档
- 在文档树,鼠标左键按住文档后往白板拖拽即可。
-
2、使用拖拽方式来嵌入块
- 建议先分屏,白板在左侧,文档在右侧。(白板此时建议开启
禅模式
,以减少编辑栏弹出带来的干扰) - 文档处于编辑状态。
- 鼠标悬浮在块上方时,块的左上角显示块标,鼠标左键按住块标后往白板拖拽即可。
- 建议先分屏,白板在左侧,文档在右侧。(白板此时建议开启
可通过快捷键Alt
+P
开启/关闭【内容块检索面板】,通过此面板可快速检索和嵌入检索到的内容块。
基本使用:
- 鼠标单击白板空白处获得焦点后,可通过快捷键
Alt
+P
开启/关闭【内容块检索面板】 - 该面板打开后输入框自动获得焦点,可直接输入关键词,多个关键词以空格隔开。输入关键词约0.5s后,搜索结果显示在下方列表中,自动选中第一个搜索结果。
- 此时可通过键盘的上/下方向键来切换选中的搜索结果。按下
Enter
键,可将当前选中的搜索结果以嵌入文档的形式嵌入到白板的左上角。可通过上、下方向键和Enter
键连续嵌入多个搜索结果。 - 点击【清空】按钮后,输入框清空关键词并自动获得焦点,可继续输入新的关键词来进行检索。
其他:
-
在笔记软件的
设置
——编辑器
——[[ 仅搜索文档
,若开启此项,则白板上的【内容块检索面板】的搜索结果只保留文档块。 -
在【内容块检索面板】搜索和在文档中使用
【【+关键字
搜索引用块用的是同款API:/api/search/searchRefBlock
,因此在笔记软件的设置
——搜索
——块级类型
中的设置能直接影响【内容块检索面板】中检索结果的类型。 -
在搜索结果的列表中
- 点击搜索结果前面的图标,可跳转到对应的内容块。
- 点击搜索结果后面的
+
图标,可将对应的搜索结果以嵌入文档的形式嵌入到白板的左上角。
- 触发
自动保存
时,鼠标右键弹出的菜单会被关闭,如果觉得这个干扰太大,可以默认关闭或者临时关闭自动保存
。(临时关闭自动保存的快捷键是Alt
+F
)。 - 【嵌入网页】框的边角建议用直角,有弧度的那个边角可能会导致文档模糊。
- 在白板中渲染数据库表格的时候虽然没有滚动条,但是可以通过shift+鼠标滚轮的方式来横向滚动查看数据表格。
- 将笔记中的内容块拖拽到白板中生成卡片后,首次拖拽卡片前需要先单击卡片的
边缘区域
(除了中间点击以开始交互
那部分) 来进行重新选中。 - 如果在已有其他内容的文档中误嵌入该挂件,可参考:误操作插入挂件后如何撤销?
对于版本V2.0.4,打开挂件文件夹Whiteboard
——assets
——index-ZsssFvwm.js
,在该js文件中搜索:
n={simulatePressure:e.simulatePressure,size:e.strokeWidth*1.2,thinning
那个1.2是现在设置的值(已经比较小了),最开始的默认值是4点几,你可以根据自己需要更改这个值的大小来修改画笔的粗细。
- 保存时默认自动将白板中的文本内容写入到所在文档的
属性
——备注
中。
这样做的好处是:在全局搜索、引用块搜索、嵌入块搜索中,除了通过白板的文档名、别名外,现在还可以通过白板中已输入的文本来检索并命中白板文档。
当然,如果你不希望白板中的文本参与到全局搜索中,可以手动关闭此功能。
打开挂件文件夹Whiteboard
——custom.js
,搜索:
window._allowSetMemo = true;
改成:
window._allowSetMemo = false;
如果白板的素材库
用的比较多的话,最好设置笔记的固定端口启动,因为添加进素材库的内容都是存到LocalStorage中的,设置后已添加到素材库的内容就不会在下一次启动后不显示了。
鼠标右键笔记桌面图标——属性
——快捷方式
——目标(T)
,在目标(T)
这栏的输入框中,是思源笔记可执行文件的路径,比如:
D:\Siyuan\SiYuan.exe
在后面指定端口即可,比如:
D:\Siyuan\SiYuan.exe --port=6806
-
Excalidraw 版本更新:V0.17.0——>V0.18.0 , 具体更新内容可参考:https://github.com/excalidraw/excalidraw/releases
-
在该版本中,官方已添加【文本检索】、【元素链接】这两项功能,所以旧版挂件的【文本检索】和【元素链接】功能已废弃。
-
关于【元素链接】:不必担心之前建立的元素链接关系会失效,经适配,当前版本的元素链接会继续保持之前的元素链接格式,形如:
excalidraw://7LItP1OJtttbMuytaDgp2
。通过鼠标右键的Copy link to object
选项来获取。备注:触发自动保存时会关闭鼠标右键菜单,如果需要频繁获取元素链接,建议先通过快捷键
Alt
+F
临时关闭自动保存。 -
关于【文本检索】,可通过快捷键
Ctrl
+F
唤出,官方版默认的单关键词检索已修改成支持多关键词检索,关键词之间用空格隔开,跟之前的检索方式保持一致。
-
-
其他感觉比较好用的更新点:
- 默认支持中文手写字体。字体文件在
Whiteboard/fonts/Xiaolai
文件夹下,被拆分成多个woff2文件以便懒加载。虽然字体文件略大,但是字形看着不错,兼顾了可读性和美观。 - 支持了
Elbow arrows
。可快速并规整地连接元素,绘制起流程图来更方便了。 - 图片裁剪,可对嵌入到白板的图片进行简单的裁剪。
- 默认支持中文手写字体。字体文件在
-
-
修复嵌入文档(Web Embed)的加载问题
- 之前刚打开或刷新白板后,需要在白板中随便挪动一下鼠标才会开始渲染嵌入的文档。其他通过拖拽或者【块引检索面板】添加的嵌入文档也是如此。修复后,嵌入白板的文档会自动加载,不需要等鼠标挪动等操作。
刚刚发现一个问题:同时打开多个白板时,因为LocalStorage缓存而导致白板数据互相干扰。 在修复前,请保持在V1.6.0,先不要更新!!!
- 修复问题:在V2.0.0中,同时打开多个白板时,因LocalStorage缓存导致白板数据互相干扰。
修复问题:在V2.0.2中,当元素添加的链接为外链(比如以https://
或http://
开头的链接),点击元素右上角的链接图标未能跳转,需要单击元素后点击上方显示的链接输入框才能跳转。
- Excalidraw
- SiYuan
- 画板中的中文字体文件拷贝自 superdraw 项目;
- 感谢插件【开放 API】的作者Zuoqiu-Yingyi。