分栏效果示例

迁移仓库时，可以直接将 Admonition 文件夹直接复制过去。

1 AD 样式效果

AD 是 Admonition 简称，通过添加 ad 类型，实现各类样式控制。
AD 版本 9.0 以后已经演变成了 callout 辅助工具，所以只要是 callout 支持的类型，或者自定义的 callout 类型，ad 写法也是支持的。
下面以 Blue Topaz 主题内置的 ad 样式举例说明，目前支持的 ad 样式有：

Admonition 类型	解释	使用
blank	全透明框	ad-blank
def	definition 定义	ad-def
thm	theorem 定理	ad-thm
lem	lemma 引理	ad-lem
cor	corollary 推论	ad-cor
pro	proposition 命题	ad-pro
hibox	自动隐藏框	ad-hibox
col2	内容分左右两栏	ad-col2
col3	内容分左右三栏	ad-col3
col4	内容分左右四栏	ad-col4
kanban	伪看板无序列表并列	ad-kanban
flex	自适应元素分栏	ad-flex

2 前置条件

• Blue topaz 主题更新到最新
• 使用分栏效果，需要安装 Admonition 插件，并添加上面表格中的类型，比如 blank,col2,flex 等类型
• 需要安装 style settings 插件并开启 3.1

• ad 添加类型页面

• ad 设置的可折叠默认值关闭

---

3 分栏类型

分栏分为两种样式 ad-col2 和 ad-flex

• ad-col2 适合对确定的文章段落，列表等分栏。
• ad-flex 适合对元素块分栏，并根据 div 的元素块多少自适应。比如 dataview 查询结果具有不确定性，就可以用这个分栏。

4 分栏效果

这里会给出一些 Blue Topaz 的展示、以及一些特别的用法，希望对你有帮助。我不确定这个库会被传播到何处，所以给一个发布的 QQ 群号，也是 Topaz 社区所在的地方908688452。

4.1 手动分栏通过添加 col2 col3 col4 进行分栏控制

collapse: open
title: ◑ 分两栏效果ad-col2
color: 89,78,126
>文字列表自动分栏
 
这是Blue Topaz的演示库，打包的主题uid是20211127，附带了Style Settings插件与Admonition插件，版本分别为v0.4.2和v6.6.1。同时附带了其他一些插件，可供使用。
这里会给出一些Blue Topaz的展示、以及一些特别的用法，希望对你有帮助。
我不确定这个库会被传播到何处，所以给一个发布的QQ群号，也是Topaz社区所在的地方**908688452**。
开始部分的最后，感谢Topaz社区的各位，没有社区的各位，不会有现在的主题。这个主题献给他们
主题社区的特点
1. 群内关怀
2. 群内唠嗑
3. 除了Ob无话不谈
4. 反馈bug私人定制
5. 不正经玩Ob
6. 写笔记不是正事美化才是
7. 颜值高于一切
 
 

title: ◮ 分三栏效果ad-col3
color: 78,15,6
collapse: open
- 分三栏
- 第二条
- sfsfsf
- 2233454555
- 三番四复是发顺
- 3333333
- 5555555555
- 67gvdcdsa
- dddd
- 555
- 44444
- 6666

title: ▥ 分四栏效果ad-col4
color: 198,155,64
collapse: open
1. 分四栏
2. 第二条
3. sfsfsf
4. 2233454555
5. 三番四复是发
6. 3333333
7. 5555555555
8. 67gvdcdsa
9. dddd
10. 555

title: ◆ 手动添加ad-blank 分栏
color: 99,178,129
collapse: open
```ad-blank
>人生语录
 
人生本来是苦的，苦的根源在于各种欲望。
钱多了还想再多，官做大还想更大，房子宽了还想更宽，出了名还想更出名，欲望过多、过强就成了贪病。贪病犹如喝盐水，越喝越咸，越咸越要喝。
当贪的欲望超越人的理性，凌驾生活的所有追求之时，就会成为阻断快乐的根源。
 
```
```ad-blank
> 人生完成清单
 
- [ ] Todo1
- [x] Todo2
- [ ] Todo
- [ ] ...
```

