不懂CSS,一样可以DIY出自己喜欢的Obsidian主题
为了能收到我的推文更新,请点击上方蓝字『维客笔记』关注并星标⭐哈
01 引言
美的东西谁不喜欢呢?!
emmm,对于Ob我更崇尚那种简约美,清爽舒心就行~
毕竟Obsidian是一个笔记软件,最主要的还是用来沉淀知识的
如果你像我一样整(cai)天(guai)捯饬插件和主题那就有点儿得不偿失了
插一条:看到ob官方论坛的展示,Ob V0.16版本貌似自带主题非常好看了,到时估计直接用默认主题即可(仅猜测)
废话不说了,直接进入正题!
02 方案
以下方案,均是以minimal主题为例讨论的,其它主题应该也类似吧~
为啥是minimal? 两个字:简约啊🤣
要用到的工具有哪些?
Obsidian本体 style settings插件 minimal Theme settings插件 snippets(CSS代码片段) 『咱不是说,不用CSS吗?emmm,貌似说的是不懂CSS,咱可以用现成的啊,就与用别人做好的插件一样,虽然不懂,但只要会使用即可,毕竟写CSS/插件不是咱们的主业』
P.S.以上需要用的插件已上架Ob插件商店,检索下载安装即可,当然也可在文末获取(我会说我还分享了CSS代码片段了吗)
以下站在Ob新手的角度,详细讲讲~
所谓的主题就简单理解为外观吧
比如:背景颜色/字体/字号/表格格式/标签样式......
Ob本体
点击设置 找到【外观】,见下图
基础颜色可根据自己的喜好选择浅/暗,我个人目前比较喜欢浅色主题 然后点击【管理】进入主题商店,挑一款自己喜欢主题,我就用minimal了吧,当然Blue Topaz主题也是十分推荐的,对国人比较友好 主题安装之后,你便拥有了每个主题开发者默认设置的主题样式,虽然已经很精美了,但是总有个别点你不喜欢
再说一遍,我是以minimal主题为例修改的
字体
依然是在Ob的外观窗口,如下
从上图我们可以看到界面/正文/代码字体,我们只需点击右侧的管理然后检索你系统上安装的字体名称,即可应用此字体。 上图中虽然每一项我都有很多字体,但真正生效的只有最前面的一种哈,也就是说,我的界面和正文字体都是思源宋体 CN;代码字体是Inconsolata 代码字体下面还有两个选项,字体大小和快速调整字体大小,这个根据你自己需要设置即可 要强调的一点是,你安装了minimal Theme settings插件之后,在选项里要将Editor Font中的内容删除,不然上述的设置是无效的,见下图
style settings插件
也许你想将笔记中的各级标题和正文字体设置为不同的字体!没问题,也简单,见下图
打开style settings插件选项窗口 找到Minimal---headings,在4处输入你需要的字体名称即可 当然除了可以设置字体外,你还可以设置各级标题的字号/颜色/字重(字体的粗细程度)
关于字体的设置就全部说完了,但Style Settings的内容还多着呢
仔细看一下Style Settings插件的全貌
除了mimal主题的设置选项外,还包含其它插件的样式设置
emmm,我们这里还是看minimal吧,见下图,几乎你想设置的项目它都给了,你只需动动鼠标就行了,根本不需要懂CSS
此时,你可能想说,如果可以边调节边预览效果就好了😕
这个必须可啊
在笔记窗口,ctrl+P,在弹出窗口输入style,选择下图的命令
此时,你的笔记面板和style settings窗口就能一起并排显示了,见下图
竟然暴露了开箱即用库2.0版本🤣 2.0版本将可以进行很规范的学术论文写作了,可以导出为word且依然可用zotero对插入的参考文献进行批量管理/样式调整
minimal Theme settings插件
看名称也知道这个是minimal主题专用的插件
也可对主题的诸多元素进行调节
第一大项是color scheme,就是开发者内置了几套配色方案,我个人比较喜欢Nord风格
还有就是可以调节不同界面的对比度,这些都是看个人喜好吧
第二大项也是一些主题元素的设置
比如可以设置彩色标题,使用迷你版状态栏,隐藏界面键间的边界线等等等 Layout的设置,你还需要额外安装一个插件contextual插件
我没这些需求,就懒得安装了
Tables这一项都是可以设置一下,毕竟大多数人都会用到Dataview嘛
代码片段
虽然上面几个已经能DIY很多东西了,但还是不能够啊
比如,我想给文件夹前面加一个图标(我知道icon folder插件可以做到,但是bug太多,不建议使用)
你看我的开箱即用库中文件夹前面的图标就是利用代码片段搞定的
怎么搞定?
打开Ob设置---外观---CSS代码片段,见下图
此CSS代码片段请在文末获取 拿到之后,用记事本打开,要把里面每个文件夹的名称更改为你自己的文件夹名称,图标也可以自定义,见下图
更改完之后保存,将其放入Valut/.Obsidian/snippets文件夹中 再次打开Ob设置---外观---CSS代码片段,刷新一下,启用上述的代码片段
当然你还可能还需要别的代码片段,直接去Ob中英文论坛里去淘哈
03 写在最后
你可能还要像把dataview的表格风变成卡片风,见下面的动图
很简单,在笔记最前面(Yaml区)加上这个cssClasses: cards
,如下图所示
前提是你用minimal主题,用别的主题我没试过(大概率是没有,不过倒是可以找找代码片段)
插件以及代码片段还有更多minimal主题设置教程,请关注维客笔记微信公众号,后台聊天窗口回复20221011
如果喜欢,给个赞赏也是可以的哈😋