Как создать блог GatsbyJS (часть 4): макет и избранные изображения
web-development reactjs gatsbyjs

Как создать блог GatsbyJS (часть 4): макет и избранные изображения

28 февраля 2023 г.

Добро пожаловать в четвертую часть «Создание блога GatsbyJS!»

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

Рекомендуемые изображения являются неотъемлемой частью любого блога, поскольку они помогают привлечь внимание читателя и сделать ваш контент более привлекательным. В этом посте мы покажем вам, как добавлять изображения в компонент макета, который мы создали во второй части этой серии. Мы также покажем вам, как определить уникальные изображения для каждого сообщения в блоге, используя переднюю часть файла MDX сообщения. С помощью этих методов вы сможете создать визуально ошеломляющий и профессионально выглядящий блог, который будет выделяться из толпы. Итак, приступим!

Содержание

  • Добавление избранных изображений на главные страницы
  • Добавление избранных изображений в записи блога
  • Отображение изображений в списке блогов.
  • Заключение

Добавление избранных изображений на главные страницы

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

<цитата>

ПРИМЕЧАНИЕ. Изображение перед основным содержанием — это классический вид веб-сайтов и блогов. Но вы можете решить, что он слишком устарел или у него паршивый SEO, что совершенно круто. Так что я не обязательно выступаю за этот стиль (хотя я использую его на своем собственном веб-сайте).

Обновления макета страницы

Откройте файл ./src/components/PageLayout.tsx и измените его следующим образом:

// ./src/components/PageLayout.tsx
import { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image';
import React from 'react';
import { PageFooter } from '../page-footer';
import { PageHeader } from '../page-header';

interface PageLayoutProps {
  image?: IGatsbyImageData | null;
  title?: string;
}

export const PageLayout: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
  children,
  image,
  title,
}) => {
  return (
    <main className="font-sans font-light">
      <PageHeader />
      {image && (
        <div className="relative mb-12 flex h-96 items-center justify-center">
          <GatsbyImage image={image} alt="" className="absolute inset-0" />
          {title && (
            <div className="z-20 mx-auto max-w-5xl">
              <h1 className="text-4xl font-bold text-white sm:text-5xl">
                {title}
              </h1>
            </div>
          )}
          {/* Darken the background image a little so the text shows up better */}
          <div className="absolute inset-0 z-10 bg-gray-900 opacity-30" />
        </div>
      )}
      <div className="mx-auto mb-12 max-w-5xl">{children}</div>
      <PageFooter />
    </main>
  );
};

Найти изображение

Мы будем передавать данные изображения и заголовок страницы компоненту макета с наших страниц.

Но прежде чем мы это сделаем, нам нужно найти изображение и поместить его в нашу папку ./src/images. Так что давай, найди красивую картинку. Например, я использую Pexels для многих своих стоковых изображений.

Найдя изображение, переместите его в каталог ./src/images:

mv /path/to/downloaded/image.jpg ./src/images/header.jpg

Обновление главной страницы

Теперь мы готовы начать добавлять изображение на наши страницы. Начнем с «Главной» страницы.

// ./src/pages/index.tsx
import { graphql, HeadFC, PageProps } from 'gatsby';
import { getImage } from 'gatsby-plugin-image';
import * as React from 'react';
import { PageLayout } from '../components/page-layout';

const IndexPage: React.FC<PageProps<Queries.IndexPageQuery>> = ({ data }) => {
  const image = data.headerImage
    ? getImage(data.headerImage.childImageSharp)
    : null;

  return (
    <PageLayout image={image} title="My Gatsby Blog">
      <div className="container mx-auto px-4 lg:px-0">
        <span className="text-lg">This is my Gatsby Blog home page!</span>
      </div>
    </PageLayout>
  );
};

export default IndexPage;

