Одним из самых эффективных методов продвижения вашего бизнеса является создание контента.

Вы можете выбирать между различными методами и средствами публикации своих идей.

Чаще всего вам захочется выбрать что-то простое, что поможет вам сразу приступить к работе, например Средний.

Тем не менее, у самостоятельного создания блога есть одно преимущество: он позволяет настроить пользовательский интерфейс.

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

Для этого вы должны быть в состоянии предложить своим читателям релевантный контент.

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

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

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

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

Пользовательский опыт

Читая сообщение в блоге, читатель обычно ищет информацию, которая обогатит его ноу-хау и его знания.

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

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

Предпосылка

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

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

Давайте начнем!

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

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

Получение предложений

Чтобы получить предложения, давайте изменим наш файл contentful.ts, включив в него нашу новейшую функцию:

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

Contentful предоставляет нам множество эффективных способов запрашивать наши сообщения; в нашем случае по тегам.

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

В теории

Давайте посмотрим, как работает наш алгоритм:

1- User is reading blog post 1
2- We defined an empty suggestions set
3- Fetch blog post 1 tags on load
4- Find 3 blog posts with at least one matching tag
5- Append your result to the suggestions set
6- If you found less than 3 blog posts
7- Then, fetch (3 - result.length) random blog posts
8- Append to suggestions set
9- Return suggestions

Шаг номер 7 очень важен, так как мы не хотим больше 3 предложений на пост.

В реализации

Чтобы получить предложения для каждого сообщения:

Наверху происходит много вещей.

Помните, что в нашей предыдущей статье мы уже включили фильтрацию по тегам.

Наша текущая цель — найти хотя бы один соответствующий тег во всех наших статьях и отобразить их.

'fields.tags.sys.id[in]': tags.length ? tags.join(',') : undefined

[in] позволяет нам сделать это, но поскольку Contentful позволяет нам запрашивать по ссылке в нашем случае, нам нужно включить идентификаторы тегов, которые генерирует Contentful. Их можно найти до поля fields.tags.sys.

Что произойдет, если у нас будет менее 3 сообщений для отображения в предложениях?

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

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

Давайте начнем с исключения текущей статьи (той, для которой мы хотим получить предложения), из повторной загрузки:

'fields.slug[ne]': currentArticleSlug, // exclude current article

Вы также хотите исключить предложения по выборке, которые вы уже получили по тегу.

'fields.slug[nin]': slugsToExclude, // exclude slugs already fetched

Наконец, мы добавляем к случайным сообщениям сообщения, которые мы получили по предложениям:

entries = [...entries, ...randomSuggestions.items];

Бонус

Мы включили вспомогательную функцию для сопоставления данных с интерфейсом BlogPost.

/**
 * Maps the items fetched by contentful
 * @param entries
 */
private mapData(entries): BlogPost[] {
    return entries.map(({sys, fields}: { sys: any; fields: any }) => ({
        id: sys.id,
        title: fields.title,
        description: fields.description,
        heroImage: fields.heroImage.fields.file.url,
        slug: fields.slug,
        tags: fields.tags,
        publishedAt: fields.publishDate
            ? new Date(fields.publishDate)
            : new Date(sys.createdAt),
    }));
}

Отображение предложений

Давайте изменим наш pages/post/index.tsx, чтобы получать и отображать предложения.

Давайте начнем с получения данных перед инициализацией представления, то есть: getInitialProps:

PostPage.getInitialProps = async ({ query }) => {
  const contentfulService = new ContentfulService();

  const { post } = query;
  const article = await contentfulService.getPostBySlug(post);
  // map the tags that we have fetched from Contentful
  const tags = article.tags ? article.tags.map(tag => tag.sys.id) : [];
  // pass the tags to the function we have built
  const suggestedArticles = await contentfulService.fetchSuggestions(
    tags,
    article.slug
  );

  return { article, suggestedArticles };
};

Теперь, когда компонент получает предложения, мы можем отобразить их:

// helper function to display the cards
const renderCards = suggestions =>
  suggestions.map((suggestion, index) => (
    <Card key={index} info={suggestion} />
  ));
const PostPage: NextPage = (props: Props) => {
...
   return (
...
<div className="suggestions">{renderCards(props.suggestedArticles)}</div>
...
   );
};

Последним шагом является исправление отображения карточек. В разделе pages/post/styles.css добавьте следующее:

...
.suggestions {
  display: flex;
  flex-flow: row;
  padding: 1.5rem 0;
  margin: 1rem auto 1rem 4rem;
  justify-content: flex-start;
}

.suggestions .card {
  margin: 0 1rem;
  height: 450px;
  width: 320px;
}

.suggestions .card:first-of-type {
  margin-left: 0;
}

Заключительные слова

Поздравляем! Вы успешно интегрировали предложения в свой блог NextJs и используете Contentful, используя возможности статических веб-сайтов!

Готовый стартовый набор

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

Не стесняйтесь присылать свои PR, проблемы и не забудьте отметить наш репозиторий звездочкой ⭐.

Первоначально опубликовано на https://www.techhive.io.