Migrasi Dari Remark Ke MDX Di Gatsby Menggunakan Langkah Sederhana Ini

Tautan Posting Asli => https://webbrainsmedia.com/blogs/remark-to-mdx-in-gatsby

Catatan MDX VS

Mdx dan komentar keduanya kompiler penurunan harga yaitu mereka mengubah penurunan harga menjadi HTML. Jadi, itu bisa dirender di browser. Kita juga bisa menulis HTML di .md kita, karena hasil akhirnya adalah HTML compiler akan memprosesnya sebagai HTML.

Datang ke Komentar, Ini memberi kita keuntungan untuk memperluas fungsionalitasnya menggunakan plugin. Mdx juga sangat mirip dengan komentar dan lapisan gula pada kue itu mendukung semua plugin komentar. Namun yang membuatnya begitu populer adalah kemampuannya untuk memproses JSX dalam file .md Pada dasarnya, ini mengubah file penurunan harga menjadi komponen React sehingga memenuhi syarat untuk mengimpor dan merender komponen lain.

Kemampuan MDX ini menjadi sangat berguna untuk hal-hal seperti visualisasi data di blog Anda. MDX membuat blogging menjadi sangat menyenangkan dan mudah. Sekarang mari kita lihat bagaimana kita dapat mengonversi blog gatsby yang ada untuk menggunakan MDX sebagai pengganti Remark.

Langkah-langkah Untuk Bermigrasi Dari Remark Ke MDX:

1) Menginstal plugin MDX

Pertama kita perlu menginstal gatsby-plugin-mdx dengan dependensinya ( @mdx-js/mdx dan @mdx-js/react ) .

 npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

Hapus juga plugin gatsby-transformer-remark

 npm remove gatsby-transformer-remark

2) Mengganti Plugin Komentar Dengan MDX

