组件世界 WidgetStore:一个丰富、强大的嵌入式小组件库

组件世界 WidgetStore:一个丰富、强大的嵌入式小组件库

分类
使用教程
关键词
组件世界·通用介绍

什么是小组件?

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

组件世界/WidgetStore 简介

一个服务于 Notion 类产品、双链笔记类产品、代码托管平台「GitHub 等」、博客系统「WordPress」以及为知笔记等文本编辑器的可嵌入式小组件库。一个辅助用户建立个性化、可视化的仪表盘或者知识库的工具。
notion image

主要产品

目前,「组件世界/WidgetStore」提供基础组件、动态图标、动态背景、可视化图表、Notion 汉化、效率时代「博客」
notion image

支持平台

Notion 类笔记软件:包括 Notion、FlowUs 息流笔记、Wolai 我来云笔记、ClickUp、Coda、Anytype. 以及将来支持网页嵌入的印象笔记 Verse、微软 Microsoft Loop……
双链笔记软件,比如 Roam Research、Obsidian 黑曜石、Logseq、RemNote、思源笔记、Roam Edit、HuluNote 葫芦笔记。
其他编辑器:为知笔记 WizNote
代码托管平台:Github、Gitee、Gitlab
博客平台:Wordpress
notion image

产品特点

小组件类型丰富。目前,「组件世界/WidgetStore」提供了包括 基础组件、动态图标、动态背景、可视化图表、Notion 汉化 等多种服务,可以为笔记用户提供适用于时间管理、任务管理、资讯管理、习惯养成、学习等多种使用场景的解决方案。比如,在基础组件中包括天气、时钟、番茄钟、倒计时、日历、纪念日、习惯打卡、访客统计、白噪音、热力图、微博热搜、百度统计埋点等多种类型等小组件。
小组件服务稳定。相比国外同类产品,服务稳定,使用十分方便。
小组件支持个性化定制。小组件支持文字字体、颜色、数字等基础信息的组件设置。与此同时,小组件也支持小组件外观背景等公共配置。
小组件平台化。目前,「组件世界/WidgetStore」正在快速迭代中。并且,「组件世界/WidgetStore」支持第三方开发者参与开发小组件,共建社区生态。

使用效果

基础小组件

目前已经有接近 40 个基础组件,使用场景各异。如图,官方已经将小组件按照使用场景进行分类
目前设置了资讯管理、内容运营、图片管理、学习、娱乐、日历、习惯养成、动效文字、时钟、天气等类别。
notion image
notion image

动态图标

什么是动态图标?简单的来说,图标内容/样式,可以随着时间、位置等不同因素而变化,支持自定义配置的图标/ Icon.
动态图标主要细分为两种类型
日历类动态日历手帐日历。这类动态图标,可以随着时间推移,动态显示当天的具体日期
综合类:具有一定动态效果、可自定义文字内容的动态 Icon, 主要用于建立知识库,作为突出提醒、展示之用。
notion image
notion image

动态背景图

目前,动态背景图包括基础时间进度条卡片胶囊倒计时两种类型。未来将会支持更多的动态背景类型,比如在封面/头图中显示动态天气
基础时间进度条:分为年进度、周进度两种类型。
卡片胶囊倒计时:以卡片形式,支持日期、年进度、周进度的同时显示。
notion image
notion image
notion image

可视化图表

至于平台,目前仅支持 Notion, 后期将逐渐支持 FlowUs 等产品。
目前,可视化图表支持 Notion Database 的可视化,提供了饼状图、柱状图、折线图、Echarts 柱状图、词云图。未来将会支持更多的可视化图表类型。
notion image
notion image
notion image

Notion 汉化

组件世界 Widget Store」的 NotionCn 服务,提供了 Notion 软件汉化
网页端汉化:安装使用 NotionCn 插件即可。插件支持平台——Chrome、Firefox 火狐、360 浏览器
桌面端汉化:直接使用 NotionCn 已经添加汉化脚本的安装包即可。
注释 :翻译来源由 Notion 社区志愿者 reamd7 等人提供 翻译贡献。具体由社区维护翻译校验。
notion image

效率时代·博客

关于「效率方法」的博客,包括学习/笔记/阅读/写作方法等主题。
notion image

Notion 风格头像生成器

Notion Avatar Maker:版权归原开发者,此处为友情推荐。
notion image
更多的使用效果,可以参见小组件、动态图标、动态背景图、可视化图表等细分产品教程。

使用案例

在实际使用中,可以将不同小组件,根据使用场景加以组合使用。进而,建立个性化的仪表盘。
比如,第一行,将天气时钟组件放在一起,方便快速鸟瞰。第二行,将每日一句英语每日一句诗词组件放在一起。第三行,将卡片翻牌时钟番茄钟白噪音打卡热力图组件进行组合。每一天,先通过时钟组件查看时间,再根据番茄工作法,设置番茄钟组件进行学习或者工作。随后,打开白噪音组件让自己进入沉浸状态。最后,根据番茄钟的实践结果,在打卡热力图中,对自己对某个事件进行追踪打卡。
以下是一些小组件·使用示范
notion image
notion image
notion image
notion image
notion image

官网

检索关键词组件世界/ Widget Store/ NotionPet 均可。其中,「组件世界/Widget Store」是由 NotionPet 更名而来。
notion image

使用教程·简明版

检索并进入「组件世界/Widget Store」

检索关键词——组件世界Widget StoreNotionPet,任选其一均可。其中,NotionPet 是「组件世界」的原名。
notion image

根据产品分类,查找所需组件类型

notion image

根据使用场景,筛选并创建组件

notion image

根据使用需求,配置组件

组件配置:支持组件数据来源、文本内容、颜色、字体对齐方式等多种要素的自定义配置;
公共配置:支持组件边框类型、颜色、边距、外观背景的自定义配置;
notion image
notion image
可视化图表的配置稍微复杂一些,基本流程如下:绑定 Notion 数据库 ➡️ 获取工作区授权 ➡️ 获取目标数据库 URL ➡️ 设置坐标轴选项、排序方式、过滤条件等 ➡️ 复制组件链接。具体可参考专文教程可视化图表·使用教程:让你的多维表格/ Database 数据实现可视化

根据平台类型,复制对应的组件链接

1.点击右上角的「复制组件链接」2.根据提示,选择对应的组件链接并点击复制;3.组件链接主要区分为通用链接、iframe 链接、img 链接
3.1 通用链接:适用于 Notion 类、Roam 类双链笔记软件。
3.2 iframe 链接:适用于 WordPress;
3.3 img 链接:适用于 WordPress/GitHub 等平台;
notion image

嵌入链接至编辑器的对应位置

基础小组件:嵌入至编辑器正文;
动态图标:嵌入至编辑器图标;
动态背景图:嵌入至编辑器封面/头图;
可视化图表:嵌入至编辑器正文;
notion image

注意区分不同编辑器平台的嵌入语法

对于 Notion 类工具而言,如果是小组件、可视化图表的组件链接,直接粘贴至页面正文,选择将链接转换为「嵌入网页」即可。
至于双链笔记软件、为知笔记等云笔记、Github等代码托管平台、WordPress 等博客平台的使用,参见专门的使用教程
notion image

多种类型的小组件嵌入效果

notion image

使用教程·GIF 演示版

小组件· GIF 演示·使用教程

notion image

动态图标·GIF 演示·使用教程

notion image

动态背景图·GIF 演示· 使用教程

notion image

可视化图表· GIF 演示·使用教程

notion image

参考文献

 
Built with Potion.so