在Obsidian的默认主题中，没有图标来区分左侧文件目录的文件夹和文件，虽然不影响使用，但是体验过于乏味。Obsidian提供了自定义CSS的方式来控制样式，生命不息，折腾不止，我们来试一试吧！

在 Obsidian 文件夹里的 .obsidian 里新建一个 snippets 文件夹，再新建一个CSS文件，文件的命名没有限制，但是为了规范，尽可能准确一些，叫做 custom-icons-files-and-folders.css。在 Obsidian 的设置里面启用CSS文件，如下图所示：

接下来填充 custom-icons-files-and-folders.css 的内容。

/* 文件样式 */
.nav-folder-children .nav-file-title-content:first-child::before {
  content: 此处填写图标地址;
  margin: 0px 5px 0px 0px;
}

/* 文件夹样式 */
.nav-folder-children .nav-folder-title-content::before {
  content: 此处填写图标地址;
  margin: 0px 5px 0px 0px;
}

其中 content 是图标的地址或者值， margin 用来控制图标与文字的间距。

通过网站 https://remixicon.com/ 搜索合适的图标，比如输入“text”会出现文本文件的图标。选择喜欢的图片，设置大小和颜色，点击下载SVG文件。我选择的是 12 px 和 蓝黑色，如下图所示：

用记事本打开下载的文件 file-txt-line.svg，复制全部的文本内容。通过 https://yoksel.github.io/url-encoder/ 网站，将SVG源文件转码成CSS文件可用的值，如下图所示：

在 Insert SVG 框中输入SVG内容，在 Ready for CSS 框中获得转码后的文本，将文件填充在 content 的后面，如下所示：

.nav-folder-children .nav-file-title-content:first-child::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M21 8v12.993A1 1 0 0 1 20.007 22H3.993A.993.993 0 0 1 3 21.008V2.992C3 2.455 3.449 2 4.002 2h10.995L21 8zm-2 1h-5V4H5v16h14V9zM8 7h3v2H8V7zm0 4h8v2H8v-2zm0 4h8v2H8v-2z' fill='rgba(52,72,94,1)'/%3E%3C/svg%3E");
  margin: 0px 5px 0px 0px;
}
.nav-folder-children .nav-folder-title-content::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M4 5v14h16V7h-8.414l-2-2H4zm8.414 0H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2z' fill='rgba(52,72,94,1)'/%3E%3C/svg%3E");
  margin: 0px 5px 0px 0px;
}

以上这段CSS文件是真实可用的，嫌麻烦的同学可以直接复制内容使用，最终呈现的效果如下所示：

如果没有生效，按Ctrl+Shift+i打开Chrome调试工具查看CSS的渲染情况，如下图所示：

有些同学可能对CSS中使用SVG比较陌生，有必要科普一下。SVG是一种基于XML的矢量图形格式，用于在Web和其他环境中显示各种图形，它可通过CSS或JavaScript进行操作。SVG是基于矢量的，所有在放大图形时不会出现任何降低或丢失保真度的情况，这使得它非常适合多语境场景，例如响应式Web设计。

另外，为什么Obsidian支持开启Chrome的调试器呢？

Obsidian是采用Electron开发的，Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序，底层基于 Node.js 和 Chromium。当Google于2008年首次推出Chrome时，发布了开源项目Chromium源代码，Chrome是基于Chromium开发的。Obsidian自然支持Chrome的调试工具。

本文链接：https://www.codingbrick.com/archives/1020.html
特别声明：除特别标注，本站文章均为原创，转载请注明作者和出处倾城架构，请勿用于任何商业用途。