iflux-next 项目包含 blog 和 docs 两个内容站点。MDX 让我们可以在 Markdown 中直接使用 React 组件,极大扩展了内容创作的可能性。
所有自定义 MDX 组件统一封装在 @iflux/ui/mdx 包中,通过 mdxComponents 映射注册到 MDX 渲染管线。使用标准 Markdown 语法(链接、图片、代码块、表格等)会自动命中对应的增强组件;交互型组件则通过 JSX 标签调用。
各组件用法参见后续页面。
每篇文章的 frontmatter(YAML 头部)支持以下字段:
draft | boolean | 否 | 设为 true 则不在列表中显示 |
series | string | 否 | 系列名称,同系列文章自动组织为教程 |
seriesOrder | number | 否 | 在系列中的排序,数字越小越靠前 |
updated | string | 否 | 最后更新日期 YYYY-MM-DD |
将多篇相关文章组织为教程系列:
设置了相同 series 的文章会自动:
所有交互型组件通过 JSX 标签 调用;HTML 元素覆盖类组件(链接、图片、代码块、表格等)直接使用 标准 Markdown 语法 即可自动命中增强版本。无需额外学习成本。
| PrevNext |
| 上下篇导航 |
<PrevNext prev={{}} next={{}}/> |
| LastUpdated | 最后更新时间 | <LastUpdated date="" author=""/> |
| MathInline | 行内数学公式 | <MathInline math="..."/> |
| MathBlock | 块级数学公式 | <MathBlock math="..."/> |
| MDXLink | 智能链接 | [text](url) |
| MDXImg | 优化图片 |  |
| MDXKbd | 键盘按键 | <kbd>key</kbd> |
| Heading | 自动锚点标题 | ## / ### |
| 表格 | 增强表格 | 标准 Markdown 表格 |
| 列表 | 增强列表 | 标准 Markdown 列表 |
| 引用块 | 增强引用 | > 引用 |
| 分隔线 | 统一分隔线 | --- |