Buka gatsby-config.js , Ganti plugin gatsby-transformer-remark dengan gatsby-plugin-mdx .

 -------------------- ||gatsby-config.js|| -------------------- - resolve: `gatsby-transformer-remark` + resolve: `gatsby-plugin-mdx` options: {

Sebagian besar sub-plugin Remark bekerja sempurna dengan MDX. Kita hanya perlu mengubah opsi plugins gatsbyRemarkPlugins agar MDX tahu bahwa ini adalah plugin Remark.

 ------------------------- ||gatsby-config.js|| ------------------------- resolve: `gatsby-plugin-mdx` options: { - plugins: [ + gatsbyRemarkPlugins: [

Catatan: Anda perlu menambahkan gatsby-remark-images sebagai sub-plugin dari gatsby-plugin-mdx dan entri string dalam array plugins.

 ------------------------- || gatsby - config . js || ------------------------- module . exports = { plugins : [ `gatsby-remark-images` , { resolve : `gatsby-source-filesystem` , options : { path : ` ${ __dirname } /content/blog` , name : `blog` , }, }, { resolve : `gatsby-source-filesystem` , options : { path : ` ${ __dirname } /content/assets` , name : `assets` , }, }, { resolve : `gatsby-plugin-mdx` , options : { extensions : [ `.md` , `.mdx` ], gatsbyRemarkPlugins : [ { resolve : `gatsby-remark-images` , options : { maxWidth : 590 , linkImagesToOriginal : true , }, }, { resolve : `gatsby-remark-copy-linked-files` , }, { resolve : `gatsby-remark-smartypants` , }, { resolve : `gatsby-plugin-feed` , }, ], }, }, { resolve : `gatsby-plugin-sharp` , },

3) Ubah Ekstensi File

Ubah ekstensi file penurunan harga Anda dari .md ke .mdx . Ini akan memungkinkan MDX untuk mengenali dan memprosesnya dengan konfigurasi tertentu.

Jika Anda tidak ingin mengubah ekstensi file mungkin karena banyaknya file dalam proyek Anda. Dalam hal ini Anda dapat mengkonfigurasi MDX plugin untuk menerima baik .md dan .mdx file dengan menambahkan extensions pilihan dalam gatsby-plugin-mdx seperti ini.

 ------------------------- || gatsby - config . js || ------------------------- { resolve : `gatsby-plugin-mdx` , options : { extensions : [ `.md` , `.mdx` ], }, },

Tip : Jika Anda menggunakan Vs-code sebagai editor kode Anda. Gunakan ekstensi MDX ini untuk penyorotan sintaks dan pencocokan braket dalam file MDX.

4) Perubahan Di gatsby-node.js

Di createPages , Ganti allMarkdownRemark dengan allMdx .

 ----------------------- ||gatsby-node.js|| ----------------------- exports.createPages = ({ graphql, actions }) => { const { createPage } = actions; const blogPost = path.resolve(`./src/templates/blog-post.tsx`); const blogList = path.resolve(`./src/templates/blog-list.tsx`); const tagTemplate = path.resolve(`./src/templates/tags.tsx`); return graphql( ` { - allMarkdownRemark( + allMdx( sort: { fields: [frontmatter___date], order: DESC } limit: 1000 ) { edges {

Juga, Di API onCreateNode Di mana ia membandingkan jenis simpul untuk membuat siput, di sana ganti MarkdownRemark menjadi Mdx .

 ----------------------- ||gatsby-node.js|| ----------------------- exports.onCreateNode = ({ node, actions, getNode }) => { const { createNodeField } = actions; - if (node.internal.type === `MarkdownRemark`) { + if (node.internal.type === `Mdx`) { const value = createFilePath({ node, getNode }); if (typeof node.frontmatter.slug !== 'undefined') { createNodeField({ node, name: 'slug', value: node.frontmatter.slug, }); } else {

5) Penggantian Lainnya

Dalam kueri GraphQL Anda, di mana pun Anda menggunakan allMarkdownRemark ubahlah menjadi allMdx dan markdownRemark menjadi mdx . Juga di mdx feild dalam kueri, ubah html menjadi body .

 ------------------------------------ ||src/templates/blog-post.tsx|| ------------------------------------ export const pageQuery = graphql` query BlogPostBySlug($slug: String!, $tag: [String!]) { site { siteMetadata { siteUrl } } - markdownRemark(fields: { slug: { eq: $slug } }) { + mdx(fields: { slug: { eq: $slug } }) { id excerpt(pruneLength: 160) - html + body fields { slug } frontmatter { title date(formatString: "DD MMM, YYYY") description hasJs tags cover { publicURL childImageSharp { fluid(maxWidth: 1170, quality: 100) { ...GatsbyImageSharpFluid_noBase64 } } } } } - allMarkdownRemark( + allMdx( limit: 3 sort: { fields: [frontmatter___date], order: DESC } filter: { frontmatter: { tags: { in: $tag } } fields: { slug: { ne: $slug } } } ) { edges {

Catatan: Ada kemungkinan Anda menerima kesalahan pada waktu pembuatan oleh plugin yang menanyakan allMarkdownRemark . Saya menerima kesalahan ini dari gatsby-plugin-feed untuk menyelesaikan ini, saya memindahkan ini ke dalam opsi gatsbyRemarkPlugins gatsby-plugin-mdx dari array plugin utama.

Sekarang, Dalam file post-template Anda, impor komponen MDXRenderer gatsby-plugin-mdx .

 ----------------------------------------------------- || src / components / post - details / post - details . tsx || ----------------------------------------------------- import _ from ' lodash ' ; import { MDXRenderer } from ' gatsby-plugin-mdx ' ; import { Link } from ' gatsby ' ;

Akhirnya, Ganti dangerouslySetInnerHTML ke MDXRenderer komponen:

 ----------------------------------------------------- ||src/components/post-details/post-details.tsx|| ----------------------------------------------------- <PostDescriptionWrapper className="post_des_wrapper"> - <PostDescription - dangerouslySetInnerHTML={{ __html: description }} - className="post_des" - /> + <PostDescription className="post_des"> + <MDXRenderer>{description}</MDXRenderer> + </PostDescription> {tags == null ? null : ( <PostTags> {tags.map((tag, index) => ( <Link key={index} to={`/tags/${_.kebabCase(tag)}/`}> {`#${tag}`} </Link> ))} </PostTags> )} </PostDescriptionWrapper>

Kesimpulan

Sekarang Anda dapat menggunakan komponen React kustom atau elemen UI pihak ketiga di file penurunan harga Anda. Ingat bahwa MDX menggunakan JSX sebagai pengganti HTML. Jadi, pastikan bahwa HTML dalam file penurunan harga Anda adalah JSX yang valid. misalnya, jika Anda telah menggunakan class dalam komponen HTML, ubah menjadi className . Sehingga tidak menimbulkan konflik saat diproses oleh MDX.

Tautan Posting Asli => https://webbrainsmedia.com/blogs/remark-to-mdx-in-gatsby

June 28, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *