【CSS_Snippet】文件树图标

给文件列表(文件树)中的文件夹和文件设置 emoji 图标,方便快速识别。默认都是文字,没有视觉锚点。

有插件可以完成这个操作,但是在我的环境下有时候会有冲突,而且其他功能我也用不上,还是自己写一个样式用起来更加安逸。

每个人的需求不同,所以本页提供了一个代码生成器,用来生成个性的 CSS Snippet。

使用说明

  • 默认图标是指对于没有单独设置的文件夹设置 📁 和 📂 图标,未设置图标的文件使用 📄 图标。
  • 模糊匹配是匹配路径尾部,即只写文件夹/文件名称也可以,这时候同名文件夹可以获得相同的图标。
  • 输入框内一行一条定义,接受两种定义格式:
    • "路径" "emoji"
    • [emoji](路径)
  • 对于定义使用松散匹配,第一对双引号或小括号中的内容作为路径,第二对双引号中提取第一个 emoji 作为图标。
  • 由于 emoji 数量庞大,很难完整匹配,如果有个别处理出错,则严格按照上面格式书写,即不依靠本程序自行提取。

使用技巧

  • 可以直接到设定文件图标的插件文件夹找到 data.json 文件,将相关行直接复制过来
  • 对于文件可以在笔记中创建链接,然后在链接标题中添加 emoji 的方法创建规则
  • 对于文件夹,可以右键文件夹——Search in folder(在此文件夹中搜索),然后复制搜索框中内容用来创建规则

规则示例

其他文字什么的完全不影响呢~
你可以用代码块右上角的按钮复制这些内容到下面试一下哦~
[📥Inbox](000_Inbox),
[🏠Home](Start.md),
两种书写方式混合使用也完全没有关系的
"900_Resource": "🧰资源文件夹",
"200_Life": "🌱生活文件夹"
path:"100_Note/" "📓"
所以完全可以随便弄一篇笔记或者什么文件来登记这些信息,整篇内容复制过来就可以生成对应样式了。
一般设定好之后就很少修改了吧,所以也不算很麻烦呢

文件树图标样式片段生成器

File tree Emoji icon generator
©2022~2024 稻米鼠. Last build at 2024-06-16 00:00:21