【DataviewJS】分享一种好看的月历做法（年度回顾笔记用）

经验分享
1

起因是最近在做 Obsidian 里的年度笔记。
想要在笔记里展示各个月份，方便点进每个月的月度笔记。

一开始直接写的链接，像是这样：

上半年：[[2024年1月|1月]] [[2024年2月|2月]] [[2024年3月|3月]] [[2024年4月|4月]] [[2024年5月|5月]] [[2024年6月|6月]]
下半年：[[2024年7月|7月]] [[2024年8月|8月]] [[2024年9月|9月]] [[2024年10月|10月]] [[2024年11月|11月]] [[2024年21月|12月]]

有两个问题：

  1. 写起来麻烦，要自己一个个写
  2. 丑

所以稍微折腾了一下，用 Dataview 做了个更好看的月历，效果如图：

image
image1181×967 31.1 KB

这是按钮（其实是链接）实际交互起来的演示：
240629_分享一种好看的月历做法-img-240629_212910

每个月份笔记本质上都是个链接，所以可以直接显示悬浮预览/浮动编辑窗，或是右键用不同方式打开：
image

注：依赖插件 Dataview
这个东西用了 Dataview 插件，并且需要开启 Dataview 插件里的 JS 代码功能（Enable Javascript Queries）
不会有人用 OB 不装 DV 吧

制作方法

其实非常简单，大概是两个步骤：

  1. 粘贴下面的 Dataview js 代码片段，并根据自己的笔记情况修改几个参数
  2. 添加 css 样式

Dataview js 代码

// 0. 从当前文件获取年份，或者直接填写变量
let year = dv.current().year || 2024

// 1. 这里是你的月份笔记的基础路径
const baseFolder = `PeriodicNote/Monthly/${year}年`

// 当前月份的前缀和后缀
let prefix = ""
let suffix = ""

let content = ""

for (let i=0; i < 12; i++) {
  let monthNum = i+1
  let monthName = `${monthNum}月`

  let cssClasses = "internal-link monthly-btn ready"

  if (monthNum == dv.func.dateformat(dv.date('now'), "M")) {
    monthName = `${prefix}${monthName}${suffix}`
    cssClasses += " current-month"
  }

  // 2. 这里是你的月份笔记的路径
  const monthlyNote = `${baseFolder}/${year}年${monthNum}月/${year}年${monthNum}月`

  let isExist = app.vault.getAbstractFileByPath(monthlyNote+".md")
  if (!isExist) {
    cssClasses += " not-exist"
  }

  content += `<a class="${cssClasses}" href="${monthlyNote}">${monthName}</a>`

  if (i % 3 === 2) {
    // content += "  <br>"
    dv.el("div", `<div class="breadcrumbs-wrapper"> ${content} </div>`);
    content = ""
  }
}

粘贴这一段之后，你应该就能看到基本的视图了。
image

丑丑的，缩成一团。
但是别担心，之后我们会用 css 来美化它。

首先要解决的问题是：这些链接都还是无效的。
你需要修改几个地方让它们能指向实际的月度笔记路径。

年份

// 0. 从当前文件获取年份，或者直接填写变量

你有两种办法指定年份，其一是在当前笔记添加一个 year 属性，并填写当前的年份。

image
image803×543 23.4 KB

其二是直接写在代码里，修改 || 后面的数字即可：

// 0. 从当前文件获取年份，或者直接填写变量
let year = dv.current().year || 2066

两种办法的区别是：
前者可以直接复制这个代码片段到任何笔记里，自动读取笔记的年份属性（比如每年的年度笔记都可以用这份代码）；而后者则需要自己手动修改代码里的年份变量。

文件夹

// 1. 这里是你的月份笔记的基础路径

在这个位置把 baseFolder 修改成你的月份笔记的基础路径，其中 ${year} 代表你在属性里填写的年份。

比如文件夹如果是 月度笔记/2024年/就写成：

// 1. 这里是你的月份笔记的基础路径
const baseFolder = `月度笔记/${year}`

文件名

// 2. 这里是你的月份笔记的路径

这个位置则是修改你实际的月度笔记完整路径，其中 ${year} 和 ${monthNum} 会被替换成实际的年份和月份，然后 ${baseFolder} 就是上面填写的那个基础路径。

比如完整路径如果是 月度笔记/2024年/1月.md，这里就写成：

  // 2. 这里是你的月份笔记的路径
  const monthlyNote = `${baseFolder}/${monthNum}月`

这样改完之后，每个笔记应该都能正确工作了。
你可以点击按钮打开某个笔记，或者鼠标停在上面来查看悬浮预览。

CSS 样式

接下来是美化时间！

粘贴以下 CSS 片段到你的 css snippets 内：

/* 月历按钮美化.css */

/* 整体布局 */
.breadcrumbs-wrapper {
  display: flex;
  justify-content: space-around;
  margin-bottom: 25px;
  height: 48px;
}

/* 每月按钮做的样式 */
.ready.monthly-btn {
 display: inline-block;
 padding: 0.18rem 1.8rem;
 /*font-size: 16px;*/
 font-weight: 500;
 color: var(--text-normal);
 border: 3px solid var(--color-accent);
 cursor: pointer;
 position: relative;
 background-color: transparent;
 text-decoration: none;
 overflow: hidden;
 z-index: 1;
 font-family: inherit;

/*固定按钮大小并居中文本*/
 width: 6em;
 text-align: center;

 transition: color .3s;
}

/* 当前月份的按钮的特殊样式 */
.ready.monthly-btn.current-month {
  color: var(--text-accent-hover) !important;
}

/* 尚未创建按钮的特殊样式 */
.ready.monthly-btn.not-exist {
  color: var(--text-muted) !important;
}

/* 浮动的效果 */
.ready.monthly-btn::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: var(--color-accent);
 transform: translateX(-100%);
 z-index: -1;
  
 transition: all .3s;
}

.ready.monthly-btn:hover {
 color: var(--background-primary) !important;
}

.ready.monthly-btn:hover::before {
 transform: translateX(0);
}

关于 CSS 片段
如果你不知道啥是 css 片段，参考文档：PKMer_Obsidian 的 CSS 代码片段

如果你不喜欢这个样式，也可以去类似 零代码 - 精美CSS样式库 这样的网站找到自己喜欢的样式，然后替换上面的 CSS 片段。

例如找到一个想要的按钮，复制它的 css 片段：

image
image842×679 21.5 KB

然后将片段里的 button 都替换成 .ready.monthly-btn 就可以了！

特别说明

这段代码的最初灵感——以及排列的样式——都来自木一 Benature 的示例库！

image
image761×198 21.7 KB

（日记里的前后按钮）

木一大佬的示例库让我学到了炒鸡多，感兴趣的话也可以前去查看：
Benature/obsidian-sample-vault

6 个赞