【问题标题】：Gatsby: Apply new theme to starter盖茨比：将新主题应用于初学者
【发布时间】：2020-12-05 22:12:07
【问题描述】：
我是 Gatsby 的新手，我使用启动器 Gatsby-starter-ghost 开始了一个项目。启动器自带 Casper 主题，现在我想用新主题替换 Casper 或构建自定义主题。
我无法弄清楚如何替换 Casper，甚至无法找到它在项目文件夹中的位置。有很多关于 Gatsby 主题和启动器的文档，但我几乎找不到任何关于 gatsby-starter-ghost 的文档。我翻遍了node_modules 和src 文件夹，甚至找不到Casper 主题所在的位置。如果我使用 npm 安装一个新主题并将插件放入 gatsby-config 文件中，它会破坏我的项目并且我会收到大量 GraphQL 错误。我读过主题通常应该在content 文件夹中，但我的content 文件夹只包含两个空文件夹。
这是我的项目结构：
如何替换gatsby-ghost-starter中的主题？
【问题讨论】：
标签：
reactjs
themes
config
gatsby
ghost-blog
【解决方案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 结构，则可能需要更新组件。