Mdx – Nextra

MDX基础知识

MDX是Markdown和JSX的结合，允许你在Markdown文件中使用React组件。以下是一些常用用法：

这是一个真实可点击的按钮：

基本Markdown语法

# 一级标题
## 二级标题
### 三级标题
 
**粗体文本**
*斜体文本*
~~删除线~~
 
- 无序列表项
- 另一个列表项
 
1. 有序列表项
2. 另一个有序列表项
 
> 引用块文本
 
[链接文本](https://example.com)
 
![图片描述](图片URL)
 
`行内代码`
 
水平分割线:
---

在MDX中使用React组件

import { Button } from '../components/Button'
 
# 使用React组件
 
下面是一个按钮组件：
 
<Button onClick={() => alert('点击了!')}>点击我</Button>

下面是一个真实的可点击按钮示例：

导出变量和组件

export const myVariable = '这是一个变量'
 
export function MyComponent() {
  return <div>这是一个自定义组件</div>
}
 
# 使用导出的内容
 
变量值: {myVariable}
 
<MyComponent />

代码块与语法高亮

```javascript
function hello() {
  console.log('你好，世界!');
}
```
 
```css
.container {
  display: flex;
  padding: 20px;
}
```

使用前置元数据（Front Matter）

---
title: 页面标题
description: 页面描述
date: 2023-06-15
toc: false
---
 
# 内容从这里开始

条件渲染

export const showExtraContent = true;
 
# 主要内容
 
{showExtraContent && (
  <div>
    <h2>额外内容</h2>
    <p>这部分内容只在条件为真时显示</p>
  </div>
)}

导入其他MDX文件

import OtherContent from './other-content.mdx'
 
# 主页面内容
 
<OtherContent />

在MDX中使用props

export default function MDXContent({children, specialProp}) {
  return (
    <div className="my-mdx-layout">
      <h2>特殊属性值: {specialProp}</h2>
      {children}
    </div>
  )
}
 
# 正文内容开始
 
这是正文部分

实用例子：创建标签页

import { Tabs, Tab } from '../components/Tabs'
 
<Tabs>
  <Tab title="JavaScript">
    ```javascript
    console.log('Hello from JavaScript');
    ```
  </Tab>
  <Tab title="Python">
    ```python
    print("Hello from Python")
    ```
  </Tab>
  <Tab title="Java">
    ```java
    System.out.println("Hello from Java");
    ```
  </Tab>
</Tabs>

这些是MDX中最常用的功能，结合Markdown的简洁性和React的强大功能，可以创建更丰富的内容展示方式。