songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update Tabs component usage in documentation files

Browse Source 
- Replaced `groupId` prop with `items` prop in `<Tabs>` components across multiple MDX files for consistency.
- Added `<Tab>` components for "Fumadocs MDX" and "Content Collections" in relevant sections to enhance content organization.
- Improved code readability and maintainability by structuring tab content more clearly.
This commit is contained in:
javayhu 2025-04-01 15:47:08 +08:00
parent 7f4265892d
commit 746f450a89
8 changed files with 272 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
content/blog/manual-installation.mdx
View File

@ -103,8 +103,9 @@ Create a catch-all route `/app/docs/[[...slug]]` for docs pages.
In the page, wrap your content in the [Page](/docs/layouts/page) component.
It may vary depending on your content source. You should configure static rendering with `generateStaticParams` and metadata with `generateMetadata`.
<Tabs groupId='content-source' items={['Fumadocs MDX', 'Content Collections']}>
<Tabs items={['Fumadocs MDX', 'Content Collections']}>
<Tab value='Fumadocs MDX'>
```json doc-gen:file
{
"file": "../../examples/next-mdx/app/docs/[[...slug]]/page.tsx",
@ -113,7 +114,9 @@ It may vary depending on your content source. You should configure static render
}
}
```
</Tab>
<Tab value='Content Collections'>
```json doc-gen:file
{
"file": "../../examples/content-collections/app/docs/[[...slug]]/page.tsx",
@ -122,6 +125,7 @@ It may vary depending on your content source. You should configure static render
}
}
```
</Tab>
</Tabs>
@ -129,8 +133,9 @@ It may vary depending on your content source. You should configure static render
Use the default document search based on Orama.
<Tabs groupId='content-source' items={['Fumadocs MDX', 'Content Collections']}>
<Tabs items={['Fumadocs MDX', 'Content Collections']}>
<Tab value='Fumadocs MDX'>
```json doc-gen:file
{
"file": "../../examples/next-mdx/app/api/search/route.ts",
@ -139,7 +144,9 @@ Use the default document search based on Orama.
}
}
```
</Tab>
<Tab value='Content Collections'>
```json doc-gen:file
{
"file": "../../examples/content-collections/app/api/search/route.ts",
@ -148,6 +155,7 @@ Use the default document search based on Orama.
}
}
```
</Tab>
</Tabs>

14
content/blog/manual-installation.zh.mdx
View File

