如何在Gatsby中显示包含HTML语法的标记文件？
如何在Gatsby中显示包含HTML语法的标记文件？
提问于 2022-01-24 01:35:40
我正在使用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部件正常呈现？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-24 07:17:18
您还可以使用内置的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名称所示，您可能会将站点暴露给跨站点脚本，而第二种方法则会清除该实现。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70831689
复制相关文章
相似问题
腾讯云开发者
