【Obsidian样式】多彩便笺背景

参考双语文档的中英文视图切换显示的方法,用 cssclasses+quickadd 来控制笔记样式,采用 Obsidian 自带的 cssclasses 属性,设置对应 Snippets,通过 QuickAdd 脚本及 Commander 插件设置按钮,实现以下效果,模拟切换笔记背景的便笺:
2024-04-16_Obsidian样式-多彩便笺背景_IMG-1

QuickAdd Macro脚本
const activeFile = app.workspace.getActiveFile();
const choices = ["默认视图", "YellowNote", "GreenNote", "PinkNote","PurpleNote","BlueNote","BlackNote"];

const quickaddApi = app.plugins.plugins.quickadd.api;
const choice = await quickaddApi.suggester(choices, choices);

await app.fileManager.processFrontMatter(activeFile, fm => {
if (!fm["cssclasses"]) fm["cssclasses"] = [];
// 清除所有选项
fm["cssclasses"] = fm["cssclasses"].filter(item => !choices.includes(item));

// 根据选择的选项添加对应的视图
for (let i = 1; i < choices.length; i++) {
  if (choice === choices[i]) {
	fm["cssclasses"].push(choices[i]);
	return;
  }
}
});
console.log("运行完成");
Obsidian Snippets
.view-content:has(> .YellowNote) {
  --background-primary: rgb(255, 247, 209) !important;
}

.view-content:has(> .GreenNote) {
  --background-primary: rgb(228, 249, 224);
}

.view-content:has(> .PinkNote) {
  --background-primary: rgb(255, 228, 241);
}

.view-content:has(> .PurpleNote) {
  --background-primary: rgb(242, 230, 255);
}

.view-content:has(> .BlueNote) {
  --background-primary: rgb(226, 241, 255);
}

.view-content:has(> .BlackNote) {
  --background-primary: rgb(105, 105, 105);
  --text-faint: rgb(255, 255, 255);
  --text-normal: rgb(255, 255, 255);
  --checklist-done-color: rgb(255, 255, 255);
}
3 个赞

做个一个小库,可以体验一下:
PixPin_2024-04-20_18-32-35

1 个赞

设置了一下Commander悬浮按钮,参考了Things主题的按钮:
PixPin_2024-05-15_15-33-41

1 个赞

不知道怎么操作的,就导致便签删除了,但这个窗口每次都打开,也删除不了,关闭不了

个人建议,点删除按钮,如果文件不存在就直接关闭窗口;如果就剩最后一个窗口了就新建一个标签或者如果当前窗口为空,新建标签在本窗口,而不是新窗口。

1 个赞

嗯,好的,不过我不清楚脚本能不能实现到这一步,到时候研究下

1 个赞

哈哈,相信你可以 :muscle:

文件不存在就直接关闭窗口,这个好实现。

只剩最后一个窗口本窗口中新建,如果不好实现,可以变通下,比如:可以先关闭本窗口,再新创建一个新窗口。 :grinning:

另外发现,置顶窗口有时有有时没有;还有好像第一个被打开的是主窗口,关闭主窗口全关闭,有时候分不清哪个是主窗口会有点困惑。不知是否可以隐藏主窗口,增加退出按钮实现退出软件。

嗯 照你这么说方案一应该就可以实现