obsidian 首页制作辅助笔记总结回顾

记笔记最重要的是回顾与总结，有这么一款插件可以让我们自己搭建一个美观的首页，它包括热力图、文稿统计、文稿回顾等等功能，你是否愿意尝试呢？

今天就介绍一款插件，能快速制作笔记首页，辅助总结、回顾。

效果预览

先看最终效果。

上面就是利用免费的 components 插件创作首页中的一部分，它的功能远不止于此，下面进行简要的介绍。

插件

Contribution-graph
Components

插件简介

Components 免费版支持 14 组件，包括数据视图、计数、正计时、倒计时、时间进度、时钟、摘录、按钮、打卡、dataview、图表、markdown、组合、自定义卡片。加上 Contribution-graph 的热力图其实算是 15 种。

每一个组件除了单独的设置外，都包括有三种展示样式：分栏、标签页、垂直标签页，适合不同的组件进行多样化的组合。而且样式颜色均可以自定义，UI 设计简洁大方，真的非常棒了。

组件内容

组件介绍

热力图

安装好 Contribution-graph 插件后，右键新建热力图即可，可以选择自己喜欢的颜色。看着自己的创作热力图，每天也是动力满满，我也计划在个人博客添加一个类似的组件。

类GitHub热力图

每日打卡

每日打卡预览
可以多个任务，且打卡有渐变色可选择。

编辑过程：选择打卡组件-修改名称-添加任务-打卡记录方式改为标题属性。

正计时、倒计时、时钟

三个组件设置简单，通过分栏的展示形式更加美观。

时间组

图表

图表是筛选文件夹、标签等方式形成自己想要的文件组成。推荐用垂直标签页展示，这样更宽一点。

计数

计数的逻辑和图表一样也是筛选结果展示，可以展示文稿总数、某个标签，或者某个时间段，某个文件夹下的数量。

可以用作笔记回顾。比如当我们点击想法时就会跳转到包含想法的文件。还包括搜索框，这个功能可以说相当的哇塞。

摘录

摘录可以从筛选条件中随机提取文章，分为全文和块展示，可以做回顾，做每日格言，与weread插件组合可以做书籍阅读的随机回顾。

自定义卡片

用这个在 obsidian 居然可以做一个导航页。设置好动作和链接，就可以做导航页了。可惜和 itab 功能重合了，而且不能分享给大家使用，要不我高低得搭建一个自己的导航页。

Dataview

Dataview 让你找到在 obsidian 中使用 SQL 的感觉，这个组件甚至可以使用变量。有很多大佬用 dataview 做出很多好玩的东西，也是回顾、总结、联系笔记的好工具。而且会推动我们好好设置文章的属性信息。

Dataviewjs 实现随机回顾

组件不仅可以使用 dataview 还可以是，使用 dataviewjs，利用 Dataviewjs 代码随机回顾笔记，帮助我们回顾知识点，本文用作每日格言。将凯文凯利的《宝贵的人生建议》中 500 条人生建议，添加标签，用 Dataviewjs 生成 3 条每日格言。
查询代码参考少数派@西西弗的神话的《Obsidian 随机生成读书笔记片段》，最终效果如下：

Dataviewjs 代码如下

//使用时修改关键词即可
const term = "#语录"
const files = app.vault.getMarkdownFiles()
const arr = files.map(async ( file) => {
const content = await app.vault.cachedRead(file)
const lines = content.split("\n").filter(line => line.contains(term))
return lines
})function generateArray (start, end) { return Array.from(new Array(end + 1).keys()).slice(start) }Promise.all(arr).then(values => {//不包含本文件let noteArr = values.flat().filter(note => !note.includes("const term ="))//生成一个连续数值的数组let arrNum = generateArray(0,noteArr.length-1)let result = [ ]let ranNum = 3for (let i = 0; i < ranNum; i++) {var ran = Math.floor(Math.random() * (arrNum.length - i))result.push(arrNum[ran])arrNum[ran] = arrNum[arrNum.length - i - 1]}for(let i=0; i< result.length;i++){let j = result[i]dv.paragraph(`${noteArr[j]}`)}
})

使用时记得启用 dataview 插件和 dataviewjs 功能。

数据视图

通过筛选文件夹、文件标签等信息，用表格、画册等方式展现笔记，和之间介绍的 projects 插件很像，这里不重复介绍。

设置页面全宽

通过 CSS + 文档属性的方式设置页面全宽。

在 .obsidian/snippets 文件夹下新建 editor-full.css 文件。内容如下

.editor-full {--file-line-width: 95vw;--line-width: 95vw;--container-img-width: 100%;--table-wrapper-width: 100%;
}

在 obsidian 设置-外观，找到 CSS 代码片段配置项，点击刷新按钮，此时就会看到 editor-full 这个配置项，将其启用

在想要设置页面全宽的文章中设置属性，cssclasses ：editor-full。启用页面全宽。
可以根据个人习惯决定是否设置全宽。

说明

这个插件有详细的说明文档，使用过程和记录过程都是参考的文档中的描述，大家可以对照文档去尝试，使用过程中，组件添加过多，电脑会很卡，建议少用几个组件，重心放在笔记的梳理、回顾、总结上。

插件下载地址

Components

obsidian-components/obsidian-components-release: Obsidian missing components (github.com)
Contribution-graph

vran-dev/obsidian-contribution-graph: generate interactive gitxxx style contribution graph for obsidian, use it to track your goals, habits, or anything else you want to track. (github.com)

点击 releases 下载复制到 obsidian 插件目录下即可。