` は保持されますが、`` は保持されません。Fumadocs MDX 以外では、`File`、`TypeTable`、`Callout`、`Card` が保持されます。この動作は `filterElement` で変更できます。
```ts tab="unified" title="source.config.ts"
import { defineConfig } from 'fumadocs-mdx/config';
export default defineConfig({
mdxOptions: {
remarkStructureOptions: {
filterElement: (node) => node.name === 'Callout' || node.name === 'Banner',
},
},
});
```
```ts tab="Sätteri" title="source.config.ts"
import { defineConfig, defineDocs } from 'fumadocs-mdx/config';
export const docs = defineDocs({
docs: { compiler: 'satteri' },
});
export default defineConfig({
satteriOptions: {
remarkStructureOptions: {
filterElement: (node) => node.name === 'Callout' || node.name === 'Banner',
},
},
});
```
## コンポーネント [#components]
Fumadocs MDX では、保持された JSX 要素は、レコードの読み取り方法に応じて次の 2 つの形式のいずれかで記録されます。
* `page.data.structuredData`: コンポーネントはレンダリングされません。要素は HTML タグとして保持され、検索ダイアログがそれをコンポーネントとしてレンダリングします。`async` または `dynamic` コレクションでは、読み込んだページから読み取ってください。
* `await page.data.structuredData()`: コンポーネントは [`search` ターゲット](/docs/headless/utils/markdown#targets)向けにレンダリングされ、要素はその Markdown 形式に置き換えられます。この関数を持つのは `async` および `dynamic` コレクションのみです。
レンダリング時、コンポーネントは MDX と同じ方法で解決されます。まずファイル内のインポートと宣言が参照され、次に[ページの props](/docs/headless/source-api#custom-props) の MDX コンポーネントが参照されます。
検索は `getPages()` からページを読み取りますが、これらのページにはカスタム props がありません。検索時にコンポーネントをレンダリングさせたい場合は、ファイル内でそのコンポーネントをインポートまたは宣言してください。
コンポーネントの検索用テキストは、[`asMarkdown()`](/docs/headless/utils/markdown#asmarkdown) で定義します。
```tsx
import { asMarkdown } from 'fumadocs-core/server';
export function ProductName() {
if (asMarkdown()) return 'Fumadocs';
return Fumadocs;
}
```
Markdown 形式を持たないコンポーネントは、ページの props に含まれていない MDX コンポーネントと同様に、JSX 構文のまま残ります。
## プラグイン [#plugins]
プラグインが挿入したノードは、レコードとして記録されません。プラグイン側で `data.structuredData` を使い、自身のノードのレコードを追加します。
```ts
node.data = {
...node.data,
structuredData: {
// `heading` のデフォルトは現在の見出しです
contents: [{ heading: undefined, content: 'Generated **content**' }],
},
};
```
執筆したコンテンツの Markdown をレコード内でのみ変更するには、[`replaceSource()`](/docs/headless/mdx/stringification#editing-the-output) で `search` 名前空間を編集してください。
## 関数として使用する [#as-a-function]
unified では、`structure()` を使って文字列からレコードを抽出できます。
```ts
import { structure } from 'fumadocs-core/mdx-plugins';
import remarkMath from 'remark-math';
// コンテンツに必要な remark プラグインを指定します
const data = structure(content, [remarkMath], options);
```
## オプション [#options]
### StructureOptions
| Prop | Type | Description |
| ---------------- | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `types?` | `string[] \| ((node: Nodes) => boolean) \| undefined` | MDAST node types to be scanned as a content block. If a node's type is listed in this array, it will be converted into a single content block, except tables which become a content block per row, along with the header row. Default: `['heading', 'paragraph', 'blockquote', 'table', 'mdxJsxFlowElement']` |
| `mdxTypes?` | `((node: JsxElement) => boolean) \| undefined` | Whether the MDX element should be treated as a single content block, only effective if `types` has `mdxJsxFlowElement`. Default: return `true` if the element is a leaf node, otherwise `false`. |
| `filterElement?` | `((node: JsxElement) => boolean) \| undefined` | Return `true` to keep a JSX element, other elements are replaced by their content. Kept elements are HTML tags, or render into Markdown like processed Markdown when the export is a function of the props. Default: `File`, `TypeTable`, `Callout` and `Card` elements, or the elements of components when the export is a function of the props. |
| `exportAs?` | `string \| boolean \| undefined` | export as `structuredData` (if true) or specified variable name. |