Димитрий Ивашчук
GATSBY.JS – мощный статический генератор сайта (с динамическими возможностями), который можно использовать для создания супер-исполнителей веб-сайтов. Он имеет очень богатую функциональность плагина и идеально подходит для вашего следующего личный блог , посадка продукта , Pagel Page Page или небольшое приложение электронной коммерции Отказ
Содержание источника
Довольно очевидно, что, когда вы создаете свой сайт, помимо бизнес-логики, производительности, безопасности и стилизации, вы заботитесь о фактическом контенте, представленном конечным пользователю.
Дело может быть довольно простым: скажем, у вас есть страница продукта с разделами, которые необходимо редактировать маркетинговую команду, которая не хочет редактировать эти фантазии H1’s и р в редакторе кода.
Другим сценарием может быть страница для личного блога, которая имеет много постов, с каждым посты имеющим свой собственный заголовок, контент и тонны другой информации, которую вы можете отобразить.
Благодаря множеству плагинов, написанных Созданными сообществом и GATSBY, нам повезло выбрать из широкого спектра вариантов, чтобы получить наш контент на странице.
Sourcing из папки проекта с GATSBY-Source-FilesyStemastem и GATSBY-Markdown-complice
Одним из самых простых способов захватить наш контент – истолковывать его непосредственно из нашей папки проекта. Мы можем захватить активы, такие как изображения, и более сложные типы контента, такие как сообщения в блоге, написанные в Markdown.
Сначала нам нужно установить GATSBY-Source-filesystem и настроить в gatsby-config.js Отказ
NPM Установите GATSBY-Source-FilesyShestem
В gatsby-config.js :
С линиями выше мы говорим Гэтсби, что мы хотим разрешить GraphQL запрашивать все внутренности Активы Папка нашего проекта, расположенной по указанным дорожка .
Теперь, когда плагин готовят, мы можем на самом деле запрашивать нашу папку активов со следующим запросом GraphQL ( SourceInStanceName это параметр фильтра, который соответствует Имя На конфиге выше):
Обратите внимание, что, чтобы иметь возможность использовать изображения, возвращаемые этим запросом внутри составная часть а не внутри страница нам нужно использовать StaticQuery Доступно из GATSBY Отказ
StaticQuery принимает Запрос опоры, где мы можем использовать наш запрос GraphQL сверху и оказывать Опор, который делает все возможное, что имеет доступ к данные Что не более чем обертка для наших запрашиваемых файлов.
Если вы запрашиваете те же изображения, но хотите использовать их внутри одного из ваших страницы Вы можете получить доступ к нему напрямую из ropps.data.
Чтобы получить доступ к одному конкретному изображению по его названию, мы должны немного адаптировать наш запрос GraphQL. В противном случае мы можем использовать его в способах, описанных выше в первом сценарии с помощью StaticQuery в компоненте и ropps.data на странице.
Давайте укажем абсолютный путь к файлу и используйте Regex, чтобы выбрать вишневое изображение.
Когда GATSBY часто используется в качестве шаблона блога, он предлагает очень удобный способ работы с BlogPosts, написанными в Реклама Отказ Чтобы получить доступ к сообщениям Markdown, нам сначала нужно настроить наш конфиг немного, чтобы GATSBY знает, где наша Реклама Файлы живут.
Мы используем GATSBY-Source-filesystem Для достижения этого:
Чтобы быть в состоянии работать с Реклама Файлы в действительно удобном способе, нам также нужно настроить GATSBY-трансформатор-замечание плагин. Обратите внимание, как мы добавляем другие плагины внутри GATSBY-трансформатор-замечание Как GATSBY-CARKE-Images или ГАТСБИ-ЗАМЕЧАНИЕ-ПРИМИСЫ Отказ Это здесь, поэтому мы можем напрямую встроить изображения в нашу Реклама и выделить куски кода с Prismjs , соответственно.
Со всеми вышеупомянутой настройкой мы можем сейчас запросить наши сообщения о Markdown с Запрос (Мы можем удобно использовать Сортировать Чтобы заставить наши сообщения в блоге в хронологическом порядке и фильтр, чтобы убедиться, что мы запрашиваем только эти Markdowns, которые расположены в блоге Blog Папка нашего проекта):
Мы уже знаем, что теперь мы можем получить доступ к нашему Реклама Сообщения в блоге в любом Страница просто через this.props.data.allmarkdownremark.eedges , карта заправляет их и отобразите все необходимые данные, созданные для нас плагином.
Например, у нас есть доступ к Frontmatter что не более чем на JSON-структура, которую мы включаем в нашу Реклама Отказ
Вот быстрый пример:
Мы включили название и дату, но вы можете не стесняться добавлять любые другие параметры, которые вы хотите быть доступны из запроса (например, теги в форме массива):
Безголовый CMSS
Иногда не очень удобно изменить все типы контента, такие как изображения или сообщения в блоге в редакторе кода. Более того, ваш конечный пользователь может не знать о том, как перемещаться по коду и может потребовать более простого решения.
Это то, где в игру вступает без головы CMS. Представьте себе сценарий, в котором вы делаете страницу статического продукта с GATSBY и передайте ее в маркетинговый отдел, который отвечает за копирайтинг и изображения на странице. Вы построили его с кодом – они взаимодействуют с удобным пользователем, который позволяет легко изменить любой контент. Потрясающие!
Давайте рассмотрим, как мы сделаем это с GATSBY.JS!
Истоксинг от кончанного
Чтобы иметь возможность исходить из-за кончанта, вам понадобится аккаунт в https://www.contentalful.com/ . После регистрации вы получите простой пример проекта, который мы будем использовать для обучения.
На сегодня начнем с установки GATSBY-Source-Containful и добавляя его в наш конфиг.
NPM установить –save gatsby-source- добиться
В gatsby-config.js Нам нужно добавить плагин и предоставить наше SpaceId и Accessoken Что можно найти в настройках -> API ключей нашей панели инструментов проекта:
Обратите внимание, что это не очень хорошая идея, чтобы разоблачить ваш Accessoken к файлу конфигурации напрямую, чтобы он мог быть видимым всем на GitHub. Для учебных целей я буду включать его в код для этого учебника, но попробуйте использовать переменные среды для защиты ваших ключей, поскольку его можно увидеть в примере выше. Если это ваш первый раз, увидев термин Переменная среды Не волнуйтесь, вы можете понять концепцию от Это пост Отказ
Прежде чем мы будем двигаться дальше, я хочу показать вам, как мы можем решить маленький конфликт, исходя из того, что некоторые кончальные файлы рассматриваются как Реклама GATSBY.
Наше gatsby-node.js отвечает за программно создание страниц с наших постов Markdown, которые расположены в папке блога. По умолчанию он использует AllmarkDownRemark Запрос, который истолковал также довольную оценку, которую нам не нужно. Давайте адаптируем наш запрос для источника только те файлы, которые находятся в нашей папке проекта:
В gatsby-node.js Мы добавили Фильтр и установить это на /блог/ :
Теперь мы готовы источник нашего контента от кончации. На новой странице имени contentfor.js. Сначала мы хотим запрашивать наши активы, которые созданы для нас. В то время у нас есть один конкретный интересный тип содержимого под названием Курс У кого есть все необходимые предметы для нас для тренировки.
Это просто для запроса кончальных активов с GraphQL, и все, что нам нужно сделать, чтобы получить все записи, которые имеют тип Курс это запустить AllContententalCourse запрос.
Возможно, вы уже догадались, что мы можем запрашивать yourcustomtype контента с allcontentfulyyourcustomtype Отказ Обратите внимание, как мы отфильтровали наши курсы на языковой основе, в противном случае мы получим дубликаты каждого курса на каждом языке, указанном в кончальном. Это вполне конкретно для этого случая, потому что каждый курс имеет перевод:
От изучения нашего контента на Containful, мы видим, что каждый курс имеет заголовок, продолжительность, краткое описание и изображение. Мы включили те, которые в нашем запросе могут получить доступ к ним в нашем компоненте через This.props.data.data. .
Реконструировать
В этом небольшом руководстве вы узнали несколько способов поиска различных типов контента в GATSBY. Вы также узнали, как объединить их в одном проекте, избегая возможных конфликтов по источникам, именно указывая то, что мы хотим запрашивать из какого источника.
Спасибо за прочтение! Я надеюсь, что вам понравилось читать этот пост так сильно, как мне понравилось, писать! Если у вас есть какие-либо вопросы или хочется поднять обсуждение, не стесняйтесь обращаться со мной на твиттер . Я был бы счастлив, если вы ударили это Следуйте за кнопка Таким образом, вы не пропустите какие-либо будущие сообщения, которые я выпустите?
Как всегда, вы можете найти код для этого руководства здесь на Github
Первоначально опубликовано divdev.io
Оригинал: “https://www.freecodecamp.org/news/how-to-source-content-with-gatsby-js-c220dde97e7/”