目录

1. 概述

定制 Obsidian 视觉效果有两种方法，一种是使用主题 (Theme)，另一种是使用 CSS 代码片段 (CSS snippets)。

Obsidian 主题用于定义整体视觉效果，包括字体、配色、布局等。CSS 代码片段用于对当前使用的主题进行局部修改。

比如下图是两个主题视觉效果的对比。

你可以使用 Obsidian 自带的主题，也可以使用第三方制作的主题，也可以用自己做主题。GitHub 上有大量的 Obsidian 主题可供下载，感兴趣的朋友可以访问 https://github.com/topics/obsidian-theme 挑选你喜欢的主题。

不要小看 Obsidian 的 CSS 代码片段，它可是大有用处。本文我们将介绍四种视觉效果：

  • 鼠标移动到图片上图片自动放大
  • 更好看的检查框
  • 定制特定文件夹的图标
  • 更好看的标签

在其姊妹篇 使用 CSS 代码片段增强 Obsidian 视觉效果（二） 中我们介绍了另外三种视觉效果：

  • Obsidian 墙纸
  • 几个特殊标签
  • 文件浏览器和大纲窗格显示关系连线

下面我们介绍 CSS 代码片段文件的创建方法，并给出四种视觉效果的 CSS 代码片段。

2. 创建 CSS 代码片段文件

CSS 代码片段是一个 .css 文件，放在 vault/.obsidian/snippets/ 目录下。vault 是你的 Obsidian 仓库路径，比如H:\my-world-base\Obsidian-技术\。

注意

用 Obsidian 新建一个仓库的时候，vault/.obsidian/ 目录下是没有 snippets 目录的，您可以手动创建这个目录，也可以让 Obsidian 自动为您创建这个目录。

让 Obsidian 自动创建 snippets 目录步骤：

  1. 启动 Obsidian；
  2. 打开您的仓库；
  3. 点击左边侧边栏的设置按钮（齿轮图标）；
  4. 在弹出的对话框中选择外观；
  5. 点击CSS 代码片段右侧的打开代码段文件夹按钮（文件夹图标）；
  6. Obsidian 将自动在仓库的 .obsidian目录下创建 snippets 目录。

有了 snippets 目录后，您就可以在该目录下创建 CSS 文件了。CSS 文件名没有特殊要求，Obsidian 会自动发现该目录下的CSS文件。您要注意的是打开应用当前代码段开关，如下图红框处所示。

3. 几个有用的 CSS 代码片段

3.1 鼠标移动到图片上图片自动放大

效果展示：

CSS代码：

/* 作者: https://forum.obsidian.md/u/den/summary */
/* 来源: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29 */

.markdown-preview-view img {
  display: block;
  margin-top: 20pt;
  margin-bottom: 20pt;
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* experiment with values */
  transition: transform 0.25s ease;
}

.markdown-preview-view img:hover {
  -webkit-transform: scale(1.8); /* experiment with values */
  transform: scale(2);
}

3.2 更好看的检查框

Obsidian默认的检查框是方形的，可以通过 CSS 将检查框改变成圆形的。

效果展示：

CSS代码：

/* 作者: https://forum.obsidian.md/u/kepano/summary, https://forum.obsidian.md/u/rsdimitrov */
/* 来源: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */

/* Round checkbxes in preview and editor */
input[type="checkbox"],
.cm-formatting-task {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  border: 1px solid var(--text-faint);
  padding: 0;
  vertical-align: middle;
}

.cm-s-obsidian span.cm-formatting-task {
  color: transparent;
  width: 1.25em !important;
  height: 1.25em;
  display: inline-block;
}

input[type="checkbox"]:focus {
  outline: 0;
}
input[type="checkbox"]:checked,
.cm-formatting-task.cm-property {
  background-color: var(--text-accent-hover);
  border: 1px solid var(--text-accent-hover);
  background-position: center;
  background-size: 70%;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
}

3.3 定制特定文件夹的图标

在 Obsidian 中，文件夹是没有图标的。您可以使用 CSS 代码片段，让特定的文件夹显示特定的图标，从而方便您的工作。

效果展示：

CSS 代码：

div[data-path="Attachments"] .nav-folder-title-content::before
{
  content: "\1f600";
}

div[data-path="Resources"] .nav-folder-title-content::before
{
  content: "\1f33a";
}

div[data-path="Notes"] .nav-folder-title-content::before
{
  content: "\1f4cb";
}

div[data-path="Daily"] .nav-folder-title-content::before
{
  content: "\1f5d3";
}

上面代码中的字符编码与图片对应关系参见 http://www.unicode.org/emoji/charts/full-emoji-list.html。

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);
}

4. 总结

本文介绍了 Obsidian CSS 代码片段的作用和创建过程，并通过4个示例演示了 CSS 代码片段的迷人效果，希望对您有所帮助。后期我们会收集、创作更多好用的 CSS 代码片段分享给您，敬请关注。

相关博客文章
相关书籍教程文章
官方公众号

💯本站文章同步发表在官方公众号 ReadingHere，关注公众号您将在第一时间了解本站最新文章和资讯。

❤️欢迎您关注本站官方公众号 ReadingHere。

版权声明

本文由ReadingHere原创，未经ReadingHere授权不得转载、摘编。已经授权使用的，应在授权范围内使用，并注明来源： www.readinghere.com。违反上述声明者，ReadingHere将追究其相关法律责任。

交流合作

如需交流咨询或商务合作请扫描下图微信二维码联系。

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

Java Visual Studio Code PowerPoint Word CSS .NET python Markdown reStructuredText Obsidian 思维导图 知识图谱 PS Obsidian插件 lorem 软件文化 AI 图形图像