Gatsby Themes快速入门指南

本指南旨在帮助您了解并开始使用来自LekoArts的高质量Gatsby主题。以下内容将详细介绍项目结构、关键的启动与配置文件。

1. 项目目录结构及介绍

LekoArts的Gatsby主题采用了一个monorepo的管理方式，利用Yarn Workspaces和Changesets进行版本控制。下面是核心的目录结构及其简介：

• changeset: 包含了Changeset文件及配置，用于管理版本和发布过程。
• github: 涉及GitHub操作的模板、问题模版以及FUNDING文件。
• cypress: 存放Cypress端到端测试脚本。
• examples: 包含每个主题对应的示例站点，可作为项目启动的基础，并会被复制到各自的GitHub仓库中，含有示例数据和额外的Gatsby插件。
• packages: 共享的帮助器和工具库，用于主题开发，通过tsup编译。
• plop-templates: Plop.js的模板，用于代码生成。
• scripts: 包含一些辅助脚本，主要服务于GitHub Actions中的测试运行。
• themes: 主题本身的存放地，每个主题的文件夹名遵循gatsby-theme-[名称]的命名规则，使用Theme UI进行样式处理。
• www: 网站源码，特指themes.lekoarts.de的相关内容。
• vite-config.ts, vitest-setup.ts: 分别是Vite的配置文件和Vitest单元测试的设置文件。

2. 项目的启动文件介绍

在这些主题中，主要的启动流程依赖于Yarn Workspaces特性。对于启动特定的主题或示例网站，您需要执行以下命令在工作区中找到对应的部分：

yarn workspace [example-or-theme-name] develop

例如，如果要启动名为“emma”的示例站点，指令将是：

yarn workspace emma develop

这将启动Gatsby的开发者服务器，支持热重载功能以便即时查看更改。

3. 项目的配置文件介绍

• package.json: 在每个子包（主题或工具包）内都有自己的package.json，定义了依赖项、脚本命令等。
• gatsby-config.js: 在各个主题内部，尽管提倡最小化内置配置以利于灵活性，但仍可能包含此文件，用于定义Gatsby插件和其他配置选项。
• .yaml配置文件如yarn.lock, prettierignore, gitignore: 控制依赖锁定、代码风格和忽略文件的列表。
• tsconfig.json, .eslintrc.js: 用于TypeScript编译设置和ESLint代码质量检查。
• CODE_OF_CONDUCT.md, CONTRIBUTING.md, LICENSE: 社区准则、贡献指南和软件许可协议。

开始使用前，请确保安装了Yarn，然后克隆仓库，在根目录下运行yarn来安装所有必要的依赖。遵循上述步骤，您可以轻松探索和定制这些精心设计的Gatsby主题。