【Obsidian样式】修改文件夹名称和文件名称前的图标

2023-11-03

声明:本文大部分内容来自于https://www.bilibili.com/read/cv17822164/

方法一:Obsidian Icon Folder插件

Github:https://github.com/FlorianWoelki/obsidian-icon-folder
使用方法Github写的很详细了,可以看Github。但是这个插件我觉得不太方便的一点是:每次创建一个新的文件夹,就得手动设置一遍icon,我感觉太麻烦了。我希望的效果是:

每次创建了文件夹、文件、或者是一些特定文件比如图片、pdf等,文件名旁边自动添加上我预设的图标。

所以我就采取了原文中的方法二。

方法二:CSS Snippets

提示:要使用这个方法,你最好要懂一点CSS哦,不然可能不知所以然的话出现了bug比较难定位。

首先上效果图:
在这里插入图片描述

CSS Snippets

Obsidian它本身是把Web做成了app的形式,所以你按ctrl+shift+i快捷键的时候,会看到经常在网页中看到的开发者工具。
那既然是Web的话,就可以用css样式修改某个html元素的样式。Obsidian提供了一个叫CSS Snippets(中文叫“CSS代码片段”)的功能。
在这里插入图片描述
点击上图所示的文件夹图标,就可以打开一个文件夹,这里面可以存放若干个自定义的css文件,如下图:
在这里插入图片描述
创建好的文件会同步到obsidian中,点击switch按钮即可使这个css文件生效。

CSS修改图标

这里主要总结一种从原文中学习到的方法:通过给伪元素::before设置svgcss代码来设置图标的方式,如下图:
在这里插入图片描述
所以我们的目标是:通过一个svg文件,得到这样一串css代码,然后复制到伪元素::beforecontent属性中即可。根据原文内容,总结步骤如下:

修改svg图标样式:

  1. 准备好要用的svg图标,图标可以在如https://remixicon.com/的网站上找
  2. 下载软件inkscapehttps://inkscape.org/
  3. svg文件导入到inkscape
  4. 在软件中,修改大小、颜色等等,调整成自己喜欢的样式。我自己主要调了这么几个参数:
    • 文档的宽高16×16(文档属性可以通过ctrl+shift+d打开)
    • 图标的宽高12×12
    • 图标的颜色
  5. 导出为svg文件

svg标签转换为css代码:

  1. 在导出的文件中,复制<svg></svg>部分,用这个网站svg标签转换成css代码
  2. 将转换好的的css代码复制下来粘贴即可

最后附上我自己的css文件。文件名:custom-icons-differing-files-and-folders.css,文件内容:

/* 文件图标 */
.nav-folder-children .nav-file-title-content:first-child::before {
    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' width='16' height='16' version='1.1' id='svg16' sodipodi:docname='file-text-line.svg' inkscape:version='1.2.1 (9c6d41e410, 2022-07-14)' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs20' /%3E%3Csodipodi:namedview id='namedview18' pagecolor='%23ffffff' bordercolor='%23000000' borderopacity='0.25' inkscape:showpageshadow='2' inkscape:pageopacity='0.0' inkscape:pagecheckerboard='0' inkscape:deskcolor='%23d1d1d1' showgrid='false' inkscape:zoom='9.8333333' inkscape:cx='-9.7118644' inkscape:cy='12.152542' inkscape:window-width='1600' inkscape:window-height='978' inkscape:window-x='-6' inkscape:window-y='-6' inkscape:window-maximized='1' inkscape:current-layer='svg16' /%3E%3Cpath fill='none' d='M 0,0 H 24 V 24 H 0 Z' id='path12' /%3E%3Cpath d='m 13.305071,7.532204 v 7.7958 a 0.55555485,0.60000001 0 0 1 -0.551665,0.6042 H 3.8567512 a 0.55166596,0.59580001 0 0 1 -0.551666,-0.5952 V 4.5274034 c 0,-0.3222 0.249444,-0.5952 0.556666,-0.5952 H 9.9700765 Z M 12.193962,8.1322036 H 9.4161889 V 5.1322034 H 4.4161942 V 14.732204 H 12.193962 Z M 6.0828592,6.9322038 H 7.7495235 V 8.1322036 H 6.0828592 Z m 0,2.4000006 H 10.527298 V 10.532204 H 6.0828592 Z m 0,2.3999996 h 4.4444388 v 1.200001 H 6.0828592 Z' id='path14' style='fill:%23b2b2b2;stroke-width:0.57735;fill-opacity:1' inkscape:transform-center-x='0.31779677' inkscape:transform-center-y='-0.22881331' /%3E%3C/svg%3E%0A");
	margin: 0 5px 0 0;
	padding: 0 0 0 2px;
}

