TLDR: этот пост является репостом моего поста в блоге с моего сайта Serving Niches. Если вы сталкивались с подобными проблемами при работе с Гэтсби, вы можете увидеть, как ярешил их.
https://servingniches.org/posts/2018-02-20___the_blog_is_live/
После нескольких недель возни и работы над ошибками этот блог на GatsbyJS наконец-то готов к работе в прайм-тайм. Весь код для этого сайта является открытым исходным кодом и может быть найден здесь.
Возникшие проблемы:
- Проблема 1: разветвленное репо, которое этот сайт использовал в качестве отправной точки, необходимо было перенести на Gatsby V2.
- Исправление: ознакомьтесь с действительно хорошей официальной документацией по переносу с Gatsby V1 на V2 здесь. Функциональность макета пришлось переместить под компоненты и рассматривать как еще один компонент, а не как шаблон, который применяется ко всем страницам. Функциональность макета из Gatsby v1 можно воссоздать с помощью плагина gatsby-plugin-layout.
// File: gatsby-config.js
{
resolve: `gatsby-plugin-layout`,
options: {
component: require.resolve(`${__dirname}/src/components/layouts/index.jsx`),
},
},
Проблема 2: изображения в уценке не отображаются
Исправлено: изображения в файлах уценки (.md) не отображались. Проблема была двоякой.
1. Не удалось найти изображения обложки.
2. Изображения в записи блога вернули ошибку 404.
Исправление включало добавление двух плагинов gatsby — gatsby-remark-copy-images и gatsby-remark-images.
"gatsby-remark-copy-images": "^0.2.1", "gatsby-remark-images": "^3.0.3",
// File: gatsby-config.js { resolve: 'gatsby-transformer-remark', options: { plugins: [ 'gatsby-remark-copy-images', ], }, }, { resolve: 'gatsby-remark-images', },
GraphQL должен возвращать поле publicURL, которое будет содержать URL-адрес изображения, которое вы пытаетесь отобразить в своем компоненте.
... cover { id, publicURL, name }, ...
export const query = graphql` query { allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) { edges { node { id fields { slug } frontmatter { title subTitle cover { id publicURL name } categories date } excerpt headings { value depth } html rawMarkdownBody fileAbsolutePath } } } } `;
Добавлены функции:
- Функция 1: Добавлен раздел блога. За исключением стиля, все остальное точно соответствует информации, найденной по ссылкам ниже.
- Официальная документация GatsbyJS по созданию блога
https://www.gatsbyjs.org/blog/2017-07-19-creating-a-blog-with-gatsby/ - Серия БЕСПЛАТНЫХ видео от Egghead.io о создании блога с Гэтсби
https://egghead.io/courses/build-a-blog-with-react-and-markdown-using-gatsby - Функция 2: отдельные сообщения в блоге генерируются из уценки.
- Технически это не отдельная функция, но, поскольку первоначальная идея заключалась в том, чтобы отдельные посты оформлялись по-разному, я оставлю это здесь.
- Программно создавать страницы из данных
https://www.gatsbyjs.org/tutorial/part-seven/
Полезные ссылки
Источник изображения обложки
Источник изображения: Фликр