Heatmap Calendar Obsidian 插件使用教程
项目介绍
Heatmap Calendar 是一个为 Obsidian 设计的插件,用于在日历中以类似于 GitHub 活动日历的方式显示数据。这个插件非常适合用于跟踪锻炼、财务、社交时间、项目进展、爱好、恶习等方面的进度。它可以与 Obsidian Dataview 插件一起使用,也可以独立使用或与其他插件结合使用(如果你懂一些 JavaScript 的话)。
项目快速启动
安装插件
- 打开 Obsidian 应用。
- 进入
设置
>社区插件
。 - 点击
浏览
,搜索Heatmap Calendar
。 - 点击
安装
。 - 安装完成后,点击
启用
。
配置和使用
- 数据标注:在你的每日笔记中标注你想要跟踪的数据(参考 Dataview 标注文档)。
- 创建 DataviewJS 块:在你想要显示 Heatmap Calendar 的地方创建一个 DataviewJS 块。
- 收集和显示数据:使用 DataviewJS 收集你想要显示的数据,并将其传递给 Heatmap Calendar。
const calendarData = {
colors: "githubGreen",
entries: []
};
renderHeatmapCalendar(this.container, calendarData);
应用案例和最佳实践
案例一:锻炼跟踪
假设你想要跟踪每天的锻炼情况,你可以在每日笔记中添加如下标注:
- 锻炼: 跑步 30 分钟
然后在你的笔记中创建一个 DataviewJS 块来显示这些数据:
const calendarData = {
colors: "githubGreen",
entries: dv.pages("#锻炼").map(p => ({
date: p.file.name,
intensity: 1
}))
};
renderHeatmapCalendar(this.container, calendarData);
案例二:财务跟踪
假设你想要跟踪每天的财务支出,你可以在每日笔记中添加如下标注:
- 支出: 餐饮 50 元
然后在你的笔记中创建一个 DataviewJS 块来显示这些数据:
const calendarData = {
colors: "blue",
entries: dv.pages("#支出").map(p => ({
date: p.file.name,
intensity: p["支出"]
}))
};
renderHeatmapCalendar(this.container, calendarData);
典型生态项目
Dataview
Dataview 是一个强大的 Obsidian 插件,用于在笔记中查询和显示数据。Heatmap Calendar 插件通常与 Dataview 一起使用,以收集和显示笔记中的数据。
Obsidian CSS Snippets
Obsidian CSS Snippets 允许你自定义 Obsidian 的外观和样式。你可以使用 CSS Snippets 来进一步定制 Heatmap Calendar 的样式,例如调整空日期的背景颜色。
通过以上步骤和案例,你可以快速上手并充分利用 Heatmap Calendar 插件来可视化你的数据。希望这个教程对你有所帮助!