Let's Learn 11ty Part 10: 모두 함께 가져오기

지난 기사에서 우리는 외부 데이터를 사용하여 사이트의 게시물을 렌더링했습니다.

알아차리셨다면 이전에 게시물 하단에 있던 멋진 이전/다음 게시물이 없습니다.

다시 가져가는 것이 좋지 않을까요? 이것이 이 기사의 주요 초점입니다.

먼저 로컬 게시물을 사용하여 게시물 페이지 매기기가 이전에 어떻게 생겼는지 살펴보겠습니다.

 {% 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의 Shiv Jha-Mathur에게 특별히 감사드립니다.

당신을 위한 나의 탐구

이제 API에서 기사를 가져오고 로컬 기사와 동일한 기능을 유지하는 방법을 살펴보았습니다. 시리즈에서 배운 모든 것을 하나의 완전한 사이트로 결합하는 방법을 알아보십시오.

그동안 시리즈 저장소를 업데이트하는 작업을 할 것입니다. 부품별로 다른 분기를 수행합니다.

행운을 빌어요 😄

읽어주셔서 감사합니다. 연결합시다!

저의 작은 구석을 찾아주셔서 감사합니다. , Polywork 및