1

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

这是我要替换的图像：

在此处输入图像描述

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

4

1 回答 1

1

正如您所说，当您处理 Gatsby 主题时，您需要付出额外的努力来覆盖主题核心中的默认配置设置。Gatsby 允许您使用称为“阴影”的概念来制作它。基本上是一种覆盖默认配置的自定义配置（从徽标到 CSS 等）。从他们的文档中：

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

一个实际的用例是当您安装gatsby-theme-blog并想要自定义作者Bio组件以添加您自己的传记内容时。gatsby-theme-blog/src/components/bio.jsShadowing 让您可以用自己的文件替换主题的原始文件 ，以进行所需的任何更改。

您需要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.jsunder的文件/src/gatsby-theme-blog/components/bio.js，以此类推其他自定义组件。

于 2020-12-29T06:30:58.350 回答