[Obs＃96] Obsidian分頁調整： CSS樣式與外掛，讓分頁操作更簡便
1. Plugin: New tab default page
透過New tab default page外掛可以設定開啟新分頁時預設的筆記，也可以是圖片或PDF檔。
2. CSS片段
我經常在不同的佈景主題間切換，因此CSS片段拆成兩大類的檔案：
- myobsidian-common.css: 所有佈景主題都會使用到的共用CSS類別設定
- myobsidian-佈景主題名稱.css: 針對特定佈景主題所做的自訂CSS片段
- 例如 myobsidian-Minimal.css (for Minimal Theme)、myobsidian-LYT.css、myobsidian-Sanctum.css等
以下CSS以Sanctum佈景主題為範例，若使用的是不同的主題時，var(--color-accent-rgb)等變數可能需要修改。
2.1. 分頁頁籤外觀
為了讓工作中的當前分頁頁籤能更清晰，在頁籤上方顯示顯著邊框顏色，頁籤文字也改成強調色。
.is-focused .mod-active .workspace-tab-header.is-active {
border-top: 3px solid orange;
}
.is-focused .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
.is-focused .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title {
color: rgb(var(--color-accent-rgb));
}
2.2. 標題左側顯示等級文字
在標題左側顯示等級文字（H1~H6），一眼就能看清楚標題等級。除此之外，為了容易辨識，我把標題文字顏色依序用七彩顏色設定，H1～H6分別是紅、橙、黃、綠、藍、紫（跳過靛色）。以二級標題H2為例：
.markdown-preview-view h2::before,
.is-live-preview .HyperMD-header-2::before {
content: 'H2';
position: absolute;
font-size: 0.7rem;
font-family: var(--default-font);
width: auto;
left: -35px;
padding: 0px 2px;
top: 20px;
opacity: 0.7;
}
2.3. 彈出式視窗加上邊框
Obsidian應用程式視窗能開啟不同的視窗，如設定與Hover Editor等視窗，為了能更容易辨識，加上強調色邊框。
/* 外掛等對話窗加上邊框 */
.modal.mod-settings, .modal.mod-community-plugin,
.modal.mod-community-theme {
border: 2px solid rgb(var(--color-accent-rgb));
}
/* Hover Editor加上邊框 */
.popover-content {
border: 2px solid rgb(var(--color-accent-rgb));
}
2.4. Callouts區塊修改
Sanctum的Callout是標題與內文是一整個背景色，增加自訂CSS片段如下，使更美觀：
- 修改成標題與內文有區分
- 最左側加一個邊條
- 摺疊符號在最右邊，移到標題文字右側以方便點擊
▼ Sanctum原樣式
▼ 修改後樣式
/* callout 整個同色塊，不甚美觀 */
/* .callout內含.callolut-title與.callout-content */
/* Callout區塊最下方不要有padding, 最左側加邊條 */
.callout {
padding: 8px 0px 0px 0px; /* 上 右 下 左 */
border-left: 5px solid rgba(var(--callout-color));
}
/* .callout-title內含.callout-icon, .callout-title-inner, .callout-fold
/* Callout標題列最左向右移, 下方填充8px，與內文區有8px的距離 */
.callout-title {
padding-left: 8px;
padding-bottom: 8px;
}
/* icon向下移動 */
.callout-icon {
margin-top: 8px;
}
/* .calloput-fold摺疊符號^與v符號緊接title後面，設成1時會在最右側 */
.callout-title .callout-title-inner {
flex-grow: 0;
}
.callout-fold {
margin-left: 4px;
}
/* 內文區背景變暗 */
.callout-content, .admonition-content {
background-color: rgba(var(--callout-color), 0.1);
padding: 0px 0px 0px 16px;
}
3. AutoHotkey腳本
〔Ctrl+T〕開啟新分頁，通常會再按〔Ctrl+O〕再開啟已存在的筆記來瀏覽或編輯，以下AutoHotkey腳本只要按〔Ctrl+T〕，會接續自動再按〔Ctrl+O〕，減少一個按鍵。
;; $ 不發生recursive call, ~ 觸發按鈕仍要輸出(即按了的Ctrl+T仍要先送出)
$^t::
sendInput ^o
return
4. 相關鏈接
5. 教學影片
＃＃
您可能也會有興趣的類似文章
- 為Obsidian頁籤增添光彩 (0則留言, 2022/08/31)
- [Obs＃99] Obsidian跳頁分隔線的簡單作法：使用HR標籤（水平線） (0則留言, 2022/10/08)
- [Obs＃85] 分享使用中與外觀有關的10個外掛 (0則留言, 2022/05/01)
- [Obs＃92] Obsidian彙編文章的簡單方法：2個外掛＋1個CSS片段 (0則留言, 2022/07/16)
- [Obs＃86] 分享與編輯器相關的21個Obsidian外掛 (0則留言, 2022/05/08)
- [Obs＃107] Obsidian全方位搜尋：OmniSearch外掛 (0則留言, 2022/11/20)
- Obsidian 1.0新手教學—打造個人知識管理利器，專屬的第二大腦 (2022年) (4則留言, 2022/10/22)
- [Obs＃98] Obsidian的幾個CSS與HTML小技巧 (0則留言, 2022/10/02)
- Obs152｜終於能產生書籤與頁碼了！與PDF相關的外掛：Better Export PDF＆PDF++ | 修訂 (0則留言, 2024/02/18)
- Obs129｜Obsidian除了CSS片段以外的CSS進階用法與兩個CSS外掛 (0則留言, 2023/05/14)
- Obs143｜分頁式介面的應用：HTML Tabs外掛；增加Obsidian呈現的便利性 (0則留言, 2023/10/15)
- Obs155｜程設師的編程好友：CodeBlock Customizer／Code Styler、Codeblock Tabs、Keyshots (0則留言, 2024/03/09)
- Obsidian(黑曜石) 水平捲動面板的設定方法 (11則留言, 2020/06/27)
- Obs128｜Obsidian Dataview進度條與YAML欄位快速輸入的方法 (0則留言, 2023/05/11)
- [Obs＃45] 軟體工程師必備的6個Obsidian外掛 (0則留言, 2021/08/13)
Sorry, 很久沒用Google sc…