Question

我有一个新的盖茨比网站，该网站共有3页（以后还会有更多页面）。我发现我不得不重复很多样式，而且我知道必须有一种正确的方法来避免这样做，但是我不确定。我正在将Emotion与Tailwind一起使用。

所有页面上都有一个hero元素，其中包括标题和说明：

<Hero>
  <Title>
    Page title here
  </Title>
  <Lead>
    Descirption text here
  </Lead>
</Hero>

这是它的样式：

const Hero = styled.header`
  ${tw`bg-blue-dark p-6`};
`
const Title = styled.h1`
  ${tw`text-white tracking-wide font-medium`};
`
const Lead = styled.p`
  ${tw`text-gray leading-relaxed mb-1`};
  a {
    ${tw`text-white font-medium no-underline text-purple hover:text-white`};
  }
`

某些页面还具有操作按钮：

<Actions>
  <LinkPrimary to="/some-page/">Click for more</LinkPrimary>
  <LinkSecondary to="/some-other-page/">Or click here</LinkSecondary>
</Actions>

整页模板看起来像（这是我为每个新页面复制的模板）：

import React from "react"
import Layout from "../components/layout"
import styled from "@emotion/styled"
import { Link } from "gatsby"
import tw from "tailwind.macro"

const Hero = styled.header`
  ${tw`bg-blue-dark p-6`};
`
const Title = styled.h1`
  ${tw`text-white tracking-wide font-medium`};
`
const Lead = styled.p`
  ${tw`text-gray leading-relaxed mb-1`};
  a {
    ${tw`text-white font-medium no-underline text-purple hover:text-white`};
  }
`
const Actions = styled.section`
  ${tw`text-center m-2 mt-8 mb-24`};
`
const LinkPrimary = styled(Link)`
  ${tw`block bg-pink hover:bg-green-light text-blue-dark font-bold no-underline py-4 px-4 m-4 rounded`}
`
const LinkSecondary = styled(Link)`
  ${tw`block bg-regal-blue hover:bg-blue-light text-pink hover:text-white font-semibold no-underline py-4 px-4 m-4 rounded`}
`

export default () => (
  <Layout>
    <Hero>
      <Title>
        Hey I'm The About Page
      </Title>
      <Lead>
        Learn all about us 
      </Lead>
    </Hero>
    <Actions>
      <LinkPrimary to="/some-page/">Click for more</LinkPrimary>
      <LinkSecondary to="/some-other-page/">Or click here</LinkSecondary>
    </Actions>
  </Layout>
)

我遇到的问题是，我必须重复每个样式的新页面。我正在src/pages中手动创建这些页面，并编辑每个页面的标题和描述。带有按钮的页面我也在编辑按钮的文本和URL。

我猜测必须有一种方法来创建一个“英雄”组件，该组件包括标题和其样式的领导，然后将其导入到每个页面中并在每页的基础上编辑内容。

并非所有页面都具有操作按钮，因此它们可能需要位于自己的组件中，并且仅在需要的地方导入。

如果有人可以给我一个基本的演示或指向某些文档的链接，在此进行了解释，将不胜感激。我所有的研究只给出了examples of how to do this querying with GraphQL。

Answer 1

好的，我认为我有一些可行的方法，因此可以发布答案。

创建英雄组件src/components/hero.js

import React from "react"
import styled from "@emotion/styled"
import tw from "tailwind.macro"

const Header = styled.header`
  ${tw`p-6`};
`
const Title = styled.h1`
  ${tw`text-white tracking-wide text-lg font-medium`};
`
const Lead = styled.p`
  ${tw`text-purple-light leading-relaxed text-lg`};
`
const Hero = props => (
  <Header>
    <Title>{props.heading}</Title>
    <Lead>{props.text}</Lead>
  </Header>
)

export default Hero

然后在需要的地方在页面，索引页面，关于页面中使用它：

import React from "react"
import Layout from "../components/layout"
import Hero from "../components/hero"

export default () => (
  <Layout>
    <Hero
      heading="Hello world!"
      text="This is the lead text for this page."
    />
...
  </Layout>
)

关于这一点的妙处在于，我对英雄元素的样式全部包含在我的英雄组件中。对于号召性用语按钮，我可能也会这样做。

如果要在文本中包含链接或html标签，可以执行以下操作：

<Hero
      heading={[<em>Links</em>, " that", <br />, " go places"]}
      text={[
        "You can write some text here followed by ",
        <Link to="/learn/">
          a link to another page
        </Link>,
        " that you can click.",
      ]}
    />

如何在没有GraphQL的情况下正确使用页面组件

1 个答案: