橘子树下

学习园地

0%

【Obsidian】农历日历插件Dust Calendar美化

发表于 分类于 Valine：

需求

Dust Calendar是Obsidian的日历插件。更符合中国习惯的日历插件，支持同时显示公历、农历、星期、节气、节假日、调休等信息。 但是默认的界面与我的整体工作区不太协调。 需要进行定制美化。

插件安装

官网:dust-obsidian-calendar: obsidian 日历插件

从 Obsidian 的社区插件来安装

  1. 打开 设置/第三方插件；
  2. 关闭 安全模式；
  3. 点击 浏览 按钮来查看第三方插件市场；
  4. 输入搜索：Dust Calendar；
  5. 点击 安装 按钮；
  6. 一旦安装成功，先关闭当前社区插件窗口，然后在已安装插件列表下激活刚安装的插件；

手动安装

  1. 下载 latest release；
  2. 解压并提取 dust-obsidian-calendar 文件夹，然后放到你 Obsidian 库中的插件目录中 <仓库根目录>/.obsidian/plugins/ （注意： .obsidian 文件夹可能被隐藏了，我们需要先将该文件夹展示出来）
  3. 打开 设置/第三方插件，启用该插件。

实现

在 .obsidian\snippets目录下新建 css 文件。如：【日历】dust-calendar.css，写入以下内容。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* dust-obsidian-calendar-plugin */
/* https://github.com/a-nano-dust/dust-obsidian-calendar */


.d-hover-bg-color-base-50:hover {
  color: #5CB3CC;
  font-weight: bold;
}

.d-color-base-100 {
  color: #5CB3CC;
  font-weight: bold;
}

.d-bg-color-blue {
  font-weight: bold;
  color: #5CB3CC;
  background-color: rgba(var(--table-color-rgb), 0.9) !important;	
}

div.calendar-view-body {
  gap:1px;	
}

div.calendar-view-body div.calendar-view-row:nth-child(1) {
  border-bottom: 2px solid #5CB3CC;
  margin-bottom: 1px;
}

div.calendar-view-body div.calendar-view-row:nth-child(2) {
  background-color: rgba(var(--table-color-rgb), 0.1) !important;
}

div.calendar-view-body div.calendar-view-row:nth-child(3) {
  background-color: rgba(var(--table-color-rgb), 0.2) !important;
}

div.calendar-view-body div.calendar-view-row:nth-child(4) {
  background-color: rgba(var(--table-color-rgb), 0.3) !important;
}

div.calendar-view-body div.calendar-view-row:nth-child(5) {
  background-color: rgba(var(--table-color-rgb), 0.4) !important;
}

div.calendar-view-body div.calendar-view-row:nth-child(6) {
  background-color: rgba(var(--table-color-rgb), 0.5) !important;
}

div.calendar-view-item.d-bg-color-blue {
  box-shadow: 0 0 5px var(--text-accent);	
  background-color: rgba(var(--table-color-rgb), 0.9) !important;		
}
我的主题用的是Blue Topaz, 所以部分颜色变量使用了其预定义好的值。如每行的背景色选用了var(--table-color-rgb),并根据透明度（0.1-0.9)不同来区别。为了整体风格统一，对于表头下线及选中日期均使用色号#5CB3CC，可以自己调整这些配置。

效果对比

默认 美化后