你好

这是我的第一篇技术博客

欢迎来到我的技术博客

这是一个使用 MDX 编写的页面。MDX 的强大之处在于你可以在 Markdown 中直接使用 React 组件。

1. 基础语法测试

你可以像平时一样编写 Markdown：

💡 提示： 确保你的 contentlayer.config.ts 中的 fields 定义了 title, date, summary 和 tags，否则构建会报错。

2. 代码高亮测试 (Shiki)

既然我们配置了 rehype-pretty-code，你的代码块看起来会非常漂亮：

// src/app/hello.ts
export const greet = (name: string): string => {
  return `Hello, ${name}! Welcome to my blog.`;
};
 
console.log(greet("Jade"));
 
下面是一个Markdown 语法总结，偏实用，覆盖你刚才用到的内容，也适合写博客或 MDX 页面。
 
⸻
 
1. 标题（Heading）
 
# 一级标题
## 二级标题
### 三级标题
 
用 # 的数量表示层级。
 
⸻
 
2. 文本样式
 
**粗体**
*斜体*
~~删除线~~
`行内代码`
 
效果直观，常用于强调和标注代码。
 
⸻
 
3. 列表
 
无序列表
 
- 项目一
- 项目二
  - 子项目
 
有序列表
 
1. 第一项
2. 第二项
 
 
⸻
 
4. 链接与图片
 
链接
 
[GitHub](https://github.com)
 
图片
 
![图片说明](image.png)
 
 
⸻
 
5. 引用（Blockquote）
 
> 这是引用内容
 
常用于提示、说明或引用他人观点。
 
⸻
 
6. 代码块（Code Block）
 
普通代码块
 
 
 
code
 
 
 
带语言高亮
 
```typescript
const a: number = 1;
 
在博客中通常配合 Shiki 或 Prism 使用。
 
---
 
## 7. 分割线
 
```md
---
 
用于区分内容块。
 
⸻
 
8. 表格
 
| 名称 | 说明 |
|------|------|
| MDX  | Markdown + JSX |
| Shiki | 代码高亮 |
 
 
⸻
 
9. MDX 特有能力（你这个页面用到的）
	•	可以在 Markdown 中直接写 React 组件
	•	可以导入组件并使用
	•	适合技术博客和文档站
 
示例：
 
<MyComponent title="Hello" />
 
 
⸻
← 返回首页