Obs143｜分頁式介面的應用：HTML Tabs外掛；增加Obsidian呈現的便利性

HTML Tabs在筆記裡內嵌分頁式頁面，而分頁式的使用介面增加了Obsidian在應用上的擴充。這次透過三個應用來介紹HTML Tabs的使用。

範例中程式碼區塊使用了程式碼區塊使用Codeblock Customizer外掛。

1. HTML Tabs語法

1.1. 語法1：~~~tabs

~~~tabs
---tab Tab1
....
---tab Tab2
....
~~~

1.2. 語法2：```tabs

```tabs
---tab Tab1
....
---tab Tab2
....
```

2. 分頁應用範例

範例使用了下列CSS片段：

/* Styles for HTML Tabs plugin */
.html-tab {
  padding-top: 0rem;
  padding-bottom: 0rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-top: 0rem;
  margin-bottom: 0rem;
}

.html-tab-active {
  background-color: var(--background-modifier-error);
  color: white;
  border-radius: 5px;
}
/* End of Styles for HTML Tabs plugin */

2.1. 程式片段

程式碼區塊使用Codeblock Customizer外掛，在閱讀模式才能正常顯示。

2.2. 八年級國文第一次段考(期中考)

~~~tabs
---tab 考題4
(    )04、下列引號中何者前後字義不同？  
1. 瓜熟「蒂」落 / 根深「蒂」固
2. 星「羅」棋布/網「羅」人才
3. 寡廉「鮮」恥 / 陶後「鮮」有聞
4. 「予」獨愛蓮之出淤泥而不染 /  「予」取予求。
---tab 考題4 答案
2
---tab 考題5
(    )05、「原上摘瓜童子笑，池邊濯足斜陽落，晚風前個個說荒唐，田家樂。」這是碧沉西瓜作者引用鄭板橋作品中的句子。以下與其相關的敘述，何者錯誤？  
1. 「濯」足：洗滌
2. 旨在描寫採收農家瓜果的喜悅
3. 所描寫的時間為夏季黃昏
4. 全詩使用視覺兼嗅覺摹寫。
---tab 考題5 答案
4
~~~

2.3. 翻譯

~~~tabs
---tab 將下列英文翻譯成不同語言
Obsidian
![](https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Lipari-Obsidienne_%285%29.jpg/440px-Lipari-Obsidienne_%285%29.jpg)
---tab 中文 
黑曜石
---tab 韓文
흑요석
---tab 西班牙文
Obsidiana
~~~

3. 相關鏈接

• GitHub ptournet/obsidian-html-tabs: Obsidian plugin allowing the creation and rendering of Tabs and tab panels in your notes.
• Codeblock Customizer外掛介紹影片: https://youtu.be/EQDzgkJXEaU

4. 教學影片

＃＃

您可能也會有興趣的類似文章

• Obs155｜程設師的編程好友：CodeBlock Customizer／Code Styler、Codeblock Tabs、Keyshots (0則留言, 2024/03/09)
• [Obs＃96] Obsidian分頁調整： CSS樣式與外掛，讓分頁操作更簡便 (0則留言, 2022/09/10)
• Obs126｜Obsidian 2023/04 7個新外掛介紹與評析 (0則留言, 2023/04/29)
• [Obs＃107] Obsidian全方位搜尋：OmniSearch外掛 (0則留言, 2022/11/20)
• Obs＃120 | Chronology：筆記年表📆一覽無遺 (0則留言, 2023/03/26)
• Obs145｜輔助Markdown初學者的Editing Toolbar外掛 (0則留言, 2023/12/02)
• Obs152｜終於能產生書籤與頁碼了！與PDF相關的外掛：Better Export PDF＆PDF++ | 修訂 (0則留言, 2024/02/18)
• [Obs＃34] 用Tabs外掛形成分頁式佈局 (0則留言, 2021/04/21)
• [Obs＃98] Obsidian的幾個CSS與HTML小技巧 (0則留言, 2022/10/02)
• Obs＃118 | Obsidian超棒的圖形處理 Awesome Image (4則留言, 2023/03/22)
• Obs146｜Obsidian彙總常用說明網站的助手：HelpMate (0則留言, 2023/12/03)
• [Obs＃99] Obsidian跳頁分隔線的簡單作法：使用HR標籤（水平線） (0則留言, 2022/10/08)
• Obsidian 1.0新手教學—打造個人知識管理利器，專屬的第二大腦 (2022年) (4則留言, 2022/10/22)
• Obs128｜Obsidian Dataview進度條與YAML欄位快速輸入的方法 (0則留言, 2023/05/11)
• Obs129｜Obsidian除了CSS片段以外的CSS進階用法與兩個CSS外掛 (0則留言, 2023/05/14)