// This query will be run during the GatsbyJS build process when creating our
// pages. The data will be passed to our page component as a `data` property.
export const pageQuery = graphql`
  query IndexPage {
    headerImage: file(relativePath: { eq: "header.jpg" }) {
      childImageSharp {
        gatsbyImageData(layout: FULL_WIDTH)
      }
    }
  }
`;

export const Head: HeadFC = () => <title>Home Page</title>;

<цитата>

ПРИМЕЧАНИЕ. Аргумент имени файла relativePath должен совпадать с именем файла, который вы добавили в папку ./src/images. . Итак, еще раз проверьте правильность имени файла.

После обновления сервера разработки вы должны увидеть домашнюю страницу, которая выглядит примерно так:

Home page with featured image

Чтобы получить тот же результат на страницах «О нас» и «Список блогов», выполните то же самое, что мы сделали выше, для .src/pages/about.tsx и ./src/ pages/blog.tsx компоненты страницы.

<цитата>

СОВЕТ. Если вам нужны разные изображения для каждой страницы, загрузите дополнительные изображения и переместите их в папку ./src/images. Затем обновите pageQuery для каждого компонента страницы, чтобы собрать правильные данные изображения, соответствующим образом обновив relativePath.

Добавление избранных изображений в записи блога

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

Здесь вступает в действие передняя часть каждого сообщения в блоге. Мы будем использовать переднюю часть каждого файла MDX, чтобы определить свойство featuredImage и использовать это свойство для поиска изображения и его отображения в записи в блоге.

Обновить переднюю часть

Обновите каждый MDX-файл вашего сообщения в блоге, указав переднюю часть, которая выглядит следующим образом:

---
date: 2023-02-18 01:00:00
slug: my-first-blog-post
title: My First Blog Post
author: John Smith
featuredImage: ./featured.jpg
---

<цитата>

ПРИМЕЧАНИЕ. Обязательно добавляйте это в каждую запись своего блога.

После добавления уценки вам, вероятно, потребуется перезапустить сервер разработки, чтобы убедиться, что передняя часть правильно проанализирована.

Добавьте несколько файлов изображений.

Очевидно, что вам нужно иметь файлы изображений, прежде чем вы увидите какие-либо изображения! Итак, снова найдите несколько красивых фотографий на своем любимом сайте стоковых изображений.

После того, как вы загрузите несколько изображений, добавьте их в каталог постов блога:

mv /path/to/downloaded/image.jpg .src/content/<blog-directory>/featured.jpg

<цитата>

ПРИМЕЧАНИЕ. Убедитесь, что у вас есть изображение для каждого из ваших сообщений; в противном случае вы можете столкнуться с некоторыми ошибками при построении запросов GatsbyJS.

Обновление BlogPostTemplate.tsx

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

Откройте файл ./src/templates/BlogPostTemplate.tsx и обновите его следующим образом:

// ./src/templates/BlogPostTemplate.tsx
import { MDXProvider } from '@mdx-js/react';
import { graphql, PageProps } from 'gatsby';
import { getImage } from 'gatsby-plugin-image';
import React from 'react';
import { components, MainContent } from '../components/mdx-components';
import { PageLayout } from '../components/page-layout';

const BlogPostTemplate: React.FC<PageProps<Queries.BlogPostQuery>> = ({
  data,
  children,
}) => {
  const featuredImage = data.mdx?.frontmatter?.featuredImage
    ? getImage(data.mdx.frontmatter.featuredImage.childImageSharp)
    : null;

  return (
    <PageLayout
      image={featuredImage}
      title={data.mdx?.frontmatter?.title ?? undefined}
    >
      <MainContent>
        <div className="mb-8">
          <span className="text-sm font-thin">
            By {data.mdx?.frontmatter?.author} on {data.mdx?.frontmatter?.date}
          </span>
        </div>
        <MDXProvider components={components}>{children}</MDXProvider>
      </MainContent>
    </PageLayout>
  );
};

export default BlogPostTemplate;

