向GraphQL的结果中添加样式信息

Question

例如，在this page上，我们有一个这样的示例：

gatsby-config.js

for (int i=0; i<std::min(n,q); ++i){

src / pages / index.js

Parameters

我了解发生了什么，但是如果我想为file.py classname -pl设置样式怎么办？ This tutorial讨论了如何添加Markdown转换器，但是我想使用类似React的样式，因此我的module.exports = { siteMetadata: { title: "My Homepage", description: "This is where I write my thoughts.", }, } 可能是理想的世界：

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

description根据Gatsby约定定义description类。这样的描述如下：

  

这是我写t̜͔̰͎̣̙͔̏̾ͩ̅̂h̹͔̜͆̆̒ͩo̜̠͎̜ͮͯu͗̍̓҉̻̬̼̥͉̖g̘̻̱̙͠ͅͅh̦̘͈̺̯̽ͮ̓͑͆ͧ͞t̹̫̜̲͎̝ͨͣ̈́͢s͖ͯͥͣ的地方。

我该如何实现？

Answer 1

您可以发送标准html

.order_by()

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

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

Answer 2

为什么不能使用StaticQuery？在它的渲染内部，您将能够像普通React一样应用任何样式