不懂CSS,一樣可以DIY出自己喜歡的Obsidian主題

大家好,我是來自1037號森林的BCS!
為了能收到我的推文更新,請點(diǎn)擊上方藍(lán)字『維客筆記』關(guān)注并星標(biāo)?哈
01 引言
美的東西誰不喜歡呢?!
emmm,對于Ob我更崇尚那種簡約美,清爽舒心就行~
畢竟Obsidian是一個筆記軟件,最主要的還是用來沉淀知識的
如果你像我一樣整(cai)天(guai)捯飭插件和主題那就有點(diǎn)兒得不償失了
插一條:看到ob官方論壇的展示,Ob V0.16版本貌似自帶主題非常好看了,到時估計(jì)直接用默認(rèn)主題即可(僅猜測)
廢話不說了,直接進(jìn)入正題!
02 方案
以下方案,均是以minimal主題為例討論的,其它主題應(yīng)該也類似吧~
為啥是minimal??兩個字:簡約啊??
要用到的工具有哪些?
Obsidian本體
style settings插件
minimal Theme settings插件
snippets(CSS代碼片段) 『咱不是說,不用CSS嗎?emmm,貌似說的是不懂CSS,咱可以用現(xiàn)成的啊,就與用別人做好的插件一樣,雖然不懂,但只要會使用即可,畢竟寫CSS/插件不是咱們的主業(yè)』
P.S.以上需要用的插件已上架Ob插件商店,檢索下載安裝即可,當(dāng)然也可在文末獲取(我會說我還分享了CSS代碼片段了嗎)
以下站在Ob新手的角度,詳細(xì)講講~
所謂的主題就簡單理解為外觀吧
比如:背景顏色/字體/字號/表格格式/標(biāo)簽樣式......
Ob本體
點(diǎn)擊設(shè)置
找到【外觀】,見下圖

基礎(chǔ)顏色可根據(jù)自己的喜好選擇淺/暗,我個人目前比較喜歡淺色主題
然后點(diǎn)擊【管理】進(jìn)入主題商店,挑一款自己喜歡主題,我就用minimal了吧,當(dāng)然Blue Topaz主題也是十分推薦的,對國人比較友好
主題安裝之后,你便擁有了每個主題開發(fā)者默認(rèn)設(shè)置的主題樣式,雖然已經(jīng)很精美了,但是總有個別點(diǎn)你不喜歡
再說一遍,我是以minimal主題為例修改的
字體
依然是在Ob的外觀窗口,如下

從上圖我們可以看到界面/正文/代碼字體,我們只需點(diǎn)擊右側(cè)的管理然后檢索你系統(tǒng)上安裝的字體名稱,即可應(yīng)用此字體。
上圖中雖然每一項(xiàng)我都有很多字體,但真正生效的只有最前面的一種哈,也就是說,我的界面和正文字體都是思源宋體 CN;代碼字體是Inconsolata
代碼字體下面還有兩個選項(xiàng),字體大小和快速調(diào)整字體大小,這個根據(jù)你自己需要設(shè)置即可
要強(qiáng)調(diào)的一點(diǎn)是,你安裝了minimal Theme settings插件之后,在選項(xiàng)里要將Editor Font中的內(nèi)容刪除,不然上述的設(shè)置是無效的,見下圖

style settings插件
也許你想將筆記中的各級標(biāo)題和正文字體設(shè)置為不同的字體!沒問題,也簡單,見下圖

打開style settings插件選項(xiàng)窗口
找到Minimal---headings,在4處輸入你需要的字體名稱即可
當(dāng)然除了可以設(shè)置字體外,你還可以設(shè)置各級標(biāo)題的字號/顏色/字重(字體的粗細(xì)程度)
關(guān)于字體的設(shè)置就全部說完了,但Style Settings的內(nèi)容還多著呢
仔細(xì)看一下Style Settings插件的全貌

除了mimal主題的設(shè)置選項(xiàng)外,還包含其它插件的樣式設(shè)置
emmm,我們這里還是看minimal吧,見下圖,幾乎你想設(shè)置的項(xiàng)目它都給了,你只需動動鼠標(biāo)就行了,根本不需要懂CSS

此時,你可能想說,如果可以邊調(diào)節(jié)邊預(yù)覽效果就好了??
這個必須可啊
在筆記窗口,ctrl+P,在彈出窗口輸入style,選擇下圖的命令

此時,你的筆記面板和style settings窗口就能一起并排顯示了,見下圖

竟然暴露了開箱即用庫2.0版本?? ?2.0版本將可以進(jìn)行很規(guī)范的學(xué)術(shù)論文寫作了,可以導(dǎo)出為word且依然可用zotero對插入的參考文獻(xiàn)進(jìn)行批量管理/樣式調(diào)整
minimal Theme settings插件
看名稱也知道這個是minimal主題專用的插件
也可對主題的諸多元素進(jìn)行調(diào)節(jié)
第一大項(xiàng)是color scheme,就是開發(fā)者內(nèi)置了幾套配色方案,我個人比較喜歡Nord風(fēng)格

還有就是可以調(diào)節(jié)不同界面的對比度,這些都是看個人喜好吧
第二大項(xiàng)也是一些主題元素的設(shè)置

比如可以設(shè)置彩色標(biāo)題,使用迷你版狀態(tài)欄,隱藏界面鍵間的邊界線等等等
Layout的設(shè)置,你還需要額外安裝一個插件contextual插件

我沒這些需求,就懶得安裝了
Tables這一項(xiàng)都是可以設(shè)置一下,畢竟大多數(shù)人都會用到Dataview嘛
代碼片段
雖然上面幾個已經(jīng)能DIY很多東西了,但還是不能夠啊
比如,我想給文件夾前面加一個圖標(biāo)(我知道icon folder插件可以做到,但是bug太多,不建議使用)
你看我的開箱即用庫中文件夾前面的圖標(biāo)就是利用代碼片段搞定的

怎么搞定?
打開Ob設(shè)置---外觀---CSS代碼片段,見下圖

此CSS代碼片段請?jiān)谖哪┇@取
拿到之后,用記事本打開,要把里面每個文件夾的名稱更改為你自己的文件夾名稱,圖標(biāo)也可以自定義,見下圖

更改完之后保存,將其放入Valut/.Obsidian/snippets文件夾中
再次打開Ob設(shè)置---外觀---CSS代碼片段,刷新一下,啟用上述的代碼片段
當(dāng)然你還可能還需要別的代碼片段,直接去Ob中英文論壇里去淘哈
03 寫在最后
你可能還要像把dataview的表格風(fēng)變成卡片風(fēng),見下面的動圖

很簡單,在筆記最前面(Yaml區(qū))加上這個cssClasses: cards
,如下圖所示

前提是你用minimal主題,用別的主題我沒試過(大概率是沒有,不過倒是可以找找代碼片段)
插件以及代碼片段還有更多minimal主題設(shè)置教程,請關(guān)注維客筆記微信公眾號,后臺聊天窗口回復(fù)20221011