[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