Wolai /我来云笔记在 2022.7.11 日的更新中,支持嵌入包括 NotionPet、芦笋、Replit 等在内的第三方应用。感谢 Wolai 云笔记官方对于 NotionPet 的支持。
趁此机会,面向 Wolai 云笔记用户介绍一下 NotionPet 的使用方法和使用技巧:

NotionPet:国产嵌入式小组件库

什么是 NotionPet?

NotionPet 是一个嵌入式的小组件库。通过各种小组件,可以帮助你建立精美而强大的知识库主页,改善你的效率生活体验。
打开 NotionPet 官网,点击右上角的登录,根据提示使用微信、邮箱等方式注册登录便可以进入 NotionPet 内部。

 
 
NotionPet 包括四个组成部分:基础组件、动态 Icon 组件、Notion 图表、Notion 汉化插件
NotionPet 使用方法很简单,具体操作如下:
  1. 选择自己喜欢的小组件;
  2. 点击「创建组件」,随后根据自己的需求对小组件进行个性化配置;
 

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百度统计组件使用教程

Wolai 使用教程:嵌入小组件库,打造精美、强大的知识库主页的更多相关文章

  1. 整合常用功能的JS小组件库-v1.0

    function Alex() { //给予video.js的页面滚动到视频元素范围内自动播放/出范围暂停播放-----01 this.video_autoplay = function (box) ...

  2. 小程序-文章:微信小程序常见的UI框架/组件库总结

    ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小 ...

  3. 微信小程序常见的UI框架/组件库总结

    想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI 小程序–使用教程 h ...

  4. 如何快速为团队打造自己的组件库(下)—— 基于 element-ui 为团队打造自己的组件库

    文章已收录到 github,欢迎 Watch 和 Star. 简介 在了解 Element 源码架构 的基础上,接下来我们基于 element-ui 为团队打造自己的组件库. 主题配置 基础组件库在 ...

  5. 1、小程序Vant_WebApp组件库的安装步骤和简单使用

    Vant 1.小程序对于npm的支持 目前,小程序当中已经支持使用npm安装的第三方包,通过使用这些第三方包,我们可以提高对小程序开发的效率,但是在小程序当中使用所谓的npm包有如下的三个限制 不能支 ...

  6. 推荐3个小程序开源组件库——Vant、iView、ColorUI

    推荐3个小程序开源组件库 在进行小程序开发时,经常会遇到编写组件方面的阻碍,这让我们花费大量的时间在页面以及 CSS 样式编写上.因此可以使用开源组件库,有些复杂的组件可以直接拿来使用,节省开发时间, ...

  7. 5个最优秀的微信小程序UI组件库

    开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...

  8. Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库

    Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...

  9. 微信小程序UI组件库 iView Weapp快速上手

    概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上 ...

  10. wussUI v1.0.0小程序UI组件库 第一期开发已完成

    经过了两个月不到的开发时间,我们phonycode团队顺利的发布了小程序的UI组件库 wuss-ui 的第一个版本.目前大体预览如下 介绍 wussUI 现在有大概27个组件左右, 目前基础组件都有了 ...

随机推荐

  1. 事与愿违( backfire effect ) 的故事

    例如:我作为一个需求者,我想要买世界上最便宜的苹果手机,但是当我进入市场去寻找世界上最便宜苹果手机的时候,这一行为本身就使得苹果手机的价格上升. 作为供应者,我本来要去卖最贵的房子,但是当我作为开发商 ...

  2. win10修复系统

    DISM.exe /Online /Cleanup-image /Restorehealth sfc /scannow

  3. struts 1.x框架记录

    strus-config.xml 项目目录最顶层建立配置文件strus-config.xml action 通过type绑定java类,可通过attribute被引用 MyLoginForm.java ...

  4. 关于 Android sdk manager 的安装问题

    最近刚刚接触小程序测试,故此需要搭建环境 我用的是python3.6+appium1.8.2+Android sdk manager 关于应用程序,大家有需要的话,可以找我要. 1.关于安装Andro ...

  5. 解密Prompt系列3. 冻结LM微调Prompt: Prefix-Tuning & Prompt-Tuning & P-Tuning

    这一章我们介绍在下游任务微调中固定LM参数,只微调Prompt的相关模型.这类模型的优势很直观就是微调的参数量小,能大幅降低LLM的微调参数量,是轻量级的微调替代品.和前两章微调LM和全部冻结的pro ...

  6. Javaweb基础复习------Filter相关应用+登录验证案例的使用

    Filter(过滤器) 基本步骤: 1.定义类,实现Filter接口,并重写其所有方法 2.配置Filter拦截资源的路径,在类上定义2 WebFilter注解(WebFilter配置的路径,是拦截资 ...

  7. java数组使用、Arrays类使用 、排序方法

    数组使用 数组的基本使用: package charpter4; public class ArrayDemo2 { public static void main(String[] args) { ...

  8. 聊天小精灵ChatGPT,好与不好大揭秘!

    一.引言 在一个遥远的地球上,有一个名为ChatGPT的魔法盒子,它能够用智慧回答你的问题,解决你的困扰.它是一个聪明的家伙,但和任何家伙一样,有优点也有缺点.现在就让我们一起来探索这个神秘的魔法盒子 ...

  9. Go接入kafka

    需要借助的库 github.com/Shopify/sarama // kafka主要的库* github.com/bsm/sarama-cluster // kafka消费组 生产者 package ...

  10. Go语言实现TCP通信

    TCP协议为传输控制协议,TCP协议有以下几个特点:1. TCP是面向连接的传输层协议:2. 每条TCP连接只能有两个端点,每条TCP连接是点到点的通信:3. TCP提供可靠的交付服务,保证传送的数据 ...