FumaMDX·All in One

所有需要的语法和工具, 都在这儿

Overview

使用方式

基于效率的考量, 对于高频使用语法, 一并提供对应的触发关键词, 模板配置
语法示例会使用3个Tab标签
- 示例, tab标题为 example
- 源码, tab标题为 source, 方便直接copy
- 触发关键词, tab标题为 @keywords

基础	高级
文档头部	步骤组
提示框	Mermaid绘图
文字处理	数学公式
卡片组	文件层级
Tab标签组	内部文件引用
FAQ问答组	接口参数定义

文档头部

标题

描述

文档头部示例

---
  title: 标题, 不允许为空
  description: 描述, 尽量不为空
  icon: Docs, 图标为可选; 如果标识了icon字段但未设置icon值或者是不支持的icon值, 则显示默认图标
---

触发关键词

  @mdxfm  生成mdx文件头信息

提示框

这是无标题的info提示框

info提示框

这是info提示框, 用于提示信息

warn提示框

这是warn提示框, 用于警告信息

success提示框

这是success提示框, 用于成功信息

error提示框

这是error提示框, 用于错误信息

提示框示例

<Callout type="info">
  这是`无标题`的info提示框
</Callout> 

<Callout title="info提示框" type="info">
  这是`info`提示框, 用于提示信息
</Callout>

<Callout title="warn提示框" type="warn">
  这是warn提示框, 用于警告信息
</Callout>

<Callout title="success提示框" type="success">
  这是`success`提示框, 用于成功信息
</Callout>

<Callout title="error提示框" type="error">
  这是`error`提示框, 用于错误信息
</Callout>

触发关键词

  @mdxmsgi
  @mdxmsgw
  @mdxmsge
  @mdxmsgs
  @mdxmsg   预留的触发关键词, 自己指定类型, 省去记忆

文字处理

这是3级标题, 使用`###`号

这是加粗文字, 高频使用快捷键 ⌃ + ⌥ + B

这是斜体文字, 高频使用快捷键 ⌃ + ⌥ + I

~~这是删除线文字~~, 高频使用快捷键 ⌃ + ⌥ + X

这是高亮文字, 高频使用快捷键 ⌃ + ⌥ + `

这是列表项文字, ●标记
- 这是子项行文字, 缩进4个空格(推荐)|或者一个Tab
- 这是子项行文字, 缩进4个空格(推荐)|或者一个Tab

这是下划线文字

这是黄色背景标记文字

这是超链接

文字处理示例

### 这是3级标题, 使用`###`号
**这是加粗文字**, 高频使用快捷键 `⌃ + ⌥ + B`

*这是斜体文字*, 高频使用快捷键 `⌃ + ⌥ + I`

~~这是删除线文字~~, 高频使用快捷键 `⌃ + ⌥ + X`

