Блог

Я новичок в Gatsby и начал проект, используя starter, Gatsby-starter-ghost. Программа starter поставляется с темой Casper, и теперь я хочу заменить Casper новой темой или создать пользовательскую тему.

Я не могу понять, как заменить Casper или даже найти, где он находится в папках проекта. Доступно много документации по темам Gatsby и starters, но я едва могу найти какую-либо документацию для gatsby-starter-ghost . Я перерыл папки node_modules и src и даже не могу найти, где находится тема Casper. Если я устанавливаю новую тему с помощью npm и помещаю плагин в gatsby-config файл, это прерывает мой проект, и я получаю множество ошибок GraphQL. Я читал, что темы обычно должны находиться в content папке, но в моей content папке нет ничего, кроме двух пустых папок.

Вот структура моего проекта:

Как мне заменить тему в gatsby-ghost-starter ?

Темы Gatsby используют концепцию, называемую «затенение«. Вы можете заменить любой из файлов темы по умолчанию, поместив файл с тем же путем и именем в свою папку содержимого. Вероятно, поэтому в вашей папке нет файлов темы, starter просто использует все значения по умолчанию.

Тем не менее, глядя на gatsby-starter-ghost, не похоже, что он вообще использует тему Gatsby, поэтому затенение не применяется.

Если вы посмотрите на gatsby-starter-ghost/src/components/common/ , в нем есть различные файлы, которые определяют используемые компоненты. В частности, Layout.js задает базовую структуру для каждой страницы и импортирует CSS-файл из ../../styles/app.css .

Этот CSS, эти общие компоненты, а также различные файлы шаблонов в src/templates определяют HTML-структуру страниц и используемый ими CSS. Если вы настроите их, вы сможете изменить дизайн в соответствии с вашими потребностями.

Начните с просмотра app.css и небольшой корректировки ее, посмотрите, как далеко это вас заведет. Но вам может потребоваться обновить компоненты, если вы хотите ввести новые классы или изменить структуру HTML.