@ -103,8 +103,9 @@ export default function Layout({ children }: { children: ReactNode }) {
在页面中，将您的内容包装在 [Page](/docs/layouts/page) 组件中。
这可能因您的内容源而异。您应该使用 `generateStaticParams` 配置静态渲染，并使用 `generateMetadata` 配置元数据。
<Tabs groupId='content-source' items={['Fumadocs MDX', 'Content Collections']}>
<Tabs items={['Fumadocs MDX', 'Content Collections']}>
<Tab value='Fumadocs MDX'>
```json doc-gen:file
{
"file": "../../examples/next-mdx/app/docs/[[...slug]]/page.tsx",
@ -113,7 +114,9 @@ export default function Layout({ children }: { children: ReactNode }) {
}
}
```
</Tab>
<Tab value='Content Collections'>
```json doc-gen:file
{
"file": "../../examples/content-collections/app/docs/[[...slug]]/page.tsx",
@ -122,15 +125,16 @@ export default function Layout({ children }: { children: ReactNode }) {
}
}
```
</Tab>
</Tabs>
### 搜索
使用基于 Orama 的默认文档搜索。
<Tabs groupId='content-source' items={['Fumadocs MDX', 'Content Collections']}>
<Tabs items={['Fumadocs MDX', 'Content Collections']}>
<Tab value='Fumadocs MDX'>
```json doc-gen:file
{
"file": "../../examples/next-mdx/app/api/search/route.ts",
@ -139,7 +143,9 @@ export default function Layout({ children }: { children: ReactNode }) {
}
}
```
</Tab>
<Tab value='Content Collections'>
```json doc-gen:file
{
"file": "../../examples/content-collections/app/api/search/route.ts",
@ -148,7 +154,7 @@ export default function Layout({ children }: { children: ReactNode }) {
}
}
```
</Tab>
</Tabs>
了解更多关于[文档搜索](/docs/headless/search)的信息。

38
content/blog/markdown.mdx
View File

@ -298,24 +298,34 @@ You can use code blocks with the `<Tab />` component.
````mdx
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
```ts tab="Tab 1"
console.log('A');
```
```ts tab="Tab 2"
console.log('B');
```
<Tabs items={['Tab 1', 'Tab 2']}>
<Tab value='Tab 1'>
```ts
console.log('A');
```
</Tab>
<Tab value='Tab 2'>
```ts
console.log('B');
```
</Tab>
</Tabs>
````
> Note that you can add MDX components instead of importing them in MDX files.
```ts tab="Tab 1"
console.log('A');
```
```ts tab="Tab 2"
console.log('B');
```
<Tabs items={['Tab 1', 'Tab 2']}>
<Tab value='Tab 1'>
```ts
console.log('A');
```
</Tab>
<Tab value='Tab 2'>
```ts
console.log('B');
```
</Tab>
</Tabs>
### Using Typescript Twoslash

93
content/blog/markdown.zh.mdx
View File

@ -251,4 +251,95 @@ console.log('Hello World');
```
````
### 高亮行
### 高亮行
````md
```tsx
<div>Hello World</div> // [\!code highlight]
<div>Hello World</div>
<div>Goodbye</div>
<div>Hello World</div>
```
````
### 高亮单词
您可以通过添加 `[!code word:<match>]` 来高亮特定单词。
````md
```js
// [\!code word:config]
const config = {
reactStrictMode: true,
};
```
````
### 差异
````mdx
```ts
console.log('hewwo'); // [\!code --]
console.log('hello'); // [\!code ++]
```
````
```ts
console.log('hewwo'); // [!code --]
console.log('hello'); // [!code ++]
```
### 标签组
您可以使用 `<Tab />` 组件与代码块一起使用。
````mdx
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Tab 1', 'Tab 2']}>
<Tab value='Tab 1'>
```ts
console.log('A');
```
</Tab>
<Tab value='Tab 2'>
```ts
console.log('B');
```
</Tab>
</Tabs>
````
> 注意，您可以在 MDX 文件中添加 MDX 组件，而不必导入它们。
<Tabs items={['Tab 1', 'Tab 2']}>
<Tab value='Tab 1'>
```ts
console.log('A');
```
</Tab>
<Tab value='Tab 2'>
```ts
console.log('B');
```
</Tab>
</Tabs>
### 使用 Typescript Twoslash
编写带有悬停类型信息和检测到类型错误的 Typescript 代码块。
默认情况下未启用。参见 [Twoslash](/docs/twoslash)。
## 图片
所有内置内容源都能正确处理图片。
图片会自动为 `next/image` 优化。
```mdx
![Image](/image.png)
```
## 可选功能
一些您可以启用的可选插件。

12
content/docs/manual-installation.mdx
View File

@ -98,8 +98,9 @@ Create a catch-all route `/app/docs/[[...slug]]` for docs pages.
In the page, wrap your content in the [Page](/docs/layouts/page) component.
It may vary depending on your content source. You should configure static rendering with `generateStaticParams` and metadata with `generateMetadata`.
<Tabs groupId='content-source' items={['Fumadocs MDX', 'Content Collections']}>
<Tabs items={['Fumadocs MDX', 'Content Collections']}>
<Tab value='Fumadocs MDX'>
```json doc-gen:file
{
"file": "../../examples/next-mdx/app/docs/[[...slug]]/page.tsx",
@ -108,7 +109,9 @@ It may vary depending on your content source. You should configure static render
}
}
```
</Tab>
<Tab value='Content Collections'>
```json doc-gen:file
{
"file": "../../examples/content-collections/app/docs/[[...slug]]/page.tsx",
@ -117,6 +120,7 @@ It may vary depending on your content source. You should configure static render
}
}
```
</Tab>
</Tabs>
@ -124,8 +128,9 @@ It may vary depending on your content source. You should configure static render
Use the default document search based on Orama.
<Tabs groupId='content-source' items={['Fumadocs MDX', 'Content Collections']}>
<Tabs items={['Fumadocs MDX', 'Content Collections']}>
<Tab value='Fumadocs MDX'>
```json doc-gen:file
{
"file": "../../examples/next-mdx/app/api/search/route.ts",
@ -134,7 +139,9 @@ Use the default document search based on Orama.
}
}
```
</Tab>
<Tab value='Content Collections'>
```json doc-gen:file
{
"file": "../../examples/content-collections/app/api/search/route.ts",
@ -143,6 +150,7 @@ Use the default document search based on Orama.
}
}
```
</Tab>
</Tabs>

14
content/docs/manual-installation.zh.mdx
View File

@ -98,8 +98,9 @@ export default function Layout({ children }: { children: ReactNode }) {
在页面中，将您的内容包装在 [Page](/docs/layouts/page) 组件中。
这可能因您的内容源而异。您应该使用 `generateStaticParams` 配置静态渲染，并使用 `generateMetadata` 配置元数据。
<Tabs groupId='content-source' items={['Fumadocs MDX', 'Content Collections']}>
<Tabs items={['Fumadocs MDX', 'Content Collections']}>
<Tab value='Fumadocs MDX'>
```json doc-gen:file
{
"file": "../../examples/next-mdx/app/docs/[[...slug]]/page.tsx",
@ -108,7 +109,9 @@ export default function Layout({ children }: { children: ReactNode }) {
}
}
```
</Tab>
<Tab value='Content Collections'>
```json doc-gen:file
{
"file": "../../examples/content-collections/app/docs/[[...slug]]/page.tsx",
@ -117,15 +120,16 @@ export default function Layout({ children }: { children: ReactNode }) {
}
}
```
</Tab>
</Tabs>
### 搜索
使用基于 Orama 的默认文档搜索。
<Tabs groupId='content-source' items={['Fumadocs MDX', 'Content Collections']}>
<Tabs items={['Fumadocs MDX', 'Content Collections']}>
<Tab value='Fumadocs MDX'>
```json doc-gen:file
{
"file": "../../examples/next-mdx/app/api/search/route.ts",
@ -134,7 +138,9 @@ export default function Layout({ children }: { children: ReactNode }) {
}
}
```
</Tab>
<Tab value='Content Collections'>
```json doc-gen:file
{
"file": "../../examples/content-collections/app/api/search/route.ts",
@ -143,7 +149,7 @@ export default function Layout({ children }: { children: ReactNode }) {
}
}
```
</Tab>
</Tabs>
了解更多关于[文档搜索](/docs/headless/search)的信息。

38
content/docs/markdown.mdx
View File

@ -293,24 +293,34 @@ You can use code blocks with the `<Tab />` component.
````mdx
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
```ts tab="Tab 1"
console.log('A');
```
```ts tab="Tab 2"
console.log('B');
```
<Tabs items={['Tab 1', 'Tab 2']}>
<Tab value='Tab 1'>
```ts
console.log('A');
```
</Tab>
<Tab value='Tab 2'>
```ts
console.log('B');
```
</Tab>
</Tabs>
````
> Note that you can add MDX components instead of importing them in MDX files.
```ts tab="Tab 1"
console.log('A');
```
```ts tab="Tab 2"
console.log('B');
```
<Tabs items={['Tab 1', 'Tab 2']}>
<Tab value='Tab 1'>
```ts
console.log('A');
```
</Tab>
<Tab value='Tab 2'>
```ts
console.log('B');
```
</Tab>
</Tabs>
### Using Typescript Twoslash

93
content/docs/markdown.zh.mdx
View File

@ -246,4 +246,95 @@ console.log('Hello World');
```
````
### 高亮行
### 高亮行
````md
```tsx
<div>Hello World</div> // [\!code highlight]
<div>Hello World</div>
<div>Goodbye</div>
<div>Hello World</div>
```
````
### 高亮单词
您可以通过添加 `[!code word:<match>]` 来高亮特定单词。
````md
```js
// [\!code word:config]
const config = {
reactStrictMode: true,
};
```
````
### 差异
````mdx
```ts
console.log('hewwo'); // [\!code --]
console.log('hello'); // [\!code ++]
```
````
```ts
console.log('hewwo'); // [!code --]
console.log('hello'); // [!code ++]
```
### 标签组
您可以使用 `<Tab />` 组件与代码块一起使用。
````mdx
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Tab 1', 'Tab 2']}>
<Tab value='Tab 1'>
```ts
console.log('A');
```
</Tab>
<Tab value='Tab 2'>
```ts
console.log('B');
```
</Tab>
</Tabs>
````
> 注意，您可以在 MDX 文件中添加 MDX 组件，而不必导入它们。
<Tabs items={['Tab 1', 'Tab 2']}>
<Tab value='Tab 1'>
```ts
console.log('A');
```
</Tab>
<Tab value='Tab 2'>
```ts
console.log('B');
```
</Tab>
</Tabs>
### 使用 Typescript Twoslash
编写带有悬停类型信息和检测到类型错误的 Typescript 代码块。
默认情况下未启用。参见 [Twoslash](/docs/twoslash)。
## 图片
所有内置内容源都能正确处理图片。
图片会自动为 `next/image` 优化。
```mdx
![Image](/image.png)
```
## 可选功能
一些您可以启用的可选插件。