【亲测免费】 Heatmap Calendar Obsidian 插件使用教程

项目介绍

Heatmap Calendar 是一个为 Obsidian 设计的插件，用于在日历中以类似于 GitHub 活动日历的方式显示数据。这个插件非常适合用于跟踪锻炼、财务、社交时间、项目进展、爱好、恶习等方面的进度。它可以与 Obsidian Dataview 插件一起使用，也可以独立使用或与其他插件结合使用（如果你懂一些 JavaScript 的话）。

项目快速启动

安装插件

1. 打开 Obsidian 应用。
2. 进入 设置 > 社区插件。
3. 点击 浏览，搜索 Heatmap Calendar。
4. 点击 安装。
5. 安装完成后，点击 启用。

配置和使用

1. 数据标注：在你的每日笔记中标注你想要跟踪的数据（参考 Dataview 标注文档）。
2. 创建 DataviewJS 块：在你想要显示 Heatmap Calendar 的地方创建一个 DataviewJS 块。
3. 收集和显示数据：使用 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 插件来可视化你的数据。希望这个教程对你有所帮助！