MDX ist eine leistungsstarke Funktion von Inhalten wie Blogs, Diashows und Komponentendokumenten. Sie k?nnen einen Markdown schreiben, ohne sich über HTML -Elemente, ihre Formatierung und den Standort zu sorgen und die Magie von benutzerdefinierten React -Komponenten bei Bedarf einzubeziehen.

Nutzen wir diese Magie und sehen Sie, wie Sie MDX anpassen, indem Sie das Markdown -Element durch unsere eigenen MDX -Komponenten ersetzen. Dabei werden wir das Konzept des "kurzen Code" bei der Verwendung dieser Komponenten einführen.

Es ist zu beachten, dass die Code -Snippets hier auf Gatsbyjs und React basieren, MDX jedoch auch mit verschiedenen Frameworks verwendet werden kann. Wenn Sie den Beginn von MDX kennen müssen, beginnen Sie hier. Dieser Artikel erweitert diesen Inhalt in einem fortgeschritteneren Konzept.

Layout einrichten

Wir wollen fast immer MDX-basierte Seiten in einem universellen Layout rendern. Auf diese Weise k?nnen sie mit anderen Komponenten auf der Website angeordnet werden. Wir k?nnen die Standardlayoutkomponente mit dem von uns verwendeten MDX -Plugin angeben. Zum Beispiel k?nnen wir ein Layout mit gatsby-plugin-mdx Plugin wie folgt definieren:

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

Dies erfordert, dass src/templates/blog-post.js eine Komponente enth?lt, die children rendert.

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

Wenn wir die Seite programmgesteuert erstellen, müssen wir eine Komponente namens MDXRenderer verwenden, um dieselbe Funktionalit?t zu erreichen, wie in der Gatsby -Dokumentation beschrieben.

Benutzerdefinierte Markdown -Elemente

W?hrend MDX ein Format ist, das es uns erm?glicht, benutzerdefinierte HTML- und React -Komponenten zu schreiben, ist es der Strom, dass es mit benutzerdefinierten Inhalten den Markdown mit benutzerdefinierten Inhalten macht. Aber was ist, wenn wir anpassen m?chten, wie diese Markdown -Elemente auf dem Bildschirm gerendert werden?

Wir k?nnen sicherlich ein Bemerkung -Plugin dafür schreiben, aber MDX bietet uns eine bessere und einfachere L?sung. Standardm??ig macht Markdown einige der folgenden Elemente:

Um diese Standardwerte durch unsere benutzerdefinierte React -Komponente zu ersetzen, wird MDX mit einer Anbieterkomponente mit dem Namen MDXProvider geliefert. Es basiert auf der React -Kontext -API, um neue benutzerdefinierte Komponenten zu injizieren und in Standardwerte, die von MDX bereitgestellt werden, zusammenzuführen.

 <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> Anwesend
   IMG: Bild,
  }}>
   {Kinder}

 );
}
?
Standardlayout exportieren;

