0033 侧边栏按钮排序-CSS-Snippets

只要用的稍微多一点,就会遇到这样的烦恼:侧边栏的按钮顺序老变化,这没法形成肌肉记忆,每次都得认真查找,看看哪个图标是自己需要的。

这个问题也可以理解,各个插件加载以后注册按钮,但是加载顺序和速度可能每次都不太相同。

解决的方法也有,比如用 Commander 去隐藏所有按钮再用它的自定义功能把需要的按钮加回去。但是,有些命令需要自己选择图标,我也不知道是不是自己笨蛋,反正选图标总也找不到自己喜欢的。

但,既然,都是网页,那也许我能用 CSS 解决。

代码很简单,如果你会用浏览器的开发者工具,这就是一件非常微不足道的事情了。

找到元素特征

Ctrl+Shift+I,打开开发者工具,左上角有个鼠标箭头和小方块的图标,点一下,它亮了,再去点一下 Obsidian 左侧的按钮,然后开发者工具就跳转到这个按钮的代码部分了。这里可以反复尝试,直到看到类似的代码:

1
<div class="clickable-icon side-dock-ribbon-action" aria-label="查看关系图谱" aria-label-position="right">

我很懒,就不截图,放心啦,你只要有一点点耐心,照着做就能找到的。

你需要关注的东西也很简单,就是:

1
aria-label="查看关系图谱"

这个属性,毕竟,我们想要排序,就得先选中这个按钮,再讲它该如何。那么说的是哪个按钮,这时候就得找点它独有的特征来说明,上面这个就是。

照猫画虎,你应该可以找到每个按钮对应的特征。或者,更简单的,你把鼠标放在按钮上一会儿,也能看到这个提示文字,就真的没啥操作上的门槛了。

好,我们可以开始写代码了。

CSS Snippets

代码放在哪里?打开“设置——外观——CSS 片段”,那里写着具体的位置,如果没有这个目录,自己新建一下,然后在里面建立任意名称的 css 文件,比如 custom-menu-order.css。这时候你在设置中,应该可以看到这个 CSS 片段,后面的按钮打开,即启用此片段。

但是,没有任何效果,因为我们还没写任何代码。

1
2
3
.side-dock-actions .side-dock-ribbon-action[aria-label*="查看关系图谱"] {
order: 10;
}

复制这个代码,放进去,该修改什么你懂吧?多个按钮,那就把这段代码多复制几次,反正一段代码对应一个按钮。

这里要说的是 order 的值,表示的是顺序,数字越大越靠后,当然越小越靠前。但是,你别 1、2、3、4 这么排,肯定会后悔,因为以后想中间加一个按钮的时候就都得改。所以要这么数:10、20、30,或者 20、40、60……这样以后需要在中间添加按钮的时候就有腾挪的空间了。

就这。

什么,完全照着我说的做了,一丝不苟的,反复检查了,结果一毛钱作用都没有?

这种级别的修改,需要重启软件才能看到效果

隐藏按钮

其实如果了解 CSS 就应该知道,已经选中元素了,这时候差不多随心所欲了。不过还有不懂的同学,所以来直接抄作业:

1
2
3
.side-dock-actions .side-dock-ribbon-action[aria-label*="查看关系图谱"] {
display: none;
}

按钮颜色

1
2
3
.side-dock-actions .side-dock-ribbon-action[aria-label*="查看关系图谱"] {
color: #cc0000;
}

颜色值怎么搞不用我再讲了吧。