如何将现有的 Gatsby 网站转变为主题

2025-06-09

如何将现有的 Gatsby 网站转变为主题

如果你还没看过我们直播的片段，可以点这里看看！虽然这篇文章信息量很大，涵盖了我们大部分的工作内容，但我实在无法复制那种程度的喜剧和调侃。@jlengstorf太精彩了。

此外，还要完全归功于@likeomgitsfeday，他的网站是我的最初灵感（和架构）！

以此为入门，让我们深入研究代码。

项目设置

我的项目放在一个略显杂乱的个人目录中。所以首先，我们要把它移到一个新文件夹。这个文件夹的名字很特别，叫做site-and-stuff。这并非绝对必要，只是为了方便整理。

从那里开始，是时候设置主题项目和相关的纱线工作区了。

初始化主题

我将在其中site-and-stuff创建一个名为 的目录gatsby-theme-speaking-yaml。这意味着site-and-stuff当前包含该主题项目和我原来的站点项目gatsby-laurieontech。

现在我们要初始化我的主题项目。为此，我们将在 中运行以下命令gatsby-theme-speaking-yaml。

yarn init -y
Enter fullscreen mode Exit fullscreen mode

这会创建一个包含一些现有信息的 package.json 文件。不过，我们还想添加一些额外的项目，author以及keywords。最终文件内容如下。

{
  "name": "gatsby-theme-speaking-yaml",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "author": "Laurie on tech",
  "keywords": ["gatsby", "gatsby-plugin", "gatsby-theme"]
}
Enter fullscreen mode Exit fullscreen mode

请注意，我们的main指向index.js。该文件目前不存在，因此我们需要创建它。它目前不需要任何内容​​，因此我们只需添加一条注释即可。

设置工作区

我们还需要在根目录中创建一个 package.json 文件site-and-stuff。在本例中，我们只需创建该文件并手动添加一些信息即可。最终文件内容如下。

{
  "private": true,
  "workspaces": ["gatsby-laurieontech", "gatsby-theme-speaking-yaml"]
}
Enter fullscreen mode Exit fullscreen mode

为了测试这是否有效，您可以运行以下命令。

yarn workspaces info
Enter fullscreen mode Exit fullscreen mode

将主题安装到网站

接下来，我们将主题添加到网站。但首先，我们需要做一件事。

我网站的部分参考数据位于项目 package.json 的键值对中gatsby-laurieontech。我可能忘记更改默认设置了，但现在是laurieontech。此代码片段已截断，以便于阅读。

{
  "name": "laurieontech",
  "description": "Laurie never changed the starter description, oops",
  "version": "1.0.0",
  "author": "Laurie Barth"
}
Enter fullscreen mode Exit fullscreen mode

这很重要，因为这是我们在 Yarn 工作区中引用站点项目的方式。现在我们可以将主题添加到站点了。

yarn workspace laurieontech add gatsby-theme-speaking-yaml@*
Enter fullscreen mode Exit fullscreen mode

@*因为主题未发布，所以这样写，带有。

为了测试是否有效，您可以再次运行此命令。您应该会在站点信息中看到主题列表。

yarn workspaces info
Enter fullscreen mode Exit fullscreen mode

我们还想将主题作为插件添加到我们网站的 gatsby-config.js 文件中gatsby-laurieontech。

module.exports = {
  plugins: [
    'gatsby-theme-speaking-yaml',
    // other stuff goes here
  ],
}
Enter fullscreen mode Exit fullscreen mode

将依赖项安装到主题中

现在我们要开始开发主题本身。首先要弄清楚主题有哪些依赖项。在本例中，我们需要查询 yaml 文件并处理图片。因此，我们需要安装这些依赖项。

yarn workspace gatsby-theme-speaking-yaml add gatsby-source-filesystem gatsby-image gatsby-plugin-sharp gatsby-transformer-yaml gatsby-transformer-sharp
Enter fullscreen mode Exit fullscreen mode

接下来，我们需要gatsby-config.js在主题中创建一个文件。我们将在这里添加刚刚安装的插件。

