javascript - Gatsby markdown blockquote 看起来一样，不起作用，没有引用，不是块

Question

我有我的降价文件，显然这就是你应该如何设置 blockquotes 的样式，前面有一个 >

-----------------------
title: some title
img: some img
-------------------------

A paragraph

> This is an example of a block quote

This is an example of some **bolded text**

但是块引用看起来就像所有其他常规文本

如何让我的块引​​用看起来像我提供的链接中的那样？

---

我包含了我的 gatsby-config.js 和 gatsby-node.js 文件，以防它们提供任何有用的信息

盖茨比-config.js

const path = require(`path`)

module.exports = {
  siteMetadata: {
    title: `my title`,
    description: `My description`,
    author: `Me`,
    authorDescription: "Me",
    themeColor: "#111111",
    siteUrl: "example.com",
    image: "my_image.png"
  },
  plugins: [
    {
      resolve: "gatsby-plugin-web-font-loader",
      options: {
        google: {
          families: ["Mansalva", "Playfair Display", "Source Sans Pro"],
        },
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src/assets/images`),
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/markdown/`,
        name: `markdown-pages`,
      },
    },
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [
        `/contact/*`,
        `/partners/*`,
        `/publications/*`
      ] },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#fff`,
        theme_color: `#542C85`,
        display: `minimal-ui`,
        icon: `src/assets/images/gatsby-icon.png`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          'gatsby-remark-relative-images',
          {
            resolve: `gatsby-remark-images`,
            options: {
              linkImagesToOriginal: false,
            },
          },
        ],
      },
    },
    {
      resolve: 'gatsby-plugin-root-import',
      options: {
        "components": path.join(__dirname, "src/components"),
        // "layouts": path.join(__dirname, "src/layouts"),
        "styles": path.join(__dirname, "src/assets/styles"),
        "types": path.join(__dirname, "src/types"),
        "enums": path.join(__dirname, "src/enums"),
        "interfaces": path.join(__dirname, "src/interfaces"),
        "data": path.join(__dirname, 'src/data'),
        "pages": path.join(__dirname, 'src/pages')
      }
    },
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-typescript`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-offline`,
    `gatsby-plugin-graphql-loader`
  ],
}

盖茨比-node.js

const { createFilePath } = require(`gatsby-source-filesystem`)
const { fmImagesToRelative } = require('gatsby-remark-relative-images');
const path = require("path")

const replacePath = path => (path === `/` ? path : path.replace(/\/$/, ``))

exports.createPages = async ({ actions: { createPage }, graphql }) => {
  const postTemplate = path.resolve(`src/components/Article/index.tsx`)

  const result = await graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___date] }
 
      ) {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  if (result.errors) {
    return Promise.reject(result.errors)
  }

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: replacePath(node.fields.slug),
      component: postTemplate,
    })
  })
}

exports.onCreateNode = ({ node, getNode, actions }) => {
  fmImagesToRelative(node)
  if (node.internal.type === `MarkdownRemark`)
    actions.createNodeField({
      node,
      name: `slug`,
      value: replacePath(createFilePath({ node, getNode, basePath: `pages` })),
    })
  
}

标签： javascriptmarkdowngatsby

Answer 1

该示例应用了 css 样式。具体来说：

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: 1em 10px .1em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}

使用类似的 css 使块引用在您显示它的位置看起来相同。