Блог

Что работает:

• Макет правильно применяется к каждой из моих страниц
• Файл многомерных выражений правильно получает компонент героя и раздела и правильно отображает HTML / CSS контейнера
• Данные из многомерных выражений загружаются и отображаются

Что НЕ работает:

• MD внутри героя или шорткода раздела не отображается! # не преобразуется в H1 и т.д.

Что я пробовал:

• Использование MDXRender в разделе amp; Hero => Ошибка
• Используйте компонент непосредственно в файле многомерных выражений вместо шорткода

Вопрос:

• Невозможно ли правильно отобразить MD в шорткоде? Другими словами, многомерные выражения не отображаются рекуррентно?

content/index.mdx:

 ---
title: Main Content English
slug: /main-content/
---

<Hero># This is a test, but never gets transformed</Hero>

<Section># In Section Headline</Section>

# ABC

Officia cillum _asdasd_ et duis dolor occaecat velit culpa. Cillum eu sint adipisicing labore incididunt nostrud tempor fugiat. Occaecat ex id fugiat laborum ullamco. Deserunt sint quis aliqua consequat ullamco Lorem dolor pariatur laboris. Laborum officia ut magna exercitation elit velit mollit do. Elit minim nostrud cillum reprehenderit deserunt consequat. Aliqua ex cillum sunt exercitation deserunt sit aliquip aliquip ea proident cillum quis.
 

Мой layout.js выглядит примерно так:

 import React, {useEffect} from "react";

import "./Layout.css";

import { MDXProvider } from "@mdx-js/react";
import { MdxLink } from "gatsby-theme-i18n";
...

import Hero from "../Hero/HomepageHero/HomepageHero"
import Section from "../Section/Section"


const components = {
  a: MdxLink,
  Hero, Section
};


export default function Layout({ children }) {
   ...
  return (
    <div className="appGrid">
      <Header />

      <ScrollToTopButton />

      <div className="cell contentCell">
        <MDXProvider components={components}>{children}</MDXProvider>
      </div>

      <Footer />

      <Copyright />
    </div>
  );
}

 

мой index.js страница (загружаемая автоматически) выглядит следующим образом:

 import * as React from "react";

import { graphql } from "gatsby";

import Layout from "../components/Layout/layout";
import { MDXRenderer } from "gatsby-plugin-mdx";


const IndexPage = ({ data }) => {

  return (
    <Layout>
      {data.allFile.nodes.map(({ childMdx: node }) => (
        <div>
          {node ? (
            <MDXRenderer>{node.body}</MDXRenderer>
          ) : (
            <div>This page has not been translated yet.</div>
          )}
        </div>
      ))}
    </Layout>
  );
};

export default IndexPage;

export const query = graphql`
  query($locale: String!) {
    allFile(
      filter: {
        sourceInstanceName: { eq: "content" }
        childMdx: { fields: { locale: { eq: $locale } } }
      }
    ) {
      nodes {
        childMdx {
          body
        }
      }
    }
  }
`;

 

Конфигурация Gatsby:

 module.exports = {
  siteMetadata: {
    siteUrl: "localhost:8000",
    title: "app",
  },
  plugins: [
    {
      resolve: "gatsby-plugin-google-analytics",
      options: {
        trackingId: "",
      },
    },
    "gatsby-plugin-sharp",
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sitemap",
    "gatsby-plugin-offline",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        icon: "src/images/icon.png",
      },
    },
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/",
      },
      __key: "images",
    },
    {
      resolve: `gatsby-theme-i18n`,
      options: {
        defaultLang: `en`,
        locales: `en el de`,
        configPath: require.resolve(`${__dirname}/i18n/config.json`),
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/src/content/`,
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        defaultLayouts: {
          default: require.resolve(`./src/components/Layout/layout.js`),
        },
      },
    },
  ],
};

 

Section.js Компонент

 import React from "react";
import PropTypes from "prop-types";
import "./Section.css";

export default function Section(props) {
  let content = props.children
  if (props.centered) {
    content = (
      <div className="grid-container ">
        {props.children}
      </div>
    );
  }
  return <div className="section">{content}</div>;
}

Section.propTypes = {
  centered: PropTypes.bool,
  children: PropTypes.element,
};

 

В конце концов, это была простая проблема с интервалом.

Он отлично работает без какой-либо дополнительной работы:

 ---
title: Main Content English
slug: /main-content/
---

<Hero>

# This is a test, but never gets transformed

</Hero>

<Section>

# In Section Headline

</Section>

...
 

Обратите внимание на пустые строки!

С помощью многомерных выражений вы отображаете JSX внутри файла Markdown (MD JS X), поэтому # он не распознается как короткий код, когда он обернут компонентом JSX, когда он находится в той же декларативной строке:

Изменить:

 <Hero># This is a test, but never gets transformed</Hero>
 

Для:

 <Hero>
    # This is a test, but never gets transformed
</Hero>
 

Кроме того, вы также можете изменить:

 <Hero># This is a test, but never gets transformed</Hero>
 

Для:

 <Hero><h1> This is a test, but never gets transformed</h1></Hero>
 

Еще одна вещь, которая может вам подойти, — это использование анализатора Markdown (например, markdown-to-jsx) и:

 ---
title: Main Content English
slug: /main-content/
---

import Markdown from 'markdown-to-jsx';


<Hero><Markdown># This is a test, but never gets transformed</Markdown></Hero>

<Section><Markdown># In Section Headline</Markdown></Section>

# ABC

Officia cillum _asdasd_ et duis dolor occaecat velit culpa. Cillum eu sint adipisicing labore incididunt nostrud tempor fugiat. Occaecat ex id fugiat laborum ullamco. Deserunt sint quis aliqua consequat ullamco Lorem dolor pariatur laboris. Laborum officia ut magna exercitation elit velit mollit do. Elit minim nostrud cillum reprehenderit deserunt consequat. Aliqua ex cillum sunt exercitation deserunt sit aliquip aliquip ea proident cillum quis.
 

В качестве альтернативы вы добавляете пользовательский компонент сопоставления, как вы делаете с MdxLink , но используете свой собственный компонент для анализа children <Markdown> зависимости as.