Obsidian 自定义文件夹、文件 Icon 详解

08 Jan, 2025

在 Obsidian 中自定义文件夹、文件 Icon 可以通过安装第三方插件实现，也可以使用 Obsidian 的 CSS snippets 功能实现，我采用的后者。

我的 CSS snippets 可以满足以下情况的 Icon 自定义：

为所有文件夹、文件配置默认 Icon
为指定文件夹、文件配置指定 Icon
为某一类文件夹配置指定 Icon（比如：可能很多文件夹内都有 Assets 子文件夹，使所有 Assets 文件夹都使用 🎒 Icon）
为指定文件夹内所有文件配置指定 Icon（比如：Blog 文件夹内的所有文件都使用 🌐 Icon）
为指定文件格式的所有文件配置指定 Icon（比如：所有 .png 文件都使用 🖼️ Icon）

本文分享的 CSS snippets 均可以在我的 GitHub Gist 中找到（欢迎 Star ⭐），至于如何使用这份 CSS snippets 文件可以参考 Obsidian 帮助文档。

原理详解

Obsidian 是基于 Electron 框架开发的，可以简单地将 Obsidian 客户端视为一个 Web 程序，使用 CSS snippets 自定义文件夹、文件 Icon 的基本原理就是通过 CSS 选择器选中文件夹、文件的 Web 元素，然后在其前面使用伪元素插入一个 Icon。

比如：

/* 全局自定义所有文件夹的默认 Icon，所有没有明确指定 Icon 的文件夹都将使用这个 Icon */
.nav-folder .nav-folder-title-content::before {
    content: "📦 ";
}

/* 全局自定义所有文件的默认 Icon，所有没有明确指定 Icon 的文件都将使用这个 Icon */
.nav-file-title-content::before {
    content: "📝 ";
}

注意：全局自定义所有文件夹、文件的默认 Icon 的代码需要放在其他自定义具体文件夹、文件 Icon 的代码之前，因为 CSS 文件的执行是从上到下且可覆盖的。

要进一步指定具体文件夹、文件的 Icon，则需要使用 div[data-path="xxx"] 这样的 CSS 选择器来选中具体的文件夹、文件，通过 data-path 的值来指定具体的文件夹、文件。

要确定文件夹、文件的 data-path 的值可以使用 Obsidian 的开发者工具调试 Web 元素来查看。使用快捷键 Option + Command + I（Windows 则使用 Ctrl + Shift + I）或者在 Obsidian 菜单栏中访问 View - Toggle Developer Tools 来调出开发者工具。

接下来特别解释两个特殊的 CSS 选择器：

为某一类文件夹配置指定 Icon

/* 所有名为 Assets 的文件夹，不管在哪个父级文件夹下，都能使用 🎒 作为 Icon */
div[data-path$="Assets"] .nav-folder-title-content::before
{
  content: "🎒 ";
}

$= 表示以 = 后的内容结尾，即 data-path 的值以 Assets 结尾。

由于 Obsidian 的多文件夹嵌套的 data-path 是包含所有文件夹路径的，所以可以使用以最后一个文件夹名结尾来选中目标元素。

为指定文件格式的所有文件配置指定 Icon

/* 所有 .png 格式的图片，都能使用 🖼️ 作为 Icon */
div[data-path$=".png"] .nav-file-title-content::before
{
  content: "🖼️ ";
}

代码逻辑同上，由于 Obsidian 文件的 data-path 是包含文件格式后缀名的，所以可以使用以指定文件格式结尾来选中目标元素。

为指定文件夹内所有文件配置指定 Icon

/* 所有 Blog 文件夹下的文件，都能使用 🌐 作为 Icon */
div[data-path^="Blog"] .nav-file-title-content::before {
  content: "🌐 ";
}

^= 表示以 = 后的内容开头，即 data-path 的值以 Blog 开头。

扩展

进一步进阶，还可以将多种 data-path 筛选条件组合，实现如「为指定文件夹中的指定文件格式的所有文件配置指定 Icon」这种操作。

比如：

/* 所有 Blog 文件夹下的所有 .png 格式的图片，都能使用 🃏 作为 Icon */
div[data-path^="Blog"][data-path$=".png"] .nav-file-title-content::before
{
  content: "🃏 ";
}

/* 所有文件名以 image 开头的文件或者所有 .png 格式的图片，都能使用 🖼️ 作为 Icon */
div[data-path^="image"], div[data-path$=".png"] .nav-file-title-content::before
{
  content: "🖼️ ";
}

#skill