Переписывание статического веб -сайта с использованием Gatsby и GraphQL – Часть 3

Первоначально опубликовано Блог десяти миль квадрат.

Если вы следили за этой серией постов, когда я восстанавливаю свой личный сайт используя Gatsbyjs и Graphql , продолжить. Если нет, я рекомендую прочитать обратно на части один и два Анкет На этом этапе я перенес все свои данные из статических файлов YAML, запросил данные, используя graphQL и отобрал страницы, используя Gatsby и JXS. Я удалил все ссылки на язык жидкого шаблона, который я использовал в своем коде Jekyll, и сайт находится в рабочем состоянии. Теперь я обрачу свое внимание на изображения.

Обработка изображений

Мой сайт на самом деле использует много изображений в том, что является чистым дизайном. У меня есть изображение, включенное в большинство заголовков, которые я использую, у меня есть изображение в мою биографию, и я включаю изображения из каждого из моих выступлений. Так с чего начать?

Начнем с картинки для моей биографии. Это одноразовое изображение в теле моей целевой страницы и выглядит так.

Есть простой способ обработки этого изображения. Я могу импортировать файл изображения и ссылаться на его непосредственно в коде JSX для домашней страницы. Что-то вроде этого:

import headshot from '../assets/headers/headshot.jpg'

Класс выстрела в голову обрабатывает хороший круговой дисплей изображения, а также его центральное выравнивание на странице. Это здорово выглядит! Однако это не оптимизировано. Поскольку оптимизация является одним из основных преимуществ использования Гэтсби, давайте посмотрим, как это сделать. В процессе я буду справляться с немного более сложным вариантом использования.

Gatsby-Image

Оптимизация изображения в Гэтсби предоставляется плагином под названием `gatsby-image` что невероятно эффективно. Чтобы использовать его, я начну с использования NPM для установки этого плагина и связанных с ним зависимостей.

npm install gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp

Как только это будет сделано, я хочу добавить недавно установленные плагины в мой файл gatsby-config.js. Наш файл конфигурации в конечном итоге выглядит так (другие плагины, которые мы уже используем, были удалены из этого фрагмента для простоты). Обратите внимание, что один раз `gatsby-image` был установлен. Он не должен быть включен в файл gatsby-config.js.

