无法覆盖从 gatsby-starter-rocket-docs 创建的文档站点上的样式着色和 svg 图像

问题描述

我正在使用 gatsby starter gatsby-starter-rocket-docs 创建的文档站点。我想要一个与默认图像不同的图像作为侧边栏的标题。目前，图像来自节点模块中定义的 svg，而不是存储库的代码本身。节点模块不会持久化，因此无法在那里进行更改。我需要覆盖节点模块（通过 npm install gatsby 安装在文件夹中）中定义的样式，但我需要从持久化的代码中执行此操作。

这是我要替换的图像：

此问题的定义更详细here，here 是包含所有代码的存储库。该问题还提到更改侧栏中突出显示链接的颜色，这应该有类似的修复，因为它的突出显示颜色也在节点模块中定义。然而，图像是更重要的问题。

解决方法

当您处理 Gatsby 主题时，您需要付出额外的努力来覆盖主题核心中的默认配置设置，正如您所说。 Gatsby 允许您使用 concept known as "shadowing" 来实现。基本上是一种自定义配置（从徽标到 CSS 等），它会覆盖默认配置。来自他们的文档：

盖茨比主题引入了一个称为“阴影”的概念。这项特征 允许用户替换包含的 src 目录中的文件 在具有自己实现的 webpack 包中。这适用于 React 组件、src/pages 中的页面、JSON 文件、TypeScript 文件，如 以及您网站中的任何其他导入文件（例如 .css）。

一个实际用例是当您安装了 gatsby-theme-blog 和 想自定义 author Bio 组件添加自己的 传记内容。阴影可让您替换主题的原始内容 文件 gatsby-theme-blog/src/components/bio.js，将您自己的文件添加到 进行任何您需要的更改。

您需要使用自己的组件、资产和样式重新创建主题结构（在 node_modules 中检查它）。例如，鉴于该结构：

├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
└── src
    ├── components
    │   ├── bio-content.js
    │   ├── bio.js
    │   ├── header.js
    │   ├── home-footer.js
    │   ├── layout.js
    │   ├── post-date.js
    │   ├── post-footer.js
    │   ├── post-hero.js
    │   ├── post-link.js
    │   ├── post-list.js
    │   ├── post-title.js
    │   ├── post.js
    │   ├── posts.js
    │   └── seo.js
    ├── gatsby-plugin-theme-ui
    │   └── components.js
    └── gatsby-theme-blog-core
       └── components
          ├── post.js
          └── posts.js

要添加自定义 bio-content.js 组件，您需要在 bio-content.js 下添加一个名为 /src/gatsby-theme-blog/components/bio.js 的文件，其他自定义组件依此类推。