title: 💷 观影记录（四栏示例）
color: 98,155,64
collapse: open
```ad-note
title: 🤔 经典
color: 178,155,64
> “经典”的电影列表
 
- 🏨 2014.布达佩斯大饭店
 
- 🌲 2010.挪威的森林
 
- 🐕‍🦺 009.忠犬八公的故事
 
- 🏃‍♂️ 1994.这个杀手不太冷
 
- 👩‍❤️‍💋‍👨 1993.霸王别姬
 
```
 
```ad-note
title: 😏 日常
color: 99,188,76
> “日常”的电影列表
 
- 😴 2010.盗梦空间
 
- 👁 1994.肖申克的救赎
 
- 🌌 2014.星际穿越
 
- 💠 2001.哈利·波特与魔法石
 
```
 
```ad-note
title: 🥰 已看
color: 178,22,164
> “已看”的电影列表
 
- 🎖 功勋
 
- 🇨🇳 我和我的祖国
 
- ❄ [[长津湖]]
 
- 🛹[[让子弹飞]]
 
 
 
```
 
```ad-note
title: 🤩 想看
color: 139,65,06
> “想看”的电影列表
 
- [ ] 🚩 暂未有想看的 ...
 
- [ ] 💡 暂未有想看的 ...
 
```

title: 🖼 分栏图文混排
color: 215,155,255
collapse: open
 
## 大雁塔
![[16a0ec36679c31029a5a31a57881dea0_MD5.jpg]]
 
大雁塔位于唐长安城晋昌坊（今陕西省西安市南）的大慈恩寺内，又名“慈恩寺塔”。唐永徽三年（652年），玄奘为保存由天竺经丝绸之路带回长安的经卷佛像主持修建了大雁塔，最初五层，后加盖至九层，再后层数和高度又有数次变更，最后固定为今天所看到的七层塔身，通高64.517米，底层边长25.5米。
 
## 兵马俑
![[16a0ec36679c31029a5a31a57881dea0_MD5.jpg]]
 
兵马俑，即秦始皇兵马俑，亦简称秦兵马俑或秦俑，第一批全国重点文物保护单位，第一批中国世界遗产，位于今陕西省西安市临潼区秦始皇陵以东1.5千米处的兵马俑坑内。
兵马俑是古代墓葬雕塑的一个类别，俑作为古代墓葬的一种陪葬品而出现， 兵马俑即制成兵马（战车、战马、士兵）形状的殉葬品。
 
1961年3月4日，秦始皇陵被国务院公布为第一批全国重点文物保护单位 。1974年3月，兵马俑被发现。1987年，秦始皇陵及兵马俑坑被联合国教科文组织批准列入《世界遗产名录》，并被誉为“世界第八大奇迹” ，先后有200多位外国元首和政府首脑参观访问，成为中国古代辉煌文明的一张金字名片，被誉为世界8大古墓稀世珍宝之一。
 
## 西岳华山
![[16a0ec36679c31029a5a31a57881dea0_MD5.jpg]]
 
中国著名的五岳之一，中华文明的发祥地，“中华”和“华夏”之“华”，就源于华山。
 
## 广仁寺
 
![[16a0ec36679c31029a5a31a57881dea0_MD5.jpg]]
 
西安广仁寺位于西安明城墙内西北角，为中国唯一绿度母主道场，也是陕西地区唯一的一座藏传格鲁派寺院，是清康熙四十四年（1705年），玄烨皇帝来陕西巡视时，拨专款敕建。

---

title: 🔰 图片瀑布流
color: 215,155,255
collapse: open
 
![[7540f4b1c0263f332131eed4c2d91b2d_MD5.jpg]]
![[0c5cfd713349cae56f0820dccc3e086d_MD5.jpg]]
![[83ed1f4be0e95ab71e988c65d1fce069_MD5.jpg]]
![[16a0ec36679c31029a5a31a57881dea0_MD5.jpg]]
![[b35fcf9d4ee963de93495ef4614e2eac_MD5.jpg]]
![[0ecf4f5f17021983877b00dbd7b689ef_MD5.jpg]]
 

---

4.2 自动分栏通过添加 ad-flex 进行分栏控制