module.exports = {
  plugins: [
    `gatsby-transformer-yaml`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/data/`,
      },
    },
  ],
}
Enter fullscreen mode Exit fullscreen mode

请注意，gatsby-image 需要安装但不包含在内，它是一个实用程序

创建主题

现在是时候真正创建我们的主题了！由于我们是基于现有网站构建主题，所以我们可以从我的网站中提取任何我们想要的代码，并将其放入主题项目中。

在本例中，这是我的 Speaking.js 页面中的一个部分。因此，我们将创建src/component/speaking.js并移动相关内容JSX。

现有代码使用了页面查询，而主题将此部分视为组件，因此需要改用静态查询。我们将进行如下更改。

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import Img from 'gatsby-image'
import Event from './event'

const SpeakingSection = () => {
  const data = useStaticQuery(graphql`
    {
      allSpeakingYaml(sort: { fields: [index], order: DESC }) {
        edges {
          node {
            conference
            year
            url
            date
            location
            image {
              childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid
                }
              }
            }
            talks {
              title
              video
              type
            }
          }
        }
      }
    }
  `)
  return (
    <section id="speaking" className="wrapper style4 container">
      <div className="container">
        <h2>Appearances</h2>
        <div className="wrapper" id="speakwrap">
          {data.allSpeakingYaml.edges.map(({ node }) => (
            <Event event={node} />
          ))}
        </div>
      </div>
    </section>
  )
}

export default SpeakingSection
Enter fullscreen mode Exit fullscreen mode

确保数据可用

现在从我的主题中提取的代码使用的是我原始项目内部的数据，而不是主题内部的数据。所以我以为需要迁移到原始项目，但实际上不需要！

这时 Laurie 意识到主题不需要保存数据，当所有内容编译在一起时，它将能够看到我所有的 yaml 内容！

但是，为了确保它能正常工作，我们需要检查gatsby-config.js主题，确保它使用了正确的相对路径。就我而言，这意味着需要对gatsby-source-filesystem插件配置进行一些细微的修改。

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `src/data/`,
      },
    },
  ],
}
Enter fullscreen mode Exit fullscreen mode

导出主题组件

我们主题的核心部分存在于，src/components/speaking.js但我们package.json引用的index.js文件只有一条注释。因此，我们需要确保该文件导出的是我们的模板内容。

export { default as SpeakingEvents } from './src/components/speaking'
Enter fullscreen mode Exit fullscreen mode

事实证明，我们可以同时导入和导出！我真应该把这个技巧添加到这篇文章里。

劳里昂科技

出口、进口和违约，天哪！

劳里·19年4月29日

#javascript #react #webdev #beginners

使用主题！

现在我们可以使用我们的主题，就好像它只是我们的 Gatsby 网站中的另一个组件一样。

在这种情况下，这意味着更改我网站的朗读页面，并从我的主题导入组件来替换现有代码。请注意，导入是绝对的，因为它相当于从另一个项目中提取导出的代码！

import React from 'react'
import Layout from '../components/layout'
import Hero from '../components/Hero'
import { SpeakingEvents } from 'gatsby-theme-speaking-yaml'

const SpeakingPage = ({ data }) => {
  return (
    <Layout>
      <Hero /> // this is a local component! I can use all this interchangeably
      <SpeakingEvents />
    </Layout>
  )
}

export default SpeakingPage
Enter fullscreen mode Exit fullscreen mode

使用主题运行您的网站！

现在是时候使用我们的主题运行我们的项目了。

name请记住，我们实际上使用的是在中指定的，而不是站点的目录名称，package.json就像这样。

yarn workspace laurieontech develop
Enter fullscreen mode Exit fullscreen mode

就这样！现在我们可以添加主题、发布主题，做任何我们想做的事情了。

我们讨论的其他内容

这次直播相当精彩，自然也聊到了一些其他的事情。一些重要话题包括：

  • 杰森与其他盖茨比员工的相对身高

  • 我对时区的恐惧

  • 终端……以及劳里用来几乎毁掉电脑的命令

哦，你的意思是与我们的实际目标有关？

我们对我的应用程序进行了一些重构，讨论了 gatsby-image 和其他一些事情。

在某个时候，我会写一篇关于我的网站全面重构的文章。

但在此之前，我迫不及待地想看到你们将自己在个人网站上所做的工作作为主题提供给其他人使用。

我们站在前人工作的肩膀上！

鏂囩珷鏉ユ簮锛�https://dev.to/laurieontech/how-to-turn-an-existing-gatsby-site-into-a-theme-4gb6
Devto 翻译
PREV
我加入了盖茨比！
NEXT
焦点 vs 焦点内