1

我正在使用 Markdown 文件为 gatby 生成页面。为了控制图片的风格，我使用了html语法。但是 gatsby 生成的页面并没有显示 html 部分。

这是我的降价文件：

---
......frontmatter......
--- 
......content......
<table>
  <tr>
    <td><img src="./images/2018/zotero/ZoteroWebDAV.png"></td>
    <td><img src="./images/2018/zotero/ZoteroExts.png" width=100%></td>
  </tr>
</table>
......content......

其他一切都正常渲染，但是，表格和其中的图片都没有显示。这是我的 gatsby-config.js。

{
      resolve: `gatsby-transformer-remark`,
      options: {
        excerpt_separator: `<!-- endexcerpt -->`,
        plugins: [
          // 'gatsby-remark-relative-images',
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1200,
            },
          },
          {
            resolve: `gatsby-remark-image-attributes`,
            options: {
              dataAttributes: true
            }
          },
        ],
      },
    },

我该怎么做才能使 Markdown 中的 html 部分正常呈现？

4

1 回答 1

0

您也可以使用内置dangerouslySetInnerHtml属性或任何降价解析器，如markdown-to-jsx.

使用第一种方法，遵循盖茨比的指南：

import React from "react"
import { graphql } from "gatsby"

export default function Template({data}) {
  const { markdownRemark } = data // data.markdownRemark holds your post data
  const { frontmatter, html } = markdownRemark
  return (
    <div className="blog-post-container">
      <div className="blog-post">
        <h1>{frontmatter.title}</h1>
        <h2>{frontmatter.date}</h2>
        <div
          className="blog-post-content"
          dangerouslySetInnerHTML={{ __html: html }}
        />
      </div>
    </div>
  )
}

export const pageQuery = graphql`
  query($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
      }
    }
  }
`

因为您尚未共享您的查询，所以我使用了指南中的查询，但可以根据需要对其进行调整。如您所见，末尾的所有内容frontmatter都是html：

<div
  className="blog-post-content"
  dangerouslySetInnerHTML={{ __html: html }}
/>

使用第二种方法，并遵循前面的查询结构，html应该呈现为：

import Markdown from 'markdown-to-jsx';
import React from 'react';

<Markdown>{html}</Markdown>

如果有任何障碍，我会说第二种方法更好，因为dangerouslySetInnerHTML顾名思义，您可能会将您的站点暴露给XSS (Cross-Site Scripting)，而第二种方法会清理实现。

于 2022-01-24T15:17:18.937 回答