盖茨比：将新主题应用于入门级

Question

我是Gatsby的新手，我使用启动器Gatsby-starter-ghost启动了一个项目。入门程序附带了Casper主题，现在我想用新主题替换Casper或构建自定义主题。

我不知道如何替换Casper，甚至找不到它在项目文件夹中的位置。关于盖茨比主题和入门的文档很多，但我几乎找不到gatsby-starter-ghost的任何文档。我已经浏览了node_modules和src文件夹，甚至找不到Casper主题的位置。如果我使用npm安装了新主题并将插件放在gatsby-config文件中，则会破坏我的项目，并且我会看到GraphQL错误。我已经读过主题通常应该放在content文件夹中，但是我的content文件夹中只包含两个空文件夹。

这是我的项目结构：

如何替换gatsby-ghost-starter中的主题？

Answer 1

盖茨比主题使用一个名为“ shadowing”的概念。您可以通过在内容文件夹中放置具有相同路径和名称的文件来替换主题的任何默认文件。这可能就是为什么您的文件夹中没有任何主题文件，而启动程序仅使用所有默认值的原因。

也就是说，看着gatsby-starter-ghost，它看起来根本就没有使用Gatsby主题，因此不适用阴影。

如果您查看gatsby-starter-ghost/src/components/common/，它具有各种文件，这些文件定义了正在使用的组件。最值得注意的是，Layout.js正在为每个页面设置基本结构，并从../../styles/app.css导入CSS文件。

此CSS，这些常见组件以及src/templates中的各种模板文件是定义页面的HTML结构以及所使用的CSS的内容。如果您进行了调整，则应该能够根据需要更改设计。

首先查看app.css并对其进行一些调整，看看能带您走多远。但是，如果要引入新的类或更改HTML结构，则可能需要更新组件。