collapse: open
title: ◼ 自动 ad 分栏案例（放在 ad 框的块自适应分栏）
color: 178,22,164
```ad-note
title: 📝 To-Do's
color: 158,42,15
- [ ] 完成新年 Flag
- [ ] 健身
- [ ] 马拉松
- [ ] ...
- [ ] ...
```
 
```ad-tip
title: ✅ Done
- [x] Go 学习
- [x] 2021 目标
- [ ] ...
- [x] ...
```
```ad-example
title: ⏳ Doing
- [ ] 学习
- [x] 考证
- [ ] ...
- [ ] ...
```

collapse: open
title: ◼ 通过`<div>`标记分栏块
color: 178,22,164
>需要自己控制分栏内容部分可以用`<div></div>`手动分割.注意`<div>`后加空行.
>通过`>`引用语法可以排除分栏
<div>
 
### 订单
- 蛋蛋
- 小强
- 小风
- 张三
- 李四
</div>
 
<div>
 
### 订单
- 蛋蛋
- 小强
- 小风
- 张三
- 李四
- 王老五
- dddd
- 隔壁老王
</div>

collapse: open
title: ◼ 通过`<div>`进行不规则分栏 -第一栏宽度固定，第二栏自适应
color: 178,22,164
>需要自己控制分栏内容部分可以用`<div></div>`手动分割.注意`<div>`后加空行.
>自定义第一栏宽度，第二栏自适应
<div style="width:150px;flex: none;">
 
## 心得
这个世界不会因为你的付出就必须给予回报，也不会因为你以怎样的方式对待别人，就要求他人同等对待你。人活在这世上，最难的就是保持一份谦卑和平和，而这份谦卑，来源于内心的真诚和踏实的努力。
</div>
 
<div>
 
## 《人生笔记》
不要羡慕别人的成功，那是牺牲了安逸换来的；不要羡慕别人的才华，那是私底下的努力换来的；不要羡慕别人的成熟，那是经历与沧桑换来的。可以欣赏，但不要嫉妒，因为那都是别人应该得到的。
 努力了、珍惜了、问心无愧就好，不期待突如其来的好运，只希望所有的努力终有回报。
 人生中要走很多路，有一条路不能回头，就是放弃的路；有一条路不能拒绝，就是成长的路；有一条路不能迷失，就是信念的路；有一条路不能停滞，就是奋斗的路；有一条路不能忘记，就是回家的路；信心满满的走好脚下的每条路，祝你生命中的每一天都很精彩。
</div>

collapse: open
title: ◼ 通过`<div>`进行不规则分栏 -三栏中间宽，两边窄
color: 178,22,164
>需要自己控制分栏内容部分可以用`<div></div>`手动分割.注意`<div>`后加空行.
>三个栏目每个栏目都可以通过 div 样式手动控制
<div style="width:20%;flex: none;">
 
## 第一栏
长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长
 
</div>
 
<div>
 
## 第二栏
第二栏第二栏第二栏第二栏第二栏第二栏第二栏第二栏第二栏第二栏第二栏第二栏第二栏第二栏
</div>
 
<div style="width:20%;flex: none;">
 
## 第三栏
长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长
 
</div>

title: 🎫 健身计划（自动分栏示例）
collapse: open
color: 78,22,64
> 健身是一个需要长此以往坚持的生活习惯，每个时期的目标各不相同，我们可以制定个长期的倒计时来督促鼓励自己~
```ad-note
title: 5️⃣ 五年目标
collapse: closed
color: 78,122,64
 
- [ ] 体重维持在 102 斤
- [ ] 有一项或几项喜欢并能坚持的运动
- [ ] ...
- [ ] ...
- [ ] ...
 
```
 
```ad-note
title: 4️⃣ 四个月目标
color: 255,255,255
- [ ] 有一项或几项喜欢并能坚持的
- [ ] 体脂率在 23%
- [ ] ...
- [ ] ...
 
```
 
```ad-note
title: 3️⃣ 3 周目标
color: 255,255,255
- [ ] 每天拉伸
- [ ] 建立规律运动的节奏
- [ ] 不熬夜、按时吃饭
- [ ] ...
 
```
 
```ad-note
title: 2️⃣ 2 日目标
color: 255,255,255
- [ ] HIIT 打卡 1 次
- [ ] ...
 
```
 
