Wolai 使用教程:嵌入小组件库,打造精美、强大的知识库主页
Wolai /我来云笔记在 2022.7.11 日的更新中,支持嵌入包括 NotionPet、芦笋、Replit 等在内的第三方应用。感谢 Wolai 云笔记官方对于 NotionPet 的支持。
趁此机会,面向 Wolai 云笔记用户介绍一下 NotionPet 的使用方法和使用技巧:
NotionPet:国产嵌入式小组件库
什么是 NotionPet?
NotionPet 是一个嵌入式的小组件库。通过各种小组件,可以帮助你建立精美而强大的知识库主页,改善你的效率生活体验。
打开 NotionPet 官网,点击右上角的登录,根据提示使用微信、邮箱等方式注册登录便可以进入 NotionPet 内部。

NotionPet 包括四个组成部分:基础组件、动态 Icon 组件、Notion 图表、Notion 汉化插件

NotionPet 使用方法很简单,具体操作如下:
-
选择自己喜欢的小组件;
-
点击「创建组件」,随后根据自己的需求对小组件进行个性化配置;

3. 复制嵌入链接
4.1 如果是基础组件,粘贴至 Wolai 云笔记页面,选择转化为 NotionPet 小组件。

4.2. 如果是动态 Icon 组件,点击页面左上角,添加图标 —— 图片链接 —— 粘贴 NotionPet 小组件链接并提交。

4.3. 至于第三部分的 Chart, 目前只做了 Notion 图表。如果将来 Wolai 的 API 推出以后,便可以提供 Wolai 图表,将 Wolai 的数据表格进行可视化。 这部分内容暂时和 Wolai 不相关,不再展开介绍。

NotionPet 小组件介绍
NotionPet 支持包括 Wolai 云笔记在内、支持嵌入 HTMl 的各种笔记软件。目前,NotionPet 正在快速迭代中,各种类型的小组件均在丰富和优化。
小组件类型
-
基础组件:目前已有 30 种 左右的基础组件,包括天气类、时钟类「卡片翻牌时钟、环形多彩时钟等」、番茄钟、日历类「简约日历、倒计时」、热力图类、计算器、图片类「基础图片幻灯片」、学习类「每日一句古诗词/英语」、资讯类「微博热搜」、自媒体辅助类「访客统计、页面点赞统计、LED 文字跑马灯」等多种组件。


-
动态 Icon 组件:目前已有 10 多种动态 Icon 组件。其中,动态 Icon 又可以细分为日历类(包括动态日历、手办日历)、文字类(包括基础渐变文字、气泡文字、盾牌文字等多种类型)

小组件使用展示
基础组件使用范例


LED 文字跑马灯·小组件

动态 Icon 使用范例

除了上述组件以外,NotionPet 正在快速开发一些好看、实用的组件,比如 LED跑马灯、翻译组件等。
如果没有您需要的小组件,或者已有的小组件存在不足之处,请在 NotionPet 官网页面的最下方进入社群、发邮件进行反馈。期待能为您提供更好的服务,提升您的数字生活质量。
参考资料
- Wolai 云笔记
- NotionPet 官网
- 《强化你的仪表盘:试试 Notion 类工具的国产组件库 NotionPet》——专文测评
- 动态图标组件使用教程
- 如何在Notion、wolai、flowus中接入对外公开页面全埋点:NotionPet百度统计组件使用教程