如何在 Obsidian 中客製化介面?推薦 3 個讓使用體驗更好的 CSS 效果

朱騏
PM的生產力工具箱
7 min readMar 24, 2021

一、前言

Obsidian 這款筆記工具可自行修改 CSS 樣式讓使用體驗更好,這篇文章整理 3 個實用的 CSS 功能修改方法,分別是:

  • 讓項目清單更好閱讀:在項目清單 (unordered list) 之間加入直線,模仿 Roam Research 的介面¹
  • 讓特定筆記一目瞭然:改變樹狀圖檢視 (Graph View) 中節點的顏色,依據特定 Tag 顯示不同顏色²
備註:此功能已內建在 v0.11.0 後的版本,不需要修改 CSS。
  • 新增尚未正式建立的筆記:改變樹狀圖檢視 (Graph View) 中節點的顏色,顯示已連結但尚未被建立的筆記³

下面是效果圖。

1 : 項目清單之間加入直線
2、3 : 改變樹狀圖中特定節點的顏色

在講解這些效果的實作之前,我們先來談談如何在 Obsidian 中修改 CSS。

二、如何在 Obsidian 修改 CSS?

修改 Obsidian CSS 的方法

網路上有兩種修改 Obsidian CSS 的方法:

  • 修改 obsidian Theme 中的 CSS
  • 加入 CSS snippets

第一種方法是將 CSS 直接修改在 Template (模板) 中,若要建立新的 CSS 效果都要改一次 Template,維護性較差。

這篇文章要分享的是第二種,將每種 CSS 效果分開管理,維護性比較高。

加入 CSS Snippets

加入 CSS Snippets 的步驟如下:

1.在 Obsidian 開啟 Setting

2.點擊 Appearance > CSS snippets 的資料夾 icon ,此時系統自動打開 Obsidian 軟體的 Snippets 資料夾(系統預設是隱藏)

點擊 CSS snippets 下的資料夾 icon
系統自動打開 Snippets 資料夾

3.開啟任何的文字編輯器,貼上相對應的 CSS 程式碼(等下會說明)。你也可以單純開一個記事本 (Windows)、文字編輯 (Mac),將程式碼貼上後儲存成 .css 檔案

貼上 CSS 程式碼 (下方會說明要貼什麼)

4.將檔案儲存成 .css 格式的檔案(例如 xxx.css,並放到剛才的 css snippets 資料夾。

5.如果成功,可在 Obsidian > Setting > Appearance 的 CSS snippets 下方看到一個開關,名稱是你剛才儲存 CSS 的檔案名稱

成功即可看到該 CSS 控制項

三、加入 CSS 效果

1.在項目清單 (unordered list) 之間加入直線

依照上方步驟,將以下的程式碼貼到 .css 檔案中。

/* Bullet point line relationship */.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }.cm-hmd-list-indent .cm-tab::before, ul ul::before {content:'';border-left: 3px solid rgba(0, 122, 255, 0.25);position: absolute;}.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px;}ul ul::before { left: -11px; top: 0; bottom: 0;}

💡 程式碼來源:《Bullet Point Relationship Lines

2. 依據特定 Tag 顯示不同顏色

確定你的 Obsidian 是 v0.11.0 以上的版本 (到 2021.03.24 為止是 V.11.5 )。

你可以在 Graph View 中看到 Group 的功能[¹],藉由輸入不同條件可調整節點顏色。

透過 Group 來設定 Graph View 節點的顏色

篩選條件相當彈性,可以用筆記路徑 (path)、筆記名稱(file)、筆記標籤(tag)、line (筆記的一行)、section (筆記中的標題) 。

這項功能非常實用,例如我可以篩選同標籤的節點,透過 Graph View 去檢視包含了哪些筆記。

💡 資訊來源:《Provide tags as graph CSS classes/attributes to allow coloring of graph nodes

3. 顯示已連結但尚未被建立的筆記

Obsidian 中有個特殊的機制,我們可以在打筆記時利用 [[關鍵字]] 來連結特定筆記。有趣的是,這則被連結的筆記可以事先不存在,之後再新增即可。

例如:

我在《電腦玩物》網站上看到了許多 [[時間管理]] 相關的文章,對我的幫助真的非常大。

我認為「時間管理」是一個可再延伸的概念,就可以建立一則新的筆記來紀錄。透過 [[時間管理]]語法,就算這則筆記當下還不存在,我都可以預先連結筆記。

但這種預先連結但尚未被建立的筆記,如果沒有特殊的提醒,我們很可能就會忘記新增。

透過下方的程式碼,我們就可以替這種筆記標上顏色。

.theme-dark .graph-view.color-fill-unresolved {color: #9e8aff;Opacity:1;}

💡 程式碼來源:《Obsidian forum : is there a way to change the color of the nodes in graph view

參考資源

如果你對加入 CSS 的第一種方法有興趣 (修改 Template 模板),可以看這部影片,作者 Santi Younger 有非常詳細的說明。

▶︎ 關於文章1/ 歡迎訂閱 我的電子報 獲得實用的生活與工作技巧,每週二中午 12:00 準時發刊2/ 想要掌握最新文章,可以點擊下方「Follow」我~3/ 如果你覺得文章寫的不錯,可以對文章拍手讓我知道 👏🏻▶ 關於我我是朱騏,一個組織能力超強的軟體產品經理,喜歡研究各種生產力工具、時間管理方法。1/ 我可以提供產品管理、時間管理、生產力工具的「個人問題諮詢」與「講座邀約」。2/ 若是個人諮詢,可以請我喝杯咖啡、吃頓晚餐,可透過 Email/ Facebook 跟我約時間,請參考「聯繫方式」。3/ 若是講座邀約,請直接使用 Email 聯繫。︎▶︎ 聯繫方式- 📪 Email:muhenry608@gmail.com- 💬 Facebook:請先加我個人好友並簡短說明想要諮詢的主題▶︎ 建立人脈歡迎使用 LinkedIn 與我交流,你可以「加我為好友」建立連結| LinkedIn @ Chi Chu 歡迎交流

--

--

朱騏
PM的生產力工具箱

線上寫作教練,擁有 6 年的 SaaS 產品經理 & 2 年軟體技術寫手工作經驗。我專注寫 (1)技術寫作 (2)數位寫作 (3) 個人知識管理的文章 🤝 歡迎講座邀約、諮詢,可參考 www.chichu.co/training