Одним из самых эффективных методов продвижения вашего бизнеса является создание контента.
Вы можете выбирать между различными методами и средствами публикации своих идей.
Чаще всего вам захочется выбрать что-то простое, что поможет вам сразу приступить к работе, например Средний.
Тем не менее, у самостоятельного создания блога есть одно преимущество: он позволяет настроить пользовательский интерфейс.
Одним из важнейших элементов, который может определить опыт ваших читателей, является то, как они находят ваш контент.
Для этого вы должны быть в состоянии предложить своим читателям релевантный контент.
Вы хотите, чтобы ваши читатели были полностью вовлечены и извлекли максимальную пользу из того, что вы предлагаете.
В нашем предыдущем сообщении в блоге мы рассмотрели, как создать мощный блог с помощью 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.