В нашей последней статье мы использовали внешние данные для отображения постов на нашем сайте.
Если вы заметили, у нас нет того классного «Предыдущего/Следующего сообщения», которое было внизу наших сообщений раньше.
Разве не здорово было бы вернуть их обратно? Это и является основной темой данной статьи.
Давайте сначала посмотрим, как выглядела наша пагинация постов раньше с локальными постами
{% set previousPost = collections.post | getPreviousCollectionItem(page) %}
{% set nextPost = collections.post | getNextCollectionItem(page) %}
{% if previousPost %}Previous: <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a>{% endif %}
<br>
{% if nextPost %}Next: <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a>{% endif %}
Выше мы использовали то, что я назвал одним из краеугольных камней Eleventy — коллекции.
Этот метод не будет работать для постов, которые мы получили из Hashnode, потому что они не являются частью коллекции, как те посты, которые у нас были.
Чтобы вернуть эту функциональность, нам нужно добавить пару вещей в наш .eleventy.js.
Коллекция
Когда мы начинали эту серию статей, мы создали коллекцию — для наших страниц. Мы собираемся использовать те же знания для создания коллекции из наших постов Hashnode.
В .eleventy.js добавьте следующее:
eleventyConfig.addCollection("articles", async () => {
const endpoint = `https://api.hashnode.com/`;
const { GraphQLClient, gql } = require("graphql-request");
const client = new GraphQLClient(endpoint);
const query = gql`
{
user(username: "Psypher1") {
publication {
posts {
title
coverImage
brief
slug
dateAdded
contentMarkdown
}
}
}
}
`;
const articles = await client.request(query);
return articles.user.publication.posts;
});
Мы использовали ту же часть кода, что и в файле posts.js, но на этот раз для создания коллекции.
Фильтр
В нашем оригинальном коде мы также использовали этот фильтр: getPreviousCollectionItem(page) — это то, что позволяет нам получить следующую и предыдущую функциональность.
Для этого мы также сделаем фильтр в том же файле .eleventy.js.
elevntyConfig.addFilter("nextArticle", (articles, page, modifier = 1) => {
const parts = page.outputPath.split("/");
parts.pop(); // get rid of `index.html`
const slug = parts.pop();
for (const [index, article] of articles.entries()) {
const target = index + modifier;
if (article.slug === slug && target >= 0 && target < articles.length) {
return articles[target];
}
}
});
То, что мы сделали сейчас, работает:
Данные (статьи), возвращаемые в коллекции, как бы определяют, как будут работать следующий/предыдущий.
Частичная пагинация
Затем мы изменим/создадим наш файл _paginate.njk, чтобы он выглядел следующим образом:
{% set previousPost = collections.articles | nextArticle(page) %}
{% set nextPost = collections.articles | nextArticle(page, -1) %}
{% if previousPost %}Previous: <a href="/blog/{{ previousPost.slug }}">{{ previousPost.title }}</a>{% endif %}
<br>
{% if nextPost %}Next: <a href="/blog/{{ nextPost.slug }}">{{ nextPost.title }}</a>{% endif %}
Затем мы заходим в наш файл postLayout.njk и включаем его в нижней части
{% include "partials/_paginate.njk" %}
Вот и все. Мы вернулись туда, где были.
Особая благодарность выражается Шиву Джа-Матхуру из Eleventy Discord, который предоставил руководство и решение этой конкретной головоломки.
Мой поиск для вас
Теперь, когда мы увидели, как мы можем получать статьи из API и при этом иметь ту же функциональность, что и при использовании локальных статей. Попробуйте посмотреть, как можно объединить все, чему мы научились в этой серии, в один полноценный сайт.
Тем временем я займусь обновлением репо серии — сделаю разные ветки для каждой части.
Пожелайте мне удачи 😄
Спасибо, что прочитали, давайте общаться!
Спасибо, что посетили этот мой маленький уголок. Давайте общаться в Twitter, Polywork и LinkedIn