```ad-note
title: 1️⃣ 1 小时目标
color: 138,122,188
- [ ] 举铁打卡 1 次 💪
- [ ] 喝水...
- [ ] 伸展...
 
```

---

5 伪看板-任务嵌套

title: 📈 伪看板-任务嵌套
color: 55,205,75
collapse: open
> 可以随时对无序列表加入伪看板效果，不影响页面其他无需列表
- [ ] 紫色鸡蛋
	- [ ] Obsidian 其实是紫色鸡蛋
	- [ ] 不断灌输这个，他们就当真了
	- [ ] 不能告诉他们真相
- [ ] 其实那是鸭蛋
	- [ ] 事实太过残酷
	- [ ] 不忍直视
- [ ] 说笑的，那真是鸡蛋
	- [ ] 不信我也没办法
	- [ ] 信鸡蛋，得永生
- [ ] 说笑的，那真是鸡蛋
- [ ] 不信我也没办法
- [ ] 信鸡蛋，得永生
- 不加勾选框也可以
	- 不影响是不是鸡蛋的问题
	- 但是有序列表不可以
- 没有子项的列表
	- 3333
- 没有子项的列表 2
- 测试 3 没有子项的列表 2
- 没有子项的列表 2 没有子项的列表 2
- 没有子项的列表 2 没有子项的列表 2 没有子项的列表 2
- 没有子项的列表 2 没有子项的列表 2 没有子项的列表 2
 

title: 📈 伪看板-无序列表
color: 55,205,75
collapse: closed
- 蛋蛋
- 小强
- 小风
- 张三
- 李四
- 王老五
- 隔壁老王
- 蛋蛋
- 小强隔壁
- 小风
- 张三
- 李四
- 王老五
- 隔壁老王

5.1 伪看板-嵌套分栏

title: 📈 伪看板-嵌套 col2 分栏
color: 55,205,75
collapse: open
> 适合两栏内容高度确定的情况 ad-col2
```ad-col2
 
### 订单一
- 蛋蛋
- 小强
- 小风
- 李四
- 隔壁老王
- 333333
 
### 订单二
- 蛋蛋
- 小强
- 小风
- 张三
- 李四
- 王老五
- dddd
- 隔壁老王
 
 
```

title: 📈 伪看板-嵌套 flex 分栏
color: 55,205,75
collapse: open
> 适合内容高度不确定的情况 ad-flex +`<div>`分割
```ad-flex
<div>
 
### 订单一
- 蛋蛋
- 小强
- 小风
- 李四
- 隔壁老王
- 333333
</div>
 
<div>
 
### 订单二
- 蛋蛋
- 小强
- 小风
- 张三
- 李四
- 王老五
- dddd
- 隔壁老王
- 333
- 4444
</div>
```

---

6 公式定理排版效果

二阶行列式指 4 个数组成的符号，其概念起源于解线性方程组，是从二元与三元线性方程组的解的公式引出来的，因此我们首先讨论解方程组的问题。行列式是一个重要的数学工具，不仅在数学中有广泛的应用，在其他学科中也经常遇到。

title:二阶行列式
$$
\begin{cases} 3x+2y=7\\ 4x+3y=10\\ \end{cases}
$$

运算结果如下：

title:运算结果
$$
\left|
\begin{array}{cccc}
    3  &  2   \\
   4  &  3
\end{array}
\right|
=
3*3-2*4
$$
 

使用代数法解 2 元 1 次方程组：

title: 2 元 1 次方程组
$$
x = \frac{7*3-2*10}{3*3-2*4}
$$
 
$$
y = \frac{3*10-7*4}{3*3-2*4}
$$

7 触发效果框

这是一个隐藏框，鼠标点我才显示

8 MOC 示例

嵌套 ad 框的类型建议用 ad-flex

```ad-blank
>个人记录
- ✔ 待办事项
- ✅ 已完成事项
- ▶ 观影记录
- 📙 阅读记录
- ...
 
```
 
```ad-blank
>工作记录
- 🚩工作计划
- 🏳 未完成的计划
- ☢ Bug 清单
- 🔀 API 接口文档
- ...
 
```
 
```ad-blank
>教育记录
- ♎课程管理
- 📝 写作计划
- ✏ 实验记录
- ...
 
```