Я работаю над сайтом документации, созданным из документации gatsby starter gatsby-starter-rocket-docs. Я хочу, чтобы в качестве заголовка на боковой панели использовалось изображение, отличное от изображения по умолчанию. В настоящее время изображение взято из ...

1
ilyanaDev 28 Дек 2020 в 23:16

1 ответ

Лучший ответ

Когда вы имеете дело с темами Gatsby, вам нужно приложить дополнительные усилия, чтобы переопределить настройки конфигурации по умолчанию в ядре темы, как вы сказали. Gatsby позволяет сделать это, используя концепцию , известную как «затенение». ". В основном это настраиваемая конфигурация (от логотипов до CSS и т. Д.), Которая переопределяет конфигурацию по умолчанию. Из их документации:

Темы Гэтсби вводят понятие, называемое «затенение». Эта особенность позволяет пользователям заменять файл в каталоге src, который включен в комплекте webpack с собственной реализацией. Это работает для Компоненты React, страницы в src/pages, файлы JSON, файлы TypeScript, как а также любой другой импортированный файл (например, .css) на вашем сайте.

Практический вариант использования - когда вы установили gatsby-theme-blog и хотите настроить компонент автора 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 и так далее для остальных пользовательских компонентов.

1
Ferran Buireu 29 Дек 2020 в 06:30