/*文件夹图标 */
.nav-folder-children .nav-folder-title-content::before {
	content: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' version='1.1' id='svg8' sodipodi:docname='dark-folder-01.svg' width='16' height='16' inkscape:version='1.2.1 (9c6d41e410, 2022-07-14)' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs12' /%3E%3Csodipodi:namedview id='namedview10' pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1.0' inkscape:showpageshadow='2' inkscape:pageopacity='0.0' inkscape:pagecheckerboard='0' inkscape:deskcolor='%23d1d1d1' showgrid='false' inkscape:zoom='9.8333333' inkscape:cx='2.4915254' inkscape:cy='12.050847' inkscape:window-width='1600' inkscape:window-height='978' inkscape:window-x='-6' inkscape:window-y='-6' inkscape:window-maximized='1' inkscape:current-layer='svg8' /%3E%3Cpath d='M 8.2691,5.6 H 13.85 c 0.358985,0 0.65,0.2910148 0.65,0.6499999 V 15.349999 C 14.500001,15.708984 14.208985,16 13.85,16 H 2.1500002 c -0.3589855,0 -0.6500006,-0.291016 -0.65,-0.650001 V 4.95 c 0,-0.3589851 0.2910149,-0.65 0.65,-0.65 h 4.8190999 z' id='path4' style='stroke-width:0.65;fill:%23b3b3b3;fill-opacity:1' sodipodi:nodetypes='csscsscsscc' /%3E%3C/svg%3E%0A");
	margin: 0 5px 0 0;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【Obsidian样式】修改文件夹名称和文件名称前的图标 的相关文章

  • 链接到页面上的不同区域

    这似乎是一个愚蠢的问题 但是 所以我想做的是设置一个菜单部分 这样当用户单击该部分的标题时 它会将他们发送到页面上的特定位置 而无需向下滚动 我不完全确定这将如何运作或实现起来有多复杂 所以基本上我会 Menu 第一项 作为链接 第二项 作
  • 如何使用 jquery 规则验证我在文本框中输入的年份?

    我有一个 HTML 文本框
  • Javascript 像素操作:这些不是我的颜色

    我知道类似的问题已经被问过好几次了 但我还没有找到我想要的东西 我正在将图像读入画布对象 在 JavaScript 中 并尝试操作一些特定的像素 例如 我正在寻找颜色 RGB 224 64 102 并尝试将其更改为其他颜色 我可以将灰度应用
  • 如何使用简单的CSS创建向上箭头向下箭头

    请找到这个CSS类来创建简单的向上箭头 向下箭头 向左箭头和向右箭头
  • 使用 jQuery 切换 2 个 div 的位置

    我想知道是否可以使用 jQuery 切换两个 div 的位置 我有两个像这样的div div class div1 STUFF ONE div div class div2 STUFF TWO div so if div2有内容 或不仅仅包
  • 如何将CSS应用于iframe?

    我有一个简单的页面 其中有一些 iframe 部分 用于显示 RSS 链接 如何将主页中相同的 CSS 格式应用到 iframe 中显示的页面 Edit 这不能跨域工作 除非有适当的CORS 标头 https developer mozil
  • 重置 JQuery 表单验证

    我在类别表单填写上使用了 Jquery 表单验证 该表单由模式弹出 当用户将表单设为空白并点击 保存 时 触发 JQuery 验证错误 Now if user close this modal Not page refresh and op
  • 您可以使用 event.target 定位元素父元素吗?

    我正在尝试将页面的innerHTML 更改为我单击的元素的innerHTML 唯一的问题是我希望它采用整个元素 例如 section class homeItem div div section 而我用 Javascript 编写的代码 f
  • 使用CSS调整div以填充父容器的宽度[重复]

    这个问题在这里已经有答案了 我有一个容器宽度为 100 的页面 因此它是屏幕的整个宽度 我在网格结构中有几个 DIV 它们都有 float left 且没有设置宽度 只有 10px 的边距 有没有一种方法 使用 CSS 或 jQuery 让
  • 当flex-wrap是wrap的时候,flex-shrink还有用吗?

    我不认为flex shrink and flex wrap wrap 在一起有意义 但我想知道我是否遗漏了一些东西 container background DDD width 300px height 100px padding 20px
  • 当 AutoGenerateColumns="true" 时动态设置 gridview 列的宽度

    当我使用属性 AutoGenerateColumns 为 AutoGenerateColumns true 时 我在设置 gridview 的宽度时遇到问题 gridview 是在代码后面进行数据绑定的 如果我使用 gridview1 co
  • Font Awesome 5 - 动画齿轮,如何排列不同的图标?

    我正在尝试以一种非常特殊的方式排列字体真棒动画齿轮 如下图所示 我已经创建了一个我似乎能够得到的最接近的小提琴 小提琴在这里https jsfiddle net rke45798 13 https jsfiddle net rke45798
  • 如何并排展开和折叠三个div?

    document ready function toggle click function if this data name show sidebar animate width 10 hide map animate width 89
  • 单击

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我知道如何用 jquery 做到这一点 但我被 React 困住了 每当用户点击 div 时 我如何聚焦输入字段 你需要有一个onCl
  • 是否可以使用 JavaScript 导入 HTML?

    我有一些具有相同页脚的 html 页面 使用 JavaScript 并且仅使用 JavaScript 我可以在其中导入另一个 html 页面吗 下面介绍了如何仅使用 JavaScript 向页面添加页脚 2022 代码 使用fetch ht
  • 我想在数据表中使用 Div 结构而不是 Table。是否可以?

    我想用数据表 https datatables net 用div结构代替表格 目的是满足设计要求 有什么可能的方法或替代方案吗 不 您将无法执行此操作 Datatables 的核心仅适用于表格元素和子 thead tbody tfooter
  • Bootstrap 将图像与文本对齐

    我正在尝试使用引导程序将左侧的图像与文本对齐 并且当在移动设备上查看页面时 图像将居中于文本顶部 div class container div class row h1 About Me h1 div class col md 4 div
  • Smalltalk Pharo ZdcSecureSMTPClient 在 GMail 中未显示 html 格式?

    我正在使用 ZdcSecureSMTPClient 将 html 格式的字符串发送到 gmail 帐户 但是当我发送它时 它会将 html 编码显示为纯文本 IE mailMessage MailMessage empty mailMess
  • 设置 HTML 表格的最大显示行数

    具有动态生成的 HTML 表 行数未知 的 JSP 页面 在后端有属性 设置最大行数 例如 最大行数 15 如何将 HTML 表格的行数限制为max rows价值 表的其他部分应该可以通过垂直滚动访问 这意味着用户可以看到 15 行 如果向
  • jQuery - 将日期选择器的容器设置为特定的 div

    我在 div 上使用 jQuery UI 日期选择器 div通过移动鼠标隐藏和显示 因为日期选择器存在于末尾标签 不在我的 div 内 当我将鼠标移动到日期选择器时 div 消失 我像这样加载了日期选择器 JavaScript dt1 da

随机推荐

  • SpringBoot如何避免SQL注入漏洞呢?

    转自 SpringBoot如何避免SQL注入漏洞呢 下文笔者讲述SpringBoot避免SQL注入漏洞的方法分享 如下所示 SQL盲注 SQL注入简介 SQL注入的风险 数据库中的数据被任意查看 修改 删除 SQL注入的原因 未对用户输入进
  • mysql的驱动connect放在哪里_MySQL文档阅读笔记之JDBC驱动参数autoReconnect的副作用...

    MySQL的特性之一可高度定制化 相应的MySQL提供的JDBC驱动也提供了相当多的参数 老实说 第一次阅读文档时 真心晕 不过还是禁不住的赞叹 MySQL的JDBC驱动都有茫茫多的参数 果然有特点 这些参数中autoReconnect吸引
  • 无注册中心使用dubbo

    前言 熟悉dubbo的朋友都知道 dubbo可通过指定Url方式绕过注册中心直连指定的服务地址 所以想当然会想到那么可不可以不使用注册中心 本文就是SpringBoot整合Dubbo 无注册中心 的示例展示 提供者dubbo provide
  • Cobar使用文档(可用作MySQL大型集群解决方案)

    Cobar使用文档 可用作MySQL大型集群解决方案 2013 12 11 16 06 17236人阅读 评论 0 收藏 举报 分类 cobar 1 转 http blog csdn net shagoo article details 8
  • Python操作Excel插入删除行

    Python操作Excel插入删除行 1 前言 2 使用openpyxl 3 使用xlwings 3 1 删除行 range api EntireRow Delete 3 2 插入行 sheet api Rows row number In
  • 信息系统之网络安全方案 — “3保1评”

    信息系统之网络安全方案 3保1评 序 什么是 3评1保 一 网络安全等级保护 1 1 概念 1 2等保发展 1 3法律要求 1 4分级及工作流程 二 涉密信息系统分级保护 2 1概念 2 2法律要求 2 3分级及工作流程 三 关键信息基础设
  • unity3d-常用组件

    Component 学习阶段我会不断的更新新的内容 文章如有误请指正 如果觉得对你有用 请点赞收藏关注一波 谢谢支持 Rigidbody 变量 公共函数 消息 公共函数 2D 静态函数 2D 射线 RaycastHit 2D 1 变量 Ph
  • 51单片机控制数码管显示以及控制打断

    实践内容 1 利用单片机的P0口接数码管的字段脚 P1 0脚接共阴极 P3 2 P3 3引脚接独立按键产生外部中断信号 编写程序 当程序正常运行时数码管显示H字符 当外部中断0有中断请求信号时 数码管从0 9循环显示一次后回到正常状态 如果
  • ARP攻击后续

    查看ARP缓存表 我们先了解一下ARP缓存表的概念 络设备一般都有一个ARP缓存 ARP Cache ARP缓存用来存放IP地址和MAC地址的关联信息 在发送数据前 设备会先查找ARP缓存表 如果缓存表中存在对方设备的MAC地址 则直接采用
  • VS2013编译FFMPEG遇到的坑

    因为需要 用到老的FFMPEG库 但官方又没有编译好的LIB和DLL 只能下载源码自己编译了 但对LINUX环境不懂 只有在WINDOWS上配置环境编译 记录过程如下 1 下载FFMPEG源码 下载地址 http ffmpeg zerano
  • RV32I指令集

    RV32I是最基本的32位Base指令集 它支持32位寻址空间 支持字节地址访问 仅支持小端格式 little endian 高地址高位 低地址地位 寄存器也是32位整数寄存器 RV32I指令集的目的是尽量简化硬件的实施设计 所以它只有47
  • 蓝奏云访问修复(JavaScript 几个参数及命令讲解)

    每次都要更改蓝奏云分享链接中的 www lanzous com 为 ww lanzous com 麻烦 改 Hosts 有效果 但写个脚本不香么 蓝奏云访问 用到的命令和参数 window location href 当前页面的 URL 字
  • 解决粘包问题的三种方法

    方法一 定长数据流 服务器客户端提前协商 每个消息定长 不足的空白字符补足 方法二 特殊结束符 双方协商定义一个特殊的分隔符号 比如 等 只要没有发送分隔符就意味着一条数据没有结束 方法三 协议 相对最成熟额数据传递方式 由服务器开发者提供
  • http常见字段

    Host字段 客户端发送请求时 用来指定服务器域名 有了Host字段 就可以将请求发往同一台服务器上的不同网站 Content Length 字段 服务器在返回数据时 会有Content Length字段 表名本次回应的数据长度 Conne
  • Vue 团队公开快如闪电的全新脚手架工具,未来将替代 Vue-CLI,才300余行代码,学它!...

    1 前言 大家好 我是若川 欢迎关注我的公众号若川视野源码共读活动ruochuan12 想学源码 极力推荐之前我写的 学习源码整体架构系列 jQuery underscore lodash vuex sentry axios redux k
  • 求生之路2 局域网联机教程

    1 下载游侠网的 求生之路2 生存之旅2 V2 1 2 1中文绿色免安装公网联机版 2 双方保持版本号一致 3 版本号在E Left 4 Dead 2 left4dead2 steam inf里 4 对主程序建立快捷方式 5 在快捷方式的属
  • 文件服务器磁盘增量备份,完全备份、差异备份以及增量备份

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 常用的数据备份方式有完全备份 差异备份以及增量备份 那么这三种备份方式有什么区别 在具体应用中又该如何选择呢 1 备份方式简介 完全备份 Full Backup 备份全部选中的文件夹 并不依赖文
  • JS alert() 弹出框乱码的问题

    今天写了一个html 中间引用了js文件 chrome显示和html的字符集都是utf 8 但执行事件onclick alert 请输入数字 弹出乱码 百度一下 找到了解决方法 好了 废话不说了 1 在html中 引入js 插入的语句中指定
  • Mysql 启动报错解析:Starting MySQL.. ERROR! The server quit without updating PID file (/usr/local/mysql/dat

    问题 root centos74 service mysqld start Starting MySQL ERROR The server quit without updating PID file usr local mysql dat
  • 【Obsidian样式】修改文件夹名称和文件名称前的图标

    声明 本文大部分内容来自于https www bilibili com read cv17822164 方法一 Obsidian Icon Folder插件 Github https github com FlorianWoelki obs