[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外掛設定

01

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. 三欄

01|700

 > [!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. 四欄

01|700

 > [!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. 相關鏈接

5. 教學影片

##


想在手機閱讀更多css資訊?下載【香港矽谷】Android應用
分享到Facebook
技術平台: Nasthon Systems