一、前言
Obsidian 這款筆記工具可自行修改 CSS 樣式讓使用體驗更好，這篇文章整理 3 個實用的 CSS 功能修改方法，分別是：
- 讓項目清單更好閱讀：在項目清單 (unordered list) 之間加入直線，模仿 Roam Research 的介面¹
- 讓特定筆記一目瞭然：改變樹狀圖檢視 (Graph View) 中節點的顏色，依據特定 Tag 顯示不同顏色²
備註：此功能已內建在 v0.11.0 後的版本，不需要修改 CSS。- 新增尚未正式建立的筆記：改變樹狀圖檢視 (Graph View) 中節點的顏色，顯示已連結但尚未被建立的筆記³
下面是效果圖。
在講解這些效果的實作之前，我們先來談談如何在 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 資料夾（系統預設是隱藏）
3.開啟任何的文字編輯器，貼上相對應的 CSS 程式碼（等下會說明）。你也可以單純開一個記事本 (Windows)、文字編輯 (Mac)，將程式碼貼上後儲存成 .css 檔案
4.將檔案儲存成 .css 格式的檔案（例如 xxx.css，並放到剛才的 css snippets 資料夾。
5.如果成功，可在 Obsidian > Setting > Appearance 的 CSS snippets 下方看到一個開關，名稱是你剛才儲存 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 的功能[¹]，藉由輸入不同條件可調整節點顏色。
篩選條件相當彈性，可以用筆記路徑 (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 歡迎交流
