MDXカスタム要素とショートコードを使用します

MDXは、ブログ、スライドショー、コンポーネントドキュメントなどのコンテンツの強力な機能です。これにより、HTML要素、そのフォーマット、場所を心配することなくマークダウンを書き、必要に応じてカスタムリアクションコンポーネントの魔法を組み込むことができます。

この魔法を利用して、Markdown要素を独自のMDXコンポーネントに置き換えてMDXをカスタマイズする方法を見てみましょう。その過程で、これらのコンポーネントを使用するときに「短いコード」の概念を紹介します。

ここのコードスニペットはGatsbyjsとReactに基づいていることに注意する必要がありますが、MDXは異なるフレームワークでも使用できます。 MDXの開始を知る必要がある場合は、ここから始めてください。この記事では、このコンテンツをより高度なコンセプトに拡張します。

レイアウトの設定

ほとんどの場合、MDXベースのページをユニバーサルレイアウトでレンダリングしたいと考えています。このようにして、それらはウェブサイト上の他のコンポーネントと配置できます。使用しているMDXプラグインを使用して、デフォルトのレイアウトコンポーネントを指定できます。たとえば、 gatsby-plugin-mdxプラグインを次のように使用してレイアウトを定義できます。

 <code>{ resolve: `gatsby-plugin-mdx`, options: {  defaultLayouts: {   default: path.resolve('./src/templates/blog-post.js'),  },  // ...其他选项 } }</code>

これにはsrc/templates/blog-post.jsファイルに、受信するchildren小道具をレンダリングするコンポーネントが含まれる必要があります。

 <code>import { MDXRenderer } from 'gatsby-plugin-mdx'; function BlogPost({ children }) { return (</code> {子供たち}
 ）;
}


デフォルトのblogpostをエクスポートします。

プログラムでページを作成する場合、Gatsbyドキュメントで説明されているように、 MDXRendererというコンポーネントを使用して同じ機能を実現する必要があります。

カスタムマークダウン要素

MDXは、カスタムHTMLを作成してコンポーネントを反応させることを可能にする形式ですが、そのパワーはカスタムコンテンツでマークダウンをレンダリングすることです。しかし、これらのマークダウン要素が画面上でどのようにレンダリングされるかをカスタマイズしたい場合はどうなりますか？

私たちは確かにそれのためのリマーケブプラグインを書くことができますが、MDXは私たちにより良いより簡単な解決策を提供します。デフォルトでは、MarkDownは次の要素の一部をレンダリングします。

これらのデフォルト値をカスタムReactコンポーネントに置き換えるために、MDXにはMDXProviderというプロバイダーコンポーネントが付属しています。 React Context APIに依存して、新しいカスタムコンポーネントを注入し、MDXが提供するデフォルト値にマージします。

 <code>import React from 'react'; import { MDXProvider } from "@mdx-js/react"; import Image from './image-component'; function Layout({ children }) { return (<mdxprovider components="{{" h1:><h1 classname="text-xl font-light"></h1></mdxprovider></code> 、
   IMG：画像、
  }}>
   {子供たち}

 ）;
}


デフォルトのレイアウトをエクスポートします。

この例では、MDXファイルのH1タイトル（＃）は、プロバイダーコンポーネントのプロップで指定されたカスタム実装に置き換えられますが、他のすべての要素は引き続きデフォルト値を使用します。言い換えれば、 MDXProvider 、H1要素に対して作成したカスタムタグを取得し、MDXデフォルトとマージし、MDXファイルにタイトル1（＃）を記述するときにカスタムタグを適用できます。

MDXおよびカスタムコンポーネント

カスタムMDX要素は素晴らしいですが、独自のコンポーネントを混ぜたい場合はどうでしょうか。

 <code>--- title: 导入组件--- import Playground from './Playground';以下是关于我一直在构建的`Playground`组件的介绍：<playground></playground></code>

コンポーネントをMDXファイルにインポートし、任意のReactコンポーネントと同じように使用できます。もちろん、これはブログ投稿のコンポーネントデモに最適ですが、すべてのブログ投稿で遊び場を使用したい場合はどうなりますか？それらをすべてのページにインポートするのは苦痛です。代わりに、MDXはショートコードを使用するオプションを提供します。以下は、MDXドキュメントの短いコードの説明です。

[ショートコード]アプリケーションまたはWebサイトのすべてのドキュメントにコンポーネントを公開できます。これは、YouTube Embed、Twitterカード、またはドキュメントでよく使用されるものなどの一般的なコンポーネントにとって便利な機能です。

MDXアプリケーションにショートコードを含めるには、 MDXProviderコンポーネントに再度依存する必要があります。

 <code>import React from 'react'; import { MDXProvider } from "@mdx-js/react"; import Playground from './playground-wrapper'; function Layout({ children }) { return (<mdxprovider components="{{" h1:><h1 classname="text-xl font-light"></h1></mdxprovider></code> 、
   遊び場、
  }}>
   {子供たち}

 ）;
}


デフォルトのレイアウトをエクスポートします。

componentsオブジェクトにカスタムコンポーネントを含めると、MDXファイルをインポートせずに使用し続けることができます。

 <code>--- title: 演示概念---这是新概念的演示：<playground></playground> > 看，妈妈！不需要导入</code>

サブコンポーネントを直接動作させます

Reactでは、トップレベルのAPIを取得してReactを使用して子供のコンポーネントを操作します。これらのAPIを使用して、新しい小道具を子供のコンポーネントに渡すことができ、それにより注文を変更したり、可視性を決定したりできます。 MDXは、MDXが渡されたサブコンポーネントにアクセスするための特別なラッパーコンポーネントを提供します。

ラッパーを追加するには、以前と同じようにMDXProvider使用できます。

 <code>import React from "react"; import { MDXProvider } from "@mdx-js/react"; const components = { wrapper: ({ children, ...props }) => {  const reversedChildren = React.Children.toArray(children).reverse();  return {reversedChildren}>; }, }; export default (props) => (<mdxprovider components="{components}"></mdxprovider></code> {props.children}

）;

この例は、私たちが書いた順序の反対の順序で表示されるように、子要素を反転させます。

私たちは、すべての入ってくるMDXサブ要素をアニメーション化することもできます。

 <code>import React from "react"; import { MDXProvider } from "@mdx-js/react"; import { useTrail, animated, config } from "react-spring"; const components = { wrapper: ({ children, ...props }) => {  const childrenArray = React.Children.toArray(children);  const trail = useTrail(childrenArray.length, {   xy: [0, 0],   opacity: 1,   from: { xy: [30, 50], opacity: 0 },   config: config.gentle,   delay: 200,  });  return (</code>
    {trail.map（（{xy：[x、y]、ofacity}、index）=>（
<animated.div key="{index}" style="{{" transform: x.interpolate> `translate3d（$ {x} px、$ {y} px、0）`）、不透明}}>
      {childerArray [index]}
</animated.div>
    ））}

  ）;
 }、
};


エクスポートデフォルト（PROPS）=>（
<mdxprovider components="{components}">
<main>{props.children}</main>
</mdxprovider>
）;

要約します

MDXは、柔軟性を備えて設計されていますが、プラグインエクステンションではより強力にすることができます。 gatsby-plugin-mdxのおかげで、短期間で以下を行うことができます。

1. MDX出力のフォーマットに役立つデフォルトのレイアウトコンポーネントを作成します。
2. マークダウンからレンダリングされたデフォルトのHTML要素をカスタムコンポーネントに置き換えます。
3. ショートコードを使用して、各ファイルにコンポーネントをインポートする手間を取り除きます。
4. 子要素を直接操作してMDX出力を変更します。

繰り返しますが、これはMDXが静的なWebサイトのコンテンツの作成を簡素化するのに役立つもののほんの一部です。

MDXの詳細

• MDXの紹介
• フロントエンドドキュメント、スタイルガイド、MDXの台頭

以上がMDXカスタム要素とショートコードを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。