Travailler avec les éléments personnalisés MDX et les shortcodes

MDX est une fonctionnalité puissante de contenu tel que les blogs, les diaporamas et les documents de composants. Il vous permet d'écrire Markdown sans vous soucier des éléments HTML, de leur formatage et de leur emplacement, et d'incorporer la magie des composants de réaction personnalisés en cas de besoin.

Profitons de cette magie et voyons comment personnaliser MDX en remplaçant l'élément Markdown par nos propres composants MDX. Dans le processus, nous présenterons le concept de "code court" lors de l'utilisation de ces composants.

Il convient de noter que les extraits de code ici sont basés sur GATSBYJS et React, mais MDX peut également être utilisé avec différents cadres. Si vous avez besoin de connaître le début de MDX, commencez ici. Cet article étend ce contenu dans un concept plus avancé.

Configuration de la disposition

Nous voulons presque toujours rendre les pages basées sur MDX dans une disposition universelle. De cette façon, ils peuvent être organisés avec d'autres composants sur le site Web. Nous pouvons spécifier le composant de mise en page par défaut à l'aide du plugin MDX que nous utilisons. Par exemple, nous pouvons définir une disposition à l'aide gatsby-plugin-mdx comme suit:

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

Cela nécessite que src/templates/blog-post.js contient un composant qui rendra children accessoires qu'il reçoit.

 <code>import { MDXRenderer } from 'gatsby-plugin-mdx'; function BlogPost({ children }) { return (</code> {enfants}
 ));
}


Exporter le blog par défaut;

Si nous créons la page par programme, nous devons utiliser un composant appelé MDXRenderer pour obtenir les mêmes fonctionnalités, comme décrit dans la documentation Gatsby.

Éléments de marque personnalisés

Bien que MDX soit un format qui nous permet d'écrire des composants HTML et réagis personnalisés, sa puissance est qu'il rend Markdown avec du contenu personnalisé. Mais que se passe-t-il si nous voulons personnaliser comment ces éléments Markdown sont rendus à l'écran?

Nous pouvons certainement écrire un plugin de remarques, mais MDX nous fournit une solution meilleure et plus facile. Par défaut, Markdown rend certains des éléments suivants:

Pour remplacer ces valeurs par défaut par notre composant React personnalisé, MDX est livré avec un composant de fournisseur appelé MDXProvider . Il s'appuie sur l'API de contexte React pour injecter de nouveaux composants personnalisés et les fusionner en valeurs par défaut fournies par 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: image,
  }}>
   {enfants}

 ));
}


Exporter la disposition par défaut;

Dans cet exemple, tout titre H1 (#) dans le fichier MDX sera remplacé par une implémentation personnalisée spécifiée dans l'hélice du composant du fournisseur, tandis que tous les autres éléments continueront d'utiliser les valeurs par défaut. En d'autres termes, MDXProvider est en mesure d'obtenir les balises personnalisées que nous avons écrites pour l'élément H1, de les fusionner avec les valeurs par défaut MDX, puis d'appliquer les balises personnalisées lorsque nous écrivons le titre 1 (#) dans le fichier MDX.

MDX et composants personnalisés

Les éléments MDX personnalisés sont excellents, mais que se passe-t-il si nous voulons y mélanger nos propres composants?

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

Nous pouvons importer le composant dans le fichier MDX et l'utiliser comme n'importe quel composant React. Bien sûr, bien que cela fonctionne très bien pour les démos de composants dans les articles de blog, que se passe-t-il si nous voulons utiliser un terrain de jeu dans tous les articles de blog? Ce serait pénible de les importer dans toutes les pages. Au lieu de cela, MDX nous donne la possibilité d'utiliser les shortcodes. Ce qui suit est la description du code court dans la documentation MDX:

[Shortcode] vous permet d'exposer des composants à tous les documents de votre application ou site Web. Il s'agit d'une fonctionnalité utile pour les composants communs tels que les intégres YouTube, les cartes Twitter ou tout ce qui est souvent utilisé dans les documents.

Pour inclure des codes Short dans une application MDX, nous devons à nouveau compter sur 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> ,
   Terrain de jeu,
  }}>
   {enfants}

 ));
}


Exporter la disposition par défaut;

Une fois que nous incluons des composants personnalisés dans l'objet components , nous pouvons continuer à les utiliser sans importer le fichier MDX.

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

Exploiter directement des sous-composants

Dans React, nous obtenons l'API de niveau supérieur à utiliser React pour manipuler les composants enfants. Nous pouvons utiliser ces API pour transmettre de nouveaux accessoires aux composants enfants, modifiant ainsi leur commande ou déterminant leur visibilité. MDX nous fournit un composant en wrapper spécial pour accéder aux sous-composants transmis par MDX.

Pour ajouter un wrapper, nous pouvons utiliser MDXProvider comme avant:

 <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> {accessoires.

));

Cet exemple inverse les éléments enfants afin qu'ils soient affichés dans l'ordre opposé de l'ordre que nous avons écrit.

Nous pouvons même animer tous les sous-éléments MDX entrants comme nous le voulons:

 <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], opacité}, index) => (
<animated.div key="{index}" style="{{" transform: x.interpolate> `tradlate3d ($ {x} px, $ {y} px, 0)`), opacité}}>
      {ChildrenArray [index]}
</animated.div>
    ))}

  ));
 },
};


exporter default (accessoires) => (
<mdxprovider components="{components}">
<main>{accessoires.</main>
</mdxprovider>
));

Résumer

MDX est conçu avec une flexibilité hors de la boîte, mais il peut être rendu plus puissant avec des extensions de plug-in. Grâce à gatsby-plugin-mdx , ​​nous pouvons faire ce qui suit en peu de temps:

1. Créez un composant de mise en page par défaut qui aide à formater la sortie MDX.
2. Remplacez l'élément HTML par défaut rendu à partir de Markdown par un composant personnalisé.
3. Utilisez des codes Short pour vous débarrasser des tracas d'importation de composants dans chaque fichier.
4. Manipuler directement les éléments enfants pour modifier la sortie MDX.

Encore une fois, ce n'est qu'une petite partie de ce que MDX aide à simplifier la rédaction de contenu de site Web statique.

Plus d'informations sur MDX

• Introduction à MDX
• Documentation frontale, guides de style et ascension de MDX

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!