这是`高亮文字`, 高频使用快捷键 ```⌃ + ⌥ + ` ```

* 这是项目行文字, `●`标记
    - 子项行文字, `缩进4个空格(推荐)`|或者一个Tab
    * 子项行文字, `缩进4个空格(推荐)`|或者一个Tab

这是<u>下划线文字</u>

这是<mark>黄色背景标记文字</mark>

[这是超链接](https://ddaas.d8ger.com)

卡片组

图标+跳转

所见即所得(What you see is what you get, and what you'll get is what you've ever seen)

无图标+跳转

充分利用现代IDE的代码模板注入功能, 省去大量重复编码操作, 提高开发效率

无图标+无跳转

只是问题卡片

卡片组mdx源码

  <Cards>
    <Card icon={<Download />}  href="./ddaas" title="图标+跳转">
      **`所见即所得`**(What you see is what you get, and what you'll get is what you've ever seen)
    </Card>
    <Card href="./mdx-snippets" title="无图标+跳转">
      充分利用现代IDE的**代码模板**注入功能, 省去大量重复编码操作, 提高开发效率
    </Card>
    <Card title="无图标+无跳转">
      只是问题卡片
    </Card>
  </Cards>

触发关键词

  @mdxcg
  @mdxscard

卡片参数

Prop

Type

Tab标签组

简单模式

这是Tab1

这是Tab2

简单模式示例

<Tabs groupId="example-easy-tabs" items={["tab1", "tab2"]}>
  <Tab value="tab1">
    这是Tab1
  </Tab>
  <Tab value="tab2">
    这是Tab2  
  </Tab>
</Tabs>

触发关键词

@mdxtabs  生成mdx标签Tab组
@mdxstab  生成mdx单个标签Tab组子项

安装包模式

npm install clerk@clerk-next

pnpm add clerk@clerk-next

安装包模式示例

<Tabs groupId="package-manager" persist items={["npm", "pnpm"]}>
  ```bash tab="npm"
  npm install clerk@clerk-next
  ```

  ```bash tab="pnpm"
  pnpm add clerk@clerk-next
  ```
</Tabs>

触发关键词

@mdxinstalltab  生成mdx安装命令Tab

FAQ问答组

FAQ问答组示例

<Accordions>
  <Accordion id="how-to-put-elephant" title="怎样把大象装进冰箱?">
    ### 1. 步骤1 [!toc]
    打开冰箱门

    ### 2. 步骤2 [!toc]
    把大象装进去

    ### 3. 步骤3 [!toc]
    关上冰箱门
  </Accordion>
  <Accordion id="faq" title="FAQ使用说明">
    `id`字段可选, 如果指定, 那么该faq就能生成分享链接
  </Accordion>
</Accordions>

触发关键词

@mdxfaq     生成mdx问答组
@mdxsfaq    生成mdx问答组子项

标题式步骤组

上文FAQ问答示例就是一个简单的步骤组演示, 只不过它在目录中隐藏了步骤标题

弃用FumaDocs的Step组件

FumaDocs提供的remarkSteps插件, 支持标题式步骤组, 这更符合人类习惯

所以, 本项目从代码层面弃用Step组件, 强力支持标题式步骤组的写法

标题式步骤组规则

不支持步骤组嵌套, 因为FumaDocs底层暂不支持, 重写代价大, 并且从DDaaS角度, 如果需要步骤组嵌套, 说明文档不够简练、不容易懂
命名规则规则: ###(强烈推荐固定写法) + 空格 + 步骤编号数字≤19 + 英文. + 至少1个空格 + 标题名称, 例如: ### 1. 三级标题的步骤1
不满足规则的, 会自动降级为普通标题; 步骤编号也由文档指定, TOC底层解析不会自动递增编号, 正文渲染会自动递增, 便于发现更改错误
多个步骤组之间用不同层级的普通标题分隔开来, 例如: h2、h4的标题

使用快捷命令

@mdxstep, 生成标准格式

输入步骤编号

注意编号需要你自己维护递增

输入步骤标题

输入描述

Mermaid绘图

人生路径图·By 李笑来

Mermaid绘图示例

<Mermaid
  title="人生路径图·By 李笑来"
  chart="
  flowchart LR
    S[起点]
    ST[自学]
    K[知识]
    OK[其他知识]
    IK[投资知识]
    SK[销售知识]
    PK[生产知识]
    P[追求]
    I[投资]
    SA[销售]
    PR[生产]
    MF[(精神财富)]
    PF[(物质财富)]
    DO[做更多的事]

    S--->ST--->K
    K--->OK
    K--->IK
    K--->SK
    K--->PK
    OK--->P--->MF
    IK--->I--->PF
    SK--->SA--->PF
    PK--->PR--->PF

    MF--->DO
    PF--->DO
    S-...->|时间|DO

  "/>

触发关键词

@mdxmermaid  生成mdx图标Mermaid

数学公式

f(x)=\frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{(x - \mu)^2}{2\sigma^2}}

数学公式示例

  ```math title="正态分布公式"
    f(x)=\frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{(x - \mu)^2}{2\sigma^2}}
  ```

触发关键词

@mdxmath  生成mdx数学公式

文件层级

这是普通文件.tsx

这是锁定文件.txt

继承父目录的置灰文件1.tsx

继承父目录的置灰文件2.txt

文件层级示例

<Files>
  <ZiaFolder name="这是默认展开的文件夹" defaultOpen>
    <ZiaFile name="这是普通文件.tsx" />
    <ZiaFile icon={<FileLock2 />} name="这是锁定文件.txt" className="opacity-50"/>
    <ZiaFolder name="这是置灰文件夹" defaultOpen className="opacity-50">
      <ZiaFile name="继承父目录的置灰文件1.tsx" />
      <ZiaFile name="继承父目录的置灰文件2.txt" />
    </ZiaFolder>
    <ZiaFolder name="这是默认关闭的文件夹">
      <ZiaFile name="Search.tsx" />
    </ZiaFolder>
  </ZiaFolder>
  <ZiaFolder name="这是空文件夹" className="opacity-50" disabled/>
</Files>

触发关键词

@mdxfiles    生成mdx文件系统示意图
@mdxfile     生成mdx单个文件
@mdxlfile    生成mdx🔐锁定文件
@mdxfolder   生成mdx文件夹
@mdxifolder  生成mdx置灰文件夹
@mdxefolder  生成mdx空文件夹

内部文件引用

i18n.ts

import { getRequestConfig } from 'next-intl/server';
import { appConfig } from "@/lib/appConfig";
import type { I18nConfig } from 'fumadocs-core/i18n';
 
export const i18n: I18nConfig = {
  defaultLanguage: appConfig.i18n.defaultLocale,
  languages: appConfig.i18n.locales as unknown as string[],
  hideLocale: appConfig.i18n.localePrefixAsNeeded ? "default-locale" : "never",
}

// Can be imported from a shared config
const locales = appConfig.i18n.locales;

export default getRequestConfig(async ({ requestLocale }) => {
  let locale = await requestLocale;
  // Ensure that the incoming locale is valid
  if ( !locale || !locales.includes(locale as (typeof locales)[number])) {
    locale = appConfig.i18n.defaultLocale;
  }

  return {
    locale,
    messages: (await import(`../messages/${locale}.json`)).default
  };
});

内部文件引用示例

<include cwd lang="ts" meta='title="i18n.ts"'>
  src/i18n.ts
</include>

触发关键词

@mdxitabs   生成mdx引入文件Tab组
@mdxistab   生成mdx单个引入文件Tab组子项
@mdxif      生成mdx单独引入文件

FumaMDX·All in One

所有需要的语法和工具, 都在这儿

Overview

使用方式

基于效率的考量, 对于高频使用语法, 一并提供对应的触发关键词, 模板配置
语法示例会使用3个Tab标签
- 示例, tab标题为 example
- 源码, tab标题为 source, 方便直接copy
- 触发关键词, tab标题为 @keywords

基础	高级
文档头部	步骤组
提示框	Mermaid绘图
文字处理	数学公式
卡片组	文件层级
Tab标签组	内部文件引用
FAQ问答组	接口参数定义

文档头部

标题

描述

文档头部示例

---
  title: 标题, 不允许为空
  description: 描述, 尽量不为空
  icon: Docs, 图标为可选; 如果标识了icon字段但未设置icon值或者是不支持的icon值, 则显示默认图标
---

触发关键词

  @mdxfm  生成mdx文件头信息

提示框

这是无标题的info提示框

info提示框

这是info提示框, 用于提示信息

warn提示框

这是warn提示框, 用于警告信息

success提示框

这是success提示框, 用于成功信息

error提示框

这是error提示框, 用于错误信息

提示框示例

<Callout type="info">
  这是`无标题`的info提示框
</Callout> 

<Callout title="info提示框" type="info">
  这是`info`提示框, 用于提示信息
</Callout>

<Callout title="warn提示框" type="warn">
  这是warn提示框, 用于警告信息
</Callout>

<Callout title="success提示框" type="success">
  这是`success`提示框, 用于成功信息
</Callout>

<Callout title="error提示框" type="error">
  这是`error`提示框, 用于错误信息
</Callout>

触发关键词

  @mdxmsgi
  @mdxmsgw
  @mdxmsge
  @mdxmsgs
  @mdxmsg   预留的触发关键词, 自己指定类型, 省去记忆

文字处理

这是3级标题, 使用`###`号

