1. 概述
使用 CSS 代码片段增强 Obsidian 视觉效果(一) 一文描述了 Obsidian CSS 代码片段的作用和创建过程,并介绍了4种 CSS 效果:
本文将介绍3种新的 CSS 效果:
- Obsidian 墙纸
- 特殊标签
- 文件浏览器和大纲窗格显示关系连线
2. Obsidian 墙纸
本方法已不再推荐。如果想为 Obsidian 设置墙纸,请使用 Obsidian 动态背景和墙纸插件,详情见本站的另一篇文章 Obsidian 动态背景插件 (Dynamic Background Plugin) 的安装与使用。
下面介绍的方法与 Obsidian 动态背景插件有冲突,如果您已经使用了下面的方法为 Obsidian 设置了墙纸,同时又想使用 Obsidian 动态背景插件,解决方法为:从您的 Obsidian CSS 代码片段文件中移除下面介绍的 CSS 代码。
Obsidian 的编辑区和预览区可以通过 CSS 进行美化,比如使用自己喜欢的图片作为背景。要实现这个功能也很简单,下面先看看效果。
Obsidian 黑暗主题的墙纸效果展示
Obsidian 明亮主题的墙纸效果展示
CSS 代码
.workspace-split.mod-root .view-content{
background:transparent;
}
div.workspace > div.mod-root{
background:url("app://local/E:/images/dark-moon.jpg");
background-size: cover;
background-position: center;
}
请将上面 CSS 代码中的 app://local/E:/images/dark-moon.jpg
里的图片 E:/images/dark-moon.jpg
替换为您本地图片的全路径文件名,路径中的斜杠请使用反斜杠 /
。
如果您喜欢示例中的墙纸图片,可从本站下载:黑暗模式墙纸、明亮模式壁纸。
3. 几个特殊标签
随着 Obsidian 使用时间增长,笔记的数量会越来越多。这个时候你可能会关心几个问题:
- 哪些笔记是重要的?
- 哪些笔记还没有开始写?
- 哪些笔记正在编写中?
- 哪些笔记已经完成了?
为此我们增加4个标签用于标注笔记的重要性和进度。这4个标签是:1)重要(大红色背景),2)未开始(蓝色背景),3)进行中(青色背景),4)完成(绿色背景)。
效果展示
CSS 代码
.tag:not(.token) {
background-color: var(--text-accent);
border: none;
color: white;
font-size: 11px;
padding: 1px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 0px 0px;
cursor: pointer;
border-radius: 14px;
}
.tag:not(.token):hover {
color: white;
background-color: var(--text-accent-hover);
}
.tag[href^="#重要"] {
background-color: red;
}
.tag[href^="#未开始"] {
background-color: blue;
}
.tag[href^="#完成"] {
background-color: green;
}
.tag[href^="#进行中"] {
background-color: darkcyan;
}
您也可以根据需要创建自己的特殊标签。
4. 文件浏览器和大纲窗格显示关系连线
文件浏览器和大纲窗格在最新的 Obsidian 中还是没有显示关系连线,在以后的升级中 Obsidian 有可能会增加这个功能,因为当文件浏览器中的文件很多的时候,或者大纲窗格显示的笔记标题级别很多的时候,关系连线能够帮助我们快速看清元素之间的关系。在 Obsidian 官方还没有提供这个功能前,我们先用几句 CSS 享受这个功能。
效果展示
CSS 代码
.outline .tree-item-children {
margin-left: 20px;
border-left: 1px solid var(--background-modifier-border);
border-radius: 4px;
transition: all 0.5s ease-in-out;
}
.nav-folder-children .nav-folder-children {
margin-left: 20px;
padding-left: 0;
border-left: 1px solid var(--background-modifier-border);
border-radius: 4px;
transition: all 0.5s ease-in-out;
}
5. 总结
本文介绍了3个使用 CSS 实现的 Obsidian 视觉效果:Obsidian 墙纸、特殊标签、 文件浏览器和大纲窗格显示关系连线,希望对您有所帮助。后期我们会收集、创作更多好用的 CSS 代码片段分享给您,敬请关注。
💯本站文章同步发表在官方公众号 ReadingHere,关注公众号您将在第一时间了解本站最新文章和资讯。
❤️欢迎您关注本站官方公众号 ReadingHere。
本文由 ReadingHere 原创,未经 ReadingHere 授权不得转载、摘编。已经授权使用的,应在授权范围内使用,并注明来源: www.readinghere.com。违反上述声明者,ReadingHere 将追究其相关法律责任。