javascript - 将样式信息添加到 GraphQL 的结果中

Question

关于this page ，例如，我们有一个这样的例子:

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: "My Homepage",
    description: "This is where I write my thoughts.",
  },
}

src/pages/index.js

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

  const HomePage = ({data}) => {
  return (
    <div>
      {data.site.siteMetadata.description}
    </div>
  )
}
export const query = graphql`
  query HomePageQuery {
    site {
      siteMetadata {
        description
      }
    }
  }
`
export default HomePage

我明白发生了什么，但如果我想设置我的描述样式怎么办？ This tutorial讨论如何添加 Markdown 转换器，但我想使用类似 React 的样式，因此我的 description 可能处于理想的世界中:

description: "This is where I write my <span className={style.zalgo}>thoughts</span>.",

src/pages/index.module.css 根据 Gatsby 约定定义 .zalgo 类。这会给我这样的描述:

This is where I write my t̜͔̰͎̣̙͔̏̾ͩ̅̂h̹͔̜͆̆̒ͩo̜̠͎̜ͮͯu͗̍̓҉̻̬̼̥͉̖g̘̻̱̙͠ͅͅh̦̘͈̺̯̽ͮ̓͑͆ͧ͞t̹̫̜̲͎̝ͨͣ̈́͢s͖ͯͥͣ.

我怎样才能实现这个目标？

Answer 1

您可以只发送标准 html

This is where I write my <span class={style.zalgo}>thoughts</span>.

然后使用 dangerouslySetInnerHTML 设置页面上元素的内容.

<div dangerouslySetInnerHTML={{ __html: data.site.siteMetadata.description }} />