[Obs＃83] 多欄式Callouts! 直接套用CSS片段變身N欄～

MCL Multi Column.css是一個不到8KB大小的CSS檔，只要存入儲存庫.obsidian/snippets資料夾並在外觀裡啟用此CSS片段，就能以下列方法呈現更多變化：

1. 多欄式呈現筆記的Callouts內容
2. 指定Callouts的顯示大小與浮動位置(浮動位置在閱讀模式生效)
3. 將無序列表變成多欄顯示(在閱讀模式生效，Callouts裡也會生效)

[!info] MCL?
MCL是「Modular CSS Layout」的縮寫

1. 多欄式Callouts

[!tip] Callouts類型
1. 顯示標題列：> [!multi-column]
2. 隱藏標題列：> [!blank-container]

[!tip] 使用方法
1. 欄位間用一個 > 分隔
2. 每個Callout區塊多增加一個 >
3. 欄位數由2到N，只要螢幕寬度足夠，會自動分配欄寬
4. 可使用Style Settings外掛設定

1.1. 兩欄

 > [!multi-column] > >> [!note]+ 待辦事項 >> your notes or lists here. using markdown formatting > >> [!warning|right-small]+ 進行中事項 >> your notes or lists here. using markdown formatting 

1.2. 三欄

 > [!multi-column] > >> [!note]+ 待辦事項 >> your notes or lists here. using markdown formatting > >> [!warning]+ 進行中事項 >> your notes or lists here. using markdown formatting > >> [!success]+ 已完成事項 >> your notes or lists here. using markdown formatting 

1.3. 三欄

 > [!multi-column] > >> [!note]+ 待辦事項 >> * Item 1 >>    * Item 1-1 >>    * Item 1-2 >>    * Item 1-3 >> >>> [!EXAMPLE] 範例 >>> ``` >>> String msg ="Hello, world!"; >>> ``` > >> [!warning]+ 進行中事項 >> 使用圖片： >> ![[Obs＃83 多欄式Callouts! 直接套用CSS片段變身N欄～ image 1.png]] > >> [!success]+ 已完成事項 >> 使用影片： >> >> [用Obsidian學會Markdown|embded](https://youtu.be/lnsQsFCYhNc) 

1.4. 四欄

 > [!multi-column] > >> [!note]+ 待辦事項 >> your notes or lists here. using markdown formatting > >> [!warning]+ 進行中事項 >> your notes or lists here. using markdown formatting > >> [!success]+ 已完成事項 >> your notes or lists here. using markdown formatting > >> [!info]+ 說明 >> your notes or lists here. using markdown formatting 

1.5. 五欄

 > [!multi-column] > >> [!note]+ 待辦事項 >> your notes or lists here. using markdown formatting > >> [!warning]+ 進行中事項 >> your notes or lists here. using markdown formatting > >> [!success]+ 已完成事項 >> your notes or lists here. using markdown formatting > >> [!info]+ 說明 >> your notes or lists here. using markdown formatting > >> [!quote]+ 引用 >> your notes or lists here. using markdown formatting 

1.6. 六欄

 > [!multi-column] > >> [!note]+ 待辦事項 >> your notes or lists here. using markdown formatting > >> [!warning]+ 進行中事項 >> your notes or lists here. using markdown formatting > >> [!success]+ 已完成事項 >> your notes or lists here. using markdown formatting > >> [!info]+ 說明 >> your notes or lists here. using markdown formatting > >> [!quote]+ 引用 >> your notes or lists here. using markdown formatting > >> [!error]+ Expired! >> your notes or lists here. using markdown formatting 

1.7. 隱藏標題列

 > [!multi-column] > >> [!blank-container]+ 待辦事項 >> * Item 1 >>    * Item 1-1 >>    * Item 1-2 >>    * Item 1-3 >> * Item 2 >>> [!EXAMPLE] 範例 >>> ``` >>> String msg ="Hello, world!"; >>> ``` > >> [!blank-container]+ 進行中事項 >> 使用圖片： >> ![[Obs＃83 多欄式Callouts! 直接套用CSS片段變身N欄～ image 1.png]] > >> [!blank-container]+ 已完成事項 >> 使用影片： >> >> [用Obsidian學會Markdown](https://youtu.be/lnsQsFCYhNc) 

2. 指定Callouts大小與浮動位置

 > [!error|right-small] 浮動到右側 > 小視窗，靠右 

擴充Callouts的語法，在Callout類型後加上Pipe，再輸入下列設定：

[!tip] 語法

[!Callout類型|left/right-small/medium/large]
[!blank-container|left/right-small/medium/large]

3. 多欄式列表

[!tip] 使用說明
1. YAML區加入cssClasses: 多欄CSS即會自動顯示成指定的欄數
2. 多欄CSS有下列幾種：

1. two-column-list: 垂直填充
2. three-column-list: 垂直填充
3. two-column-grid-list: 水平填充
4. three-column-grid-list: 水平填充

4. 相關鏈接

• efemkay/obsidian-modular-css-layout: CSS Layout hack for Obsidian.md
• MCL Multi Column.css

5. 教學影片

＃＃