Pixiv - KiraraShss
374 từ
2 phút
MDX 格式文章示例
Tip
Firefly 支持 MDX 和 Markdown 两种类型的文章，你可以在文章中混合使用两种格式，如果没有特别复杂内容和需求，推荐使用 Markdown 格式就够了。
Markdown 和 MDX 的区别
- Markdown (MD) 是一种轻量级标记语言，允许用户使用纯文本格式编写文档，然后将其转换为格式化的HTML。它因其简洁易用的语法而广受欢迎，特别适合编写文档和博客文章。
- MDX 是一种扩展了 Markdown 语法的格式，允许在 Markdown 文档中无缝地插入 JSX 代码。通过 MDX，用户可以在文档中嵌入 React 组件，从而实现更丰富的交互性和动态性。
| 特性 | Markdown | MDX |
|---|---|---|
| 基础语法 | 支持 (CommonMark) | 支持 (CommonMark) |
| HTML 标签 | 支持 | 支持 (作为 JSX) |
| 组件导入 | 不支持 | 支持 (import) |
| 动态数据 | 不支持 | 支持 (JS 表达式) |
| 样式定制 | 有限 (class/style) | 灵活 (className/CSS-in-JS) |
使用组件
这是一个图标组件：
import { Icon } from 'astro-icon/components'
<div class="flex items-center gap-2 my-4"> <Icon name="fa7-solid:rocket" class="text-4xl text-red-500" /> <span>火箭发射！</span></div>火箭发射！
使用 JSX
你也可以直接写 HTML/JSX：
<div className="p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4"> 这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。</div>这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。
简单的变量导出
export const year = new Date().getFullYear()
今年是 {year} 年。今年是 2026 年。
更多信息，请查看 MDX 文档
Ủng hộ & Chia sẻ
Nếu bài viết này giúp ích cho bạn, hãy chia sẻ hoặc ủng hộ tôi nhé!
MDX 格式文章示例
https://dieuthu.qzz.io/posts/mdx-example/ Cập nhật lần cuối vào 1970-01-02，20495 ngày trước
Một số nội dung có thể đã cũ
Khu vực bình luận
Chào mừng bạn đã ghé thăm blog của mình! Đây là một thông báo mẫu.
Âm nhạc
Hiện không phát
0:00 0:00
10
2
15
12,416
0 ngày
0 ngày trước