In diesem Beispiel wird jeder H1 -Titel (#) in der MDX -Datei durch eine benutzerdefinierte Implementierung ersetzt, die in der Requisitenkomponente angegeben ist, w?hrend alle anderen Elemente die Standardwerte weiterhin verwenden. Mit anderen Worten, MDXProvider kann die benutzerdefinierten Tags, die wir für das H1 -Element geschrieben haben, mit den MDX -Standards zusammengeführt und dann die benutzerdefinierten Tags anwenden, wenn wir Title 1 (#) in die MDX -Datei schreiben.

MDX und benutzerdefinierte Komponenten

Benutzerdefinierte MDX -Elemente sind gro?artig, aber was ist, wenn wir unsere eigenen Komponenten darin mischen m?chten?

 <code>--- title: 導(dǎo)入組件--- import Playground from './Playground';以下是關(guān)于我一直在構(gòu)建的`Playground`組件的介紹：<playground></playground></code>

Wir k?nnen die Komponente in die MDX -Datei importieren und sie wie jede React -Komponente verwenden. W?hrend dies für Komponentendemos in Blog -Posts hervorragend funktioniert, was ist natürlich, wenn wir in allen Blog -Posts Playground verwenden m?chten? Es w?re ein Schmerz, sie auf alle Seiten zu importieren. Stattdessen bietet MDX uns die M?glichkeit, Shortcodes zu verwenden. Das Folgende ist die Beschreibung des kurzen Code in der MDX -Dokumentation:

[Shortcode] erm?glicht es Ihnen, Komponenten allen Dokumenten in Ihrer Bewerbung oder Website auszusetzen. Dies ist eine nützliche Funktion für gemeinsame Komponenten wie YouTube -Einbettungen, Twitter -Karten oder alles andere, das h?ufig in Dokumenten verwendet wird.

Um Shortcodes in eine MDX -Anwendung aufzunehmen, müssen wir uns erneut auf MDXProvider -Komponente verlassen.

 <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> Anwesend
   Spielplatz,
  }}>
   {Kinder}

 );
}
?
Standardlayout exportieren;

Sobald wir benutzerdefinierte Komponenten in das components aufgenommen haben, k?nnen wir sie weiterhin verwenden, ohne die MDX -Datei zu importieren.

 <code>--- title: 演示概念---這是新概念的演示：<playground></playground> > 看，媽媽?zhuān)〔恍枰獙?dǎo)入</code>

Direkte Unterkomponenten betreiben

In React erhalten wir die oberste API auf React, um Kinderkomponenten zu manipulieren. Wir k?nnen diese APIs verwenden, um neue Requisiten an untergeordnete Komponenten weiterzugeben, wodurch ihre Bestellung ge?ndert oder ihre Sichtbarkeit festgelegt werden. MDX bietet uns eine spezielle Wrapper -Komponente, um auf Unterkomponenten zuzugreifen, die von MDX übergeben wurden.

Um einen Wrapper hinzuzufügen, k?nnen wir MDXProvider wie zuvor verwenden:

 <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}

);

In diesem Beispiel werden untergeordnete Elemente so umdrehen, dass sie in der entgegengesetzten Reihenfolge der von uns geschriebenen Reihenfolge angezeigt werden.

Wir k?nnen sogar alle eingehenden MDX-Subelemente animieren, wie wir m?chten:

 <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], Opazit?t}, Index) => (
<animated.div key="{index}" style="{{" transform: x.interpolate> `Translate3D ($ {x} px, $ {y} px, 0)`), Opazit?t}}>
      {Kinderarray [Index]}
</animated.div>
    ))}

  );
 },
};
?
Exportieren Sie Standard (Requisiten) => (
<mdxprovider components="{components}">
<main>{props.children}</main>
</mdxprovider>
);

Zusammenfassen

MDX ist mit Flexibilit?t aus der Schachtel gestaltet, kann jedoch mit Plug-in-Erweiterungen leistungsf?higer gestaltet werden. Dank gatsby-plugin-mdx k?nnen wir in kurzer Zeit Folgendes tun:

1. Erstellen Sie eine Standard -Layout -Komponente, mit der die MDX -Ausgabe formatiert werden kann.
2. Ersetzen Sie das Standard -HTML -Element, das vom Markdown durch eine benutzerdefinierte Komponente gerendert wurde.
3. Verwenden Sie Shortcodes, um den Aufwand des Importierens von Komponenten in jeder Datei zu entfernen.
4. Manipulieren Sie direkt untergeordnete Elemente, um die MDX -Ausgabe zu ?ndern.

Auch dies ist nur ein kleiner Teil dessen, was MDX hilft, statische Website -Inhalte zu schreiben.

Weitere Informationen zu MDX

• Einführung in MDX
• Front-End-Dokumentation, Stilführer und der Aufstieg von MDX

Das obige ist der detaillierte Inhalt vonArbeiten mit MDX -benutzerdefinierten Elementen und Shortcodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!