使用 CSS 代码片段增强 Obsidian 视觉效果（二）

1. 概述
2. Obsidian 墙纸
3. 几个特殊标签
4. 文件浏览器和大纲窗格显示关系连线
5. 总结

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 代码片段分享给您，敬请关注。

使用 CSS 代码片段增强 Obsidian 视觉效果（二）

1. 概述

2. Obsidian 墙纸

3. 几个特殊标签

4. 文件浏览器和大纲窗格显示关系连线

5. 总结

~~~ 探索更多文章 ~~~

~ 探索更多文章 ~