export const query = graphql`
  query BlogPost($id: String!) {
    mdx(id: { eq: $id }) {
      frontmatter {
        title
        author
        date(formatString: "MMMM DD, YYYY")
        featuredImage {
          childImageSharp {
            gatsbyImageData(layout: FULL_WIDTH)
          }
        }
      }
    }
  }
`;

Если вы перейдете к сообщению в блоге, вы должны увидеть избранное изображение!

Blog post page with featured image

Показывать изображения в списке блогов

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

Обновить страницу блога

Для этого мы обновим запрос в нашем компоненте страницы ./src/pages/blog.tsx.

// ./src/pages/blog.tsx
import { graphql, Link, PageProps } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import React from 'react';
import { PageLayout } from '../components/page-layout';

const BlogPage: React.FC<PageProps<Queries.BlogPageQuery>> = ({ data }) => {
  const headerImage = data.headerImage
    ? getImage(data.headerImage.childImageSharp)
    : null;

  return (
    <PageLayout image={headerImage} title="Blog">
      <ul className="mx-auto max-w-3xl p-4 sm:p-0">
        {data.allMdx.edges.map(({ node }) => (
          <li key={node.id} className="mb-4 h-72 last-of-type:mb-0">
            <Link
              to={`/blog/${node.frontmatter?.slug}`}
              className="flex items-center overflow-hidden rounded-lg border border-gray-400"
            >
              <div className="flex-1 md:h-72 md:w-64">
                {node.frontmatter?.featuredImage && (
                  <GatsbyImage
                    image={
                      getImage(node.frontmatter.featuredImage.childImageSharp)!
                    }
                    alt=""
                    className="h-full w-full"
                  />
                )}
              </div>
              <div className="flex-1 p-6">
                <h2 className="mb-4 text-xl font-bold">
                  {node.frontmatter?.title}
                </h2>
                <span className="mb-2 block text-sm font-thin">
                  By {node.frontmatter?.author} on {node.frontmatter?.date}
                </span>
                <span className="block text-lg">{node.excerpt}</span>
              </div>
            </Link>
          </li>
        ))}
      </ul>
    </PageLayout>
  );
};

export default BlogPage;

export const query = graphql`
  query BlogPage {
    headerImage: file(relativePath: { eq: "header.jpg" }) {
      childImageSharp {
        gatsbyImageData(layout: FULL_WIDTH)
      }
    }
    allMdx(sort: { frontmatter: { date: DESC } }) {
      edges {
        node {
          id
          excerpt(pruneLength: 160)
          frontmatter {
            title
            author
            date(formatString: "MMMM DD, YYYY")
            slug
            featuredImage {
              childImageSharp {
                gatsbyImageData(layout: FULL_WIDTH)
              }
            }
          }
        }
      }
    }
  }
`;

После этих изменений страница со списком блогов должна выглядеть примерно так:

Blog list page with featured images

Заключение

Добавив избранные изображения в наш блог GatsbyJS, мы сделали большой шаг вперед в создании визуально потрясающей и привлекательной платформы для наших читателей. Кроме того, используя запросы GraphQL для получения изображений из нашей локальной файловой системы и отображения их на страницах нашего блога, мы также получили более глубокое понимание мощности и гибкости GatsbyJS.

По мере того, как мы продолжаем создавать наш блог, будет много новых задач и возможностей для изучения. В следующем выпуске «Создание блога GatsbyJS» мы обсудим оптимизацию для поисковых систем и социальных сетей. Это будет включать такие темы, как метаданные, карты сайта и теги Open Graph, которые имеют решающее значение для обеспечения максимальной видимости и охвата нашего блога.

Мы надеемся, что вы последовали нашему примеру и вдохновились на создание своего блога с помощью GatsbyJS. Если у вас есть какие-либо вопросы или отзывы, пожалуйста, не стесняйтесь спрашивать в комментариях. И обязательно следите за обновлениями для следующего выпуска серии, где мы рассмотрим еще более интересные темы GatsbyJS!

Также опубликовано здесь.

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE