Markdown 与 Shortcode 演示
这是一份当前站点样式的示范页，集中展示常见的 Markdown 语法、代码块、提示块，以及常用 shortcode 组件。后续如果你想确认某个排版是否还在生效，先看这页就够了。
文本样式
这里有 加粗文本、斜体文本、删除线、高亮文本，也有内联代码 const site = "weichen.ink"。
你也可以在同一段里混合使用，比如 重点提醒、补充说明，或者在句子里插入一个内部链接 关于页 与一个外部链接 Astro。
列表与任务
- 这是一个无序列表
- 第二项里包含
inline code - 第三项里有一个 分类页
- 这是一个有序列表
- 第二步可以写得更长一点，用来观察换行和缩进
- 第三步适合放总结
- 已完成的事项
- 待处理的事项
- 可以继续补充说明
引用与 Callout
这是普通引用块。它会保留引用样式、边框和引号装饰，适合摘录、感想或单独引用一段话。
Note这是一个
notecallout，适合放补充说明、背景信息或阅读提示。
Info这是一个
infocallout，适合放步骤前的上下文说明。
Warning这是一个
warningcallout，适合标记风险、限制条件和常见误区。
代码展示
正文里的内联代码更适合放命令、变量名和短代码，比如 pnpm build、site.config.ts 或 showComments: false。
type Column = {
title: string;
count: number;
};
const columns: Column[] = [
{ title: "微尘周刊", count: 9 },
{ title: "Obsidian", count: 17 },
{ title: "省钱小妙招", count: 6 },
];
export function getTopColumn(items: Column[]) {
return items.sort((a, b) => b.count - a.count)[0];
}npm install
npm run dev
npm run build表格
| 模块 | 用途 | 适合场景 |
|---|---|---|
::media | 单图排版 | 教程插图、首页头像 |
:::gallery | 多图展示 | 截图集合、作品集 |
::bookmark | 链接卡片 | 外部资源推荐 |
::youtube | 视频嵌入 | 教程视频、演讲 |
折叠组件
点击展开更多说明
折叠组件适合放补充阅读、次要说明或长段落备注。
- 可以包含列表
- 也可以包含 加粗、斜体、
代码 - 展开后仍然保持正常的 Markdown 排版
分栏布局
左栏
这类分栏适合放并列信息，比如两个方案、两个优缺点，或者左右对照的说明内容。
右栏
在窄屏下它会自动堆叠，所以内容最好仍然保持自然阅读，不要强依赖桌面端并排结构。
按钮
了解我 查看文章 浏览分类Media 单图排版
右侧圆形头像
::media 适合把图片插进正文流里，而不是单独占满一整行。像首页开场、作者头像、栏目形象图这种偏轻量的视觉元素，用圆形靠右的形式会更自然。
它不会吞掉正文内容，你只需要先插入图片，再继续写段落。桌面端会形成图文并排感，移动端则会自动退化成普通居中图。
右侧教程截图
这种形式尤其适合教程。你可以把一张界面截图缩小后靠右放置，左边继续写步骤说明，这样页面节奏会比“每张图都占满一整屏”更紧凑。
如果下面紧接着进入新章节、列表或代码块，布局也会自动清掉浮动，不会把后面的模块卡在图片旁边。
左侧教程截图
左侧版本适合用来打破单一节奏。对于一篇较长的教程，交替使用 align="left" 和 align="right"，会比所有插图都固定在同一侧更耐看。
普通居中图
不是所有图片都适合环绕。像流程总览图、分类视觉图、封面图，居中展示通常更稳定，也更符合读者对“大图”的阅读预期。
Gallery 相册
智能排版
宽版相册
Bento 拼贴
链接与视频
Bookmark
Astro
GitHub
YouTube
卡片组件
纵向卡片
横向卡片
结尾说明
如果后续你又新增了 shortcode、调整了代码块样式，或者重新设计了 callout / 图片规则，这页就应该同步更新。它现在的职责不是“炫技”，而是作为整站 Markdown 与组件排版的基准样板。