这是加粗文字, 高频使用快捷键 ⌃ + ⌥ + B

这是斜体文字, 高频使用快捷键 ⌃ + ⌥ + I

~~这是删除线文字~~, 高频使用快捷键 ⌃ + ⌥ + X

这是高亮文字, 高频使用快捷键 ⌃ + ⌥ + `

这是列表项文字, ●标记
- 这是子项行文字, 缩进4个空格(推荐)|或者一个Tab
- 这是子项行文字, 缩进4个空格(推荐)|或者一个Tab

这是下划线文字

这是黄色背景标记文字

这是超链接

文字处理示例

### 这是3级标题, 使用`###`号
**这是加粗文字**, 高频使用快捷键 `⌃ + ⌥ + B`

*这是斜体文字*, 高频使用快捷键 `⌃ + ⌥ + I`

~~这是删除线文字~~, 高频使用快捷键 `⌃ + ⌥ + X`

这是`高亮文字`, 高频使用快捷键 ```⌃ + ⌥ + ` ```

* 这是项目行文字, `●`标记
    - 子项行文字, `缩进4个空格(推荐)`|或者一个Tab
    * 子项行文字, `缩进4个空格(推荐)`|或者一个Tab

这是<u>下划线文字</u>

这是<mark>黄色背景标记文字</mark>

[这是超链接](https://ddaas.d8ger.com)

卡片组

图标+跳转

所见即所得(What you see is what you get, and what you'll get is what you've ever seen)

无图标+跳转

充分利用现代IDE的代码模板注入功能, 省去大量重复编码操作, 提高开发效率

无图标+无跳转

只是问题卡片

卡片组mdx源码

  <Cards>
    <Card icon={<Download />}  href="./ddaas" title="图标+跳转">
      **`所见即所得`**(What you see is what you get, and what you'll get is what you've ever seen)
    </Card>
    <Card href="./mdx-snippets" title="无图标+跳转">
      充分利用现代IDE的**代码模板**注入功能, 省去大量重复编码操作, 提高开发效率
    </Card>
    <Card title="无图标+无跳转">
      只是问题卡片
    </Card>
  </Cards>

触发关键词

  @mdxcg
  @mdxscard

卡片参数

Prop

Type

Tab标签组

简单模式

这是Tab1

这是Tab2

简单模式示例

<Tabs groupId="example-easy-tabs" items={["tab1", "tab2"]}>
  <Tab value="tab1">
    这是Tab1
  </Tab>
  <Tab value="tab2">
    这是Tab2  
  </Tab>
</Tabs>

触发关键词

@mdxtabs  生成mdx标签Tab组
@mdxstab  生成mdx单个标签Tab组子项

安装包模式

npm install clerk@clerk-next

pnpm add clerk@clerk-next

安装包模式示例

<Tabs groupId="package-manager" persist items={["npm", "pnpm"]}>
  ```bash tab="npm"
  npm install clerk@clerk-next
  ```

  ```bash tab="pnpm"
  pnpm add clerk@clerk-next
  ```
</Tabs>

触发关键词

@mdxinstalltab  生成mdx安装命令Tab

FAQ问答组

FAQ问答组示例

<Accordions>
  <Accordion id="how-to-put-elephant" title="怎样把大象装进冰箱?">
    ### 1. 步骤1 [!toc]
    打开冰箱门

    ### 2. 步骤2 [!toc]
    把大象装进去

    ### 3. 步骤3 [!toc]
    关上冰箱门
  </Accordion>
  <Accordion id="faq" title="FAQ使用说明">
    `id`字段可选, 如果指定, 那么该faq就能生成分享链接
  </Accordion>
</Accordions>

触发关键词

@mdxfaq     生成mdx问答组
@mdxsfaq    生成mdx问答组子项

标题式步骤组

上文FAQ问答示例就是一个简单的步骤组演示, 只不过它在目录中隐藏了步骤标题

弃用FumaDocs的Step组件

FumaDocs提供的remarkSteps插件, 支持标题式步骤组, 这更符合人类习惯

所以, 本项目从代码层面弃用Step组件, 强力支持标题式步骤组的写法

标题式步骤组规则

不支持步骤组嵌套, 因为FumaDocs底层暂不支持, 重写代价大, 并且从DDaaS角度, 如果需要步骤组嵌套, 说明文档不够简练、不容易懂
命名规则规则: ###(强烈推荐固定写法) + 空格 + 步骤编号数字≤19 + 英文. + 至少1个空格 + 标题名称, 例如: ### 1. 三级标题的步骤1
不满足规则的, 会自动降级为普通标题; 步骤编号也由文档指定, TOC底层解析不会自动递增编号, 正文渲染会自动递增, 便于发现更改错误
多个步骤组之间用不同层级的普通标题分隔开来, 例如: h2、h4的标题

使用快捷命令

@mdxstep, 生成标准格式

输入步骤编号

注意编号需要你自己维护递增

输入步骤标题

输入描述

Mermaid绘图

人生路径图·By 李笑来

Mermaid绘图示例

<Mermaid
  title="人生路径图·By 李笑来"
  chart="
  flowchart LR
    S[起点]
    ST[自学]
    K[知识]
    OK[其他知识]
    IK[投资知识]
    SK[销售知识]
    PK[生产知识]
    P[追求]
    I[投资]
    SA[销售]
    PR[生产]
    MF[(精神财富)]
    PF[(物质财富)]
    DO[做更多的事]

    S--->ST--->K
    K--->OK
    K--->IK
    K--->SK
    K--->PK
    OK--->P--->MF
    IK--->I--->PF
    SK--->SA--->PF
    PK--->PR--->PF

    MF--->DO
    PF--->DO
    S-...->|时间|DO

  "/>

触发关键词

@mdxmermaid  生成mdx图标Mermaid

数学公式

f(x)=\frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{(x - \mu)^2}{2\sigma^2}}

数学公式示例

  ```math title="正态分布公式"
    f(x)=\frac{1}{\sqrt{2\pi}\sigma}e^{-\frac{(x - \mu)^2}{2\sigma^2}}
  ```

触发关键词

@mdxmath  生成mdx数学公式

文件层级

这是普通文件.tsx

这是锁定文件.txt

继承父目录的置灰文件1.tsx

继承父目录的置灰文件2.txt

文件层级示例

<Files>
  <ZiaFolder name="这是默认展开的文件夹" defaultOpen>
    <ZiaFile name="这是普通文件.tsx" />
    <ZiaFile icon={<FileLock2 />} name="这是锁定文件.txt" className="opacity-50"/>
    <ZiaFolder name="这是置灰文件夹" defaultOpen className="opacity-50">
      <ZiaFile name="继承父目录的置灰文件1.tsx" />
      <ZiaFile name="继承父目录的置灰文件2.txt" />
    </ZiaFolder>
    <ZiaFolder name="这是默认关闭的文件夹">
      <ZiaFile name="Search.tsx" />
    </ZiaFolder>
  </ZiaFolder>
  <ZiaFolder name="这是空文件夹" className="opacity-50" disabled/>
</Files>

触发关键词

@mdxfiles    生成mdx文件系统示意图
@mdxfile     生成mdx单个文件
@mdxlfile    生成mdx🔐锁定文件
@mdxfolder   生成mdx文件夹
@mdxifolder  生成mdx置灰文件夹
@mdxefolder  生成mdx空文件夹

内部文件引用

i18n.ts

import { getRequestConfig } from 'next-intl/server';
import { appConfig } from "@/lib/appConfig";
import type { I18nConfig } from 'fumadocs-core/i18n';
 
export const i18n: I18nConfig = {
  defaultLanguage: appConfig.i18n.defaultLocale,
  languages: appConfig.i18n.locales as unknown as string[],
  hideLocale: appConfig.i18n.localePrefixAsNeeded ? "default-locale" : "never",
}

// Can be imported from a shared config
const locales = appConfig.i18n.locales;

export default getRequestConfig(async ({ requestLocale }) => {
  let locale = await requestLocale;
  // Ensure that the incoming locale is valid
  if ( !locale || !locales.includes(locale as (typeof locales)[number])) {
    locale = appConfig.i18n.defaultLocale;
  }

  return {
    locale,
    messages: (await import(`../messages/${locale}.json`)).default
  };
});

内部文件引用示例

<include cwd lang="ts" meta='title="i18n.ts"'>
  src/i18n.ts
</include>

触发关键词

@mdxitabs   生成mdx引入文件Tab组
@mdxistab   生成mdx单个引入文件Tab组子项
@mdxif      生成mdx单独引入文件

Why DDaaS?

图标+跳转

无图标+跳转

无图标+无跳转

怎样把大象装进冰箱?

FAQ使用说明

On this page

Why DDaaS?

图标+跳转

无图标+跳转

无图标+无跳转

怎样把大象装进冰箱?

FAQ使用说明

On this page