plugins:[
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`
]

Изображения в ямле

Теперь мы настроены для борьбы с более сложным вариантом использования, моей страницей разговоров. В моей реализации сайта Jekyll у каждого из моих выступлений было связанное изображение, подобное этому.

Все файлы изображений были сохранены в папке с надписью «Говоря». Файл YAML, который определил данные для моей разговорной страницы, имел ссылки на имя файла каждого изображения. Таким образом, когда я прошел через каждое выступление, имя файла будет приготовлено с помощью пути к говорящей папке, а страница будет отображать изображение.

Итак, как мне сделать это в Гэтсби? Я собираюсь использовать GraphQL, чтобы запросить изображение. Прямо сейчас на имена файлов изображения ссылаются вместе с данными для каждого выступления. В результате, для того, чтобы это работало, необходимо правильно запросить изображение и убедиться, что указанные данные правильно соединены с пути, чтобы сам файл можно было найти и обработать сам файл.

На самом деле я собираюсь начать с сначала решить вторую проблему. Честно говоря, выяснить это было странно привередливым процессом. Оказывается, это комбинация куча разных вещей Но я постараюсь пройти через это с решением, на котором я приземлился.

Помните из самого первого блога по этой теме, что объем того, что Гэтсби может видеть, определяется `gatsby-source-filesystem` плагин. В моем случае это определено, чтобы разоблачить SRC/данные . Поэтому я начну с размещения своей речи, наполненной всеми изображениями для моих разговоров, в рамках этой области.

Оттуда мне нужно убедиться, что имена файлов, определенные в Говорят.yaml соответствуют соответствующему пути, чтобы GraphQL мог найти файлы изображений. Чтобы сделать эту работу, я фактически слегка изменил данные в моем файле YAML. Вместо того, чтобы просто ссылаться на имя файла, я поместил относительный путь. Путь к изображению относительно расположения Говорят.yaml Файл (не определенный путь файлов -сарай, этот разбудил меня).

image: speaking/kcdc.jpg

Теперь я могу обратить свое внимание на GraphQL. Прямо сейчас Изображение это просто строка. Я могу запросить это так. “ `graphql {allspeakeyyAml (sort: {fields: [index], order: desc}) {edges {node {conference Year Date Date Image}}}` “ “

Тем не менее, вышеперечисленное не делает то, что я хочу. Он возвращает строку относительного пути, например, «Говоря/kcdc.jpg» Анкет Тем не менее, мне очень нравится, что я могу запросить изображение как часть самого говорящих данных. Я хотел бы сохранить это поведение. Оказывается, я могу.

Я могу использовать Gatsby-Image Особенности внутри запроса. Когда заполняется запрос, относительный путь будет указывать на местоположение файла изображения, а полученный запрос обрабатывает файл в виде изображения для отображения.

{
    allSpeakingYaml (sort: {fields: [index], order: DESC}) {
        edges {
            node {
                conference
                year
                url
                date
                image {
                    childImageSharp {
                        fluid {
                            ...GatsbyImageSharpFluid
                        }
                    }
                }
            }
        }
    }
}

Теперь, когда я пробегаю свои разговорные данные с помощью карты JSX, в каждом из этих объектов есть изображение вместо строки. Поэтому я хочу использовать JSX для доступа к этим изображениям. Как оказалось `g Atsby-Image` Имеет свой собственный тег, который я могу использовать, поэтому я импортирую это.

import Img from "gatsby-image";

Мой первый инстинкт – написать что -то подобное.

К сожалению, это не работает. Страница отображается с значком, где должно быть изображение. По какой -то причине это заняло у меня больше минуты, но ответ относительно прост.

Во многих наших запросах GraphQL структура запроса основана на структуре наших данных YAML. Таким образом, структура объекта возврата выглядит примерно так же, как файл YAML. Мы увидели исключение из этого правила, когда добавили узел и Edge Объекты для доступа к первому уровню результатов YAML. Это то же самое, я просто не заметил этого. Фактическое обработанное изображение находится в … Gatsbyimagesharpfluid уровень. То, что я получал с Node.image не было обработанным изображением. Так что получается успешный код

Одиночный запрос изображения

Теперь я хочу вернуться и оптимизировать «простой» вариант использования. Первое, что нужно сделать, это удалить импорт файла и настроить его как запрос GraphQL, который проходит через Gatsby-Image обработка. Это будет очень похоже на то, что я сделал для серии разговорных изображений.

export const query = graphql`
  query {
    file(relativePath: { eq: "headers/headshot.jpg" }) {
      childImageSharp {
         fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

Здесь нужно отметить пару вещей. Основываясь на моем предыдущем коде, я ожидаю относительного пути, который мне нужно быть относительно файла, в котором находится код, в данном случае это index.js. Однако это не работает. Относительный путь фактически основан на строке кода, который мы вставляем в `gatsby-source-filesystem` конфигурация, которая указывает на src/data Анкет Это на самом деле потребовалось немного, чтобы узнать.

Еще одна вещь, которую следует отметить в запросе, это то, что мы используем Gatsbyimagesharpixed вместо жидкости. Честно говоря, это также должно быть жидким изображением, и на моем последнем сайте это будет. Тем не менее, для целей проверки всех функций, предлагаемых плагином изображения, я хотел попробовать оба. В `gatsby-image` Жидкие изображения предназначены для изображений, которые не имеют конечного размера в зависимости от экрана, где по мере исправления других изображений.

После выяснения всех этих маленьких идиосинкразий я наконец -то могу отобразить это изображение, используя JSX. Это более или менее то же самое, что и то, что я сделал, чтобы отобразить мои разговорные данные. Единственное отличие состоит в том, что я решил обрабатывать изображение как фиксированное вместо жидкости, поэтому мне нужно ссылаться на его как таковое.

Соотношение сторон

Это хорошее время, чтобы пойти на быстрый касательный. В процессе попытки стилизовать свои изображения, я заметил удивительное количество сложностей. Как выясняется, каждое изображение имеет неявный стиль, который поставляется с оберткой, которую процессор надевает вокруг него. Это связывалось со всеми видами CSS, которые я пытался использовать. Это может быть совсем другой пост, но я обнаружил один аккуратный трюк как часть моего бесконечного Googling для ответа. Плагин поддерживает размеры, где вы можете установить соотношение сторон. Это можно использовать для фиксированных или обработанных жидкости изображений, это не имеет значения.

Статический запрос

Следующее, что я хочу сделать, это справиться с изображениями заголовка. На моем предыдущем сайте у меня был файл header.js, который был включен в мой макет и отображался на всех моих страницах. Поэтому я хочу иметь такой же многоразовый компонент здесь. Я начну с использования того же кода, который я использовал, чтобы отобрать свой выстрел в голову выше. Ну, это не работает. Оказывается, причина этого в том, что существуют ограничения на то, что GraphQL может сделать на не страницах.

Способ решить это – использовать статический запрос. Первое, что мне нужно сделать, это изменить структуру моего компонента Header.js.

export default () => (
  (
      

         
LAURIE BARTH
         
      
    )}
  />
)

Вместо константы запроса и данных, которые ссылаются на результат, я должен использовать статический запрос непосредственно в коде JXS, а затем ссылаться на его. Обратите внимание, что язык запроса не изменился, как и Img Синтаксис тегов, единственным изменением было местоположение запроса и использование тега StaticQuery для его завершения.

Несколько запросов и псевдонимов

Последний вариант использования, который мне нужно выяснить, – это то, как справиться с ситуацией, когда у меня есть несколько запросов в одном и том же файле/странице. Я могу или не могу понадобиться это на последнем сайте, но это достойное упражнение.

В этом случае я хочу запросить все мои данные в моем Говорят.yaml Файл и я хочу запросить свой выстрел в голову отдельно. Ответ на эту проблему состоит в том, чтобы использовать псевдоним, но я обнаружил, что большинство записей по этой теме объясняют эту концепцию, но пропустили некоторые Gotchas. Первое, что нужно знать, это то, что псевдоним присваивает имя запросу. Ниже приведен простой пример.

talks: allSpeakingYaml(sort: {fields: [index], order: DESC}) {
        edges {
            node {
                conference
                year
                url
                date
                image {
                    childImageSharp {
                        fluid {
                            ...GatsbyImageSharpFluid
                        }
                    }
                }
            }
        }
    }
}

Когда вы это делаете, вы изменили ссылку на этот объект в вашем JXS. Пока это ранее ссылалось как

{data.allSpeakingYaml.edges.map(({ node }) => ())

Предоставление его псевдонима не добавляет уровня сложности к объекту отклика, он просто заменяет его. Таким образом, вы получите ту же структуру, которая ссылается, как и

{data.talks.edges.map(({ node }) => ())

Имя объекта верхнего уровня неявно. Это важно, потому что, когда я добавил в это несколько запросов, я все еще проходил только в объекте данных

const SpeakingPage = ({ data}) => {}

Все остальное было упомянуто с этого имени возврата высшего уровня.

С этим пониманием я могу объединить два запроса и использовать псевдоним, чтобы различать их.

{
    allSpeakingYaml (sort: {fields: [index], order: DESC}) {
        edges {
            node {
                conference
                year
                url
                date
                location
                image {
                    childImageSharp {
                        fluid {
                            ...GatsbyImageSharpFluid
                        }
                    }
                }
                talks {
                    title 
                    video
                }
            }
        }
    }
    banner: file(relativePath: { eq: "headers/default.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
  }
}

Обратите внимание, что я решил, что мне не нужно псевдонивать первый запрос. Это разрешено; Нет никакого требования, чтобы все ваши запросы использовали псевдоним. Поэтому я ссылаюсь на массив разговорных данных так же, как и раньше.

{data.allSpeakingYaml.edges.map(({ node }) => ())

Затем я получаю доступ к своему изображению, используя свое имя псевдонима, баннер.

Конец

Ну это все. Теперь я оптимизировал все свои изображения. Этот пост включал ряд различных возможных вариантов использования, поэтому не чувствуйте, как будто вам нужно исследовать их все. Выберите примеры и советы, которые применяются к вашей реализации.

В моем случае мой сайт должен теперь пройти аудит маяка с гораздо более высоким уровнем, и эта серия блога подходит к концу. Надеемся, что эти посты были полезны для тех, кто столкнулся с теми же микро -проблемами, что и я. Моя следующая задача – удалить начальный шаблон, который я использовал, и сделать гораздо более отзывчивый дизайн. Так что до следующего раза!

Бонусная ошибка

Когда я вернулся и изменил свои изображения с Исправлено к жидкость Я получил ошибку.

Несмотря на свой внешний вид, решение этого на самом деле не требует промывки какого -либо кеша. На самом деле это связано с несовместимыми ссылками. Я вызвал это, потому что я изменил свой запрос, чтобы обработать изображение как жидкость Но ключ JSX все еще был установлен на Исправлено Анкет

Оригинал: “https://dev.to/laurieontech/rewriting-a-static-website-using-gatsby-and-graphql—part-3-4ho9”