Notion Widget: 热力图
奴止
Jan 12, 2023
Last edited: 2023-3-3
type
Post
status
Published
date
Jan 12, 2023
slug
notion-widget-heatmap
summary
notion + github 仓库生成打卡热力图小组件,利用 ios 的快捷指令实现自动打卡记录数据。
tags
工具
Notion
前端开发
category
动手做
icon
password
Property
Mar 3, 2023 08:48 AM
我知道热力图有不少成熟的解决方案,比如 https://www.lifeofdiscipline.com/,以及其它专门做 Notion 小组件的平台,但我就只是手痒想自己试试看。
前置知识
直接跳过也可,后面按照步骤一步步来操作即可。
- Github Pages
- Notion 基本知识(Database、embed link)
- iOS 快捷指令
具体实现
创建共享数据库
注意建一个相对比较独立的库,防止后面share后,暴露不该暴露的内容(虽然一般情况下没人知道你的Database id)。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fca2c7717-afef-465a-93bc-2b2702410dcb%2Fd16b371b-8925-4a98-986d-679ff567b510%2FUntitled.png%3Ftable%3Dblock%26id%3Dd9b9c7da-de57-469d-8de6-53f32df8c102%26spaceId%3Dca2c7717-afef-465a-93bc-2b2702410dcb%26expirationTimestamp%3D1739923200000%26signature%3DbgVJeyaQI39LTFw6lVGO6ujk1DzJiMO7USZlXUtyNgs?table=block&id=d9b9c7da-de57-469d-8de6-53f32df8c102&cache=v2)
注意日期(图中
Date
)这一列是必须的,也至少有 1 列打卡的项目名,比如图中的健身
,项目的属性必须为 Checkbox
或 Number
。怎么建库?在页面输入
/
,然后继续输入 database,选 inline 或 fullpage 都行(你可以试试看下两者不同),前者需要这样查看 Database 页:![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fca2c7717-afef-465a-93bc-2b2702410dcb%2F1b4a2fe3-ed30-428b-aecb-293c3be05490%2FUntitled.png%3Ftable%3Dblock%26id%3D32676abe-fbc1-4ad9-ad47-c5c3475c3b8c%26spaceId%3Dca2c7717-afef-465a-93bc-2b2702410dcb%26expirationTimestamp%3D1739923200000%26signature%3DN16Otn2zbDqYsGgCvIVBqrF3GS5m4I1rsfiGVuuRaAM?table=block&id=32676abe-fbc1-4ad9-ad47-c5c3475c3b8c&cache=v2)
将 Database 设置为公开(右上角 Share,打开 Share to Web,关闭所有权限开关,因为我们只需要只读),同时记录此 Database 的 id(下图红框)
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fca2c7717-afef-465a-93bc-2b2702410dcb%2F1354b18d-9646-49e1-ab1f-50c5c7b95531%2FUntitled.png%3Ftable%3Dblock%26id%3D1eb51a12-595b-4382-be2c-0c6d43eab640%26spaceId%3Dca2c7717-afef-465a-93bc-2b2702410dcb%26expirationTimestamp%3D1739923200000%26signature%3DNr1u93dzGM_fv6aye1JACGPkmKLo2jEgimWh2qm3PaY?table=block&id=1eb51a12-595b-4382-be2c-0c6d43eab640&cache=v2)
创建Github仓库
对这一步不感兴趣的可以直接跳过,因为可以使用我已经发布的在线组件。
直接 fork 这个仓库 ,无需其它步骤。
NoName4Me/notion-widget
这个组件使用第三方的在线服务来读取 Notion 公开仓库的数据,可能会因为服务宕机或者 Notion api 变更等导致不可用,可以去↑仓库提 issue 提醒我,或者懂代码的网友有更好的读取数据的方式也可以 issue 提出来或直接发起 MR,感谢~
引用热力图组件
将链接
https://noname4me.github.io/notion-widget/?db-id={your database id}
粘贴到你需要的 Notion Page 里(以 embed 方式) ![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fca2c7717-afef-465a-93bc-2b2702410dcb%2F869badc2-8c2f-48f7-9d82-aa478a084fa1%2FUntitled.png%3Ftable%3Dblock%26id%3Dc56d816a-fd0a-4fdf-85d8-5eff3c30aca0%26spaceId%3Dca2c7717-afef-465a-93bc-2b2702410dcb%26expirationTimestamp%3D1739923200000%26signature%3DbzAjwXKQOd8xjGovHLr08Rpg4GyXdWGMWoZRUO5Yz_k?table=block&id=c56d816a-fd0a-4fdf-85d8-5eff3c30aca0&cache=v2)
注意其中的 github 名(如果上一步你跳过了可以不关注),以及你的 tatabase id(
{your database id}
)。自动打卡(iOS)
非 iOS 手机应该也有类似的替代方案,可以求助搜索引擎。
最后
个人建议:年终总结后,截图留存,以及清空数据(打卡签到的database),毕竟这种打卡数据于我个人而言就是过期作废,我关心的只是最终的热力图。
- Catalog
- About
0%