使用小组件库强化双链笔记软件

自从 2020 年 Roam Research 出现以后，在文本编辑器领域兴起了双链笔记热潮。目前，国内外比较广为认知的双链笔记包括：Roam Research、 Obsidian、Logseq 、思源笔记、Roam Edit 、RemNote、葫芦笔记、TiddlyWiki、Athens、Trilium.

双链笔记软件多数定位为 Tools For Thought/思维工具, 期待成为服务于个人和企业用户的知识管理系统。

多数双链笔记软件提供了插件系统。通过插件，极大扩展了双向链接的可能性，丰富了双链笔记的使用场景。然而，没有完美的笔记软件。即便是这些双向链接软件自身也在快速迭代中。

在插件系统之外，使用组件库，也是一种可以辅助知识管理，提升双链笔记使用效果的有效方法。尤其是，用户需要建立一些简单、好用的仪表盘，那么组件库可以很好地解决双链笔记用户的需求。

原本服务于 Notion 类的组件库，完全可以运用于双链笔记软件之中。通过嵌入式小组件，双链笔记用户也可以在编辑器内查看天气/日历，设置番茄钟、打卡记录等操作。

下面以国产嵌入式组件库—— 「组件世界/WidgetStore」为例，介绍如何在常见的双链笔记中使用小组件。

嵌入式小组件库「组件世界/WidgetStore」简介

什么是小组件？

小组件，英文为 Widget Extension, 主要以图形化展示的可视化模块，让用户想要了解的信息触手可及。目前，「组件世界/WidgetStore」的小组件种类比较丰富、功能也比较强大。下面以「组件世界/WidgetStore」为例介绍：

产品简介

一个服务于 Notion 类产品、双链笔记类产品、代码托管平台「GitHub 等」、博客系统「WordPress」以及为知笔记等文本编辑器的可嵌入式小组件库。

一个辅助用户建立个性化、可视化的仪表盘或者知识库的工具。

双链笔记使用教程：如何在双链笔记软件中建立仪表盘？

产品特点

小组件类型丰富。目前，「组件世界/WidgetStore」提供了包括 基础组件、动态图标、动态背景、可视化图表、Notion 汉化 等多种服务，可以为笔记用户提供适用于时间管理、任务管理、资讯管理、习惯养成、学习等多种使用场景的解决方案。比如，在基础组件中包括天气、时钟、番茄钟、倒计时、日历、纪念日、习惯打卡、访客统计、白噪音、热力图、微博热搜、百度统计埋点等多种类型等小组件。

小组件服务稳定。相比国外同类产品，服务稳定，使用十分方便。

小组件支持个性化定制。小组件支持文字字体、颜色、数字等基础信息的组件设置。与此同时，小组件也支持小组件外观背景等公共配置。

小组件平台化。目前，「组件世界/WidgetStore」正在快速迭代中。并且，「组件世界/WidgetStore」支持第三方开发者参与开发小组件，共建社区生态。

双链笔记使用教程：如何在双链笔记软件中建立仪表盘？

使用示范

以下是使用支持原生应用开发、文件夹页面、PDF 批注、思维导图、双向链接等功能的在线协作文档和知识管理工具 FlowUs 嵌入「组件世界/WidgetStore」的具体效果：

双链笔记使用教程：如何在双链笔记软件中建立仪表盘？

操作方法

如何在双链笔记中嵌入小组件？

熟悉嵌入网页语法

具体的语法有所差异，见图示：

双链笔记使用教程：如何在双链笔记软件中建立仪表盘？

Roam Research 嵌入网页语法

{{iframe:URL}}

葫芦笔记嵌入网页语法

{{iframe: URL}} 或者直接在编辑器页面输入 / wang, 随后选择「网页嵌入」即可。

双链笔记使用教程：如何在双链笔记软件中建立仪表盘？

Roam Edit 嵌入网页语法

{{embed src=""}}

思源笔记嵌入网页语法

在编辑器中输入 / iframe链接，粘贴小组件 URL 至此即可。

创建小组件，获取组件嵌入链接

根据需求，选择并创建个性化的小组件，生成小组件链接，再将其粘贴和替换嵌入语法中的 URL.

如图：在组件世界/WidgetStore的目标小组件中，复制右上角的小组件链接。

双链笔记使用教程：如何在双链笔记软件中建立仪表盘？

获取组件链接【示范】：URL= https://cn.widgetstore.net/view/index.html?q=be7662ce6345671300af04a84030f947.4e51c63663637bb9000732412f30a684

双链笔记使用教程：如何在双链笔记软件中建立仪表盘？

小组件窗口显示调整

如果软件本身支持调整小组件窗口，比如 Roam Research, 直接拖拽调整即可。如果软件不支持，则需要手动调整。这类工具以 Logseq 和 Obsidian 为代表。调整方法很简单，直接修改嵌入语法中的宽度、高度等数值，即修改语法中的「width: 100%; height: 300px 」对应的数值。
语法：见上面的截图。