Bakkac's Blog

Components Preview

内容组件预览

这里集中展示三个新组件:可放大图片、支持 2/3 列并排的排版容器,以及 Excalidraw 文件预览。

1. 图片组件

点击图片可原地放大查看,适合正文中插图、流程截图和设计稿。

点击图片后会以原图比例弹层展示。
Vite 构建流程示意图
也可以通过 `align` 和 `width` 控制居中与尺寸。
AI coding Best Practice

2. 并排排版组件

`Columns` 默认移动端单列,桌面端切换成两列或三列,可放文本块,也可直接放图片组件。

双列文本

当一段说明需要和另一段对照阅读时,正文直接拆成两列会比连续长段更清晰。 这个容器会自动处理桌面端并排、移动端回落单列,以及内部首尾段落间距。

适合的场景

例如:概念对比、优缺点并列、同一主题的两个视角、或三张连续截图的并排展示。

图一
Vite 截图
图二
AI coding 截图
图三
HTML 渲染策略截图

3. Excalidraw 组件

支持直接读取仓库里的 `.excalidraw.md` 文件,并生成内嵌预览。

直接读取 JSON 版 Excalidraw 文件。
也支持 Obsidian Excalidraw 导出的压缩 markdown 文件。