Gridsome에서 페이지 매김을 설정하는 방법

그리드썸이란?

Gridsome은 어디서나 배포할 수 있는 빠르고 안전한 웹사이트를 만들기 위한 최신 웹사이트 개발 프레임워크입니다. 정적 HTML 파일은 브라우저에 로드되면 Vue.js 기반 SPA로 수화되는 SEO 친화적인 마크업을 생성하기 위해 생성됩니다. Gridsome은 또한 페이지 매김 설정을 그 어느 때보다 쉽게 ​​만들었습니다 😄

Gridsome 페이지 매김 설정 단계

블로그 게시물을 가져오는 Gridsome 블로그가 이미 있고 새 기능으로 페이지 매김을 추가하고 있다고 가정합니다. 이 경우 따라야 할 단계는 다음과 같습니다.

- GraphQL 쿼리에서 페이지 매김 설정

- Gridsome의 Pager 컴포넌트 가져오기

- 필요한 스타일링 추가

GraphQL 쿼리에서 페이지 매김 설정

데이터 수집은 Gridsome의 GraphQL 쿼리에 의해 처리됩니다. GraphQL 쿼리에서 @paginate 지시문을 사용하여 컬렉션에 대한 자동 페이지 매김을 추가할 수 있습니다.

쿼리는 특정 페이지의 소스를 로드하는 데 사용할 수 있는 $page: Int 변수를 받습니다.

query ($page: Int) {
  allBlogPost(perPage: 10, page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        title
        path
      }
    }
  }
}

위의 예에서 각 페이지에는 10개의 블로그 게시물이 포함됩니다.

Gridsome의 Pager 컴포넌트 가져오기

Gridsome에는 쉽게 페이지 매김을 위해 가져올 수 있는 내장형 Pager 구성 요소가 있습니다. Gridsome에서 Pager 구성 요소를 가져와 추가합니다.

import { Pager } from 'gridsome';

export default {
  components: {
    Pager
  }
 }

Pager 구성 요소는 여러 속성을 허용할 수 있지만 필요한 속성은 "총 페이지 수"및 "현재 페이지"뿐입니다. 이러한 속성은 Pager 구성 요소에 전달하는 "pageInfo"에서 찾을 수 있습니다.

<Pager :info="$page.allBlogPost.pageInfo" />

사용자 정의 스타일 추가

일반 CSS 클래스를 사용하여 페이지 매김 컨테이너의 스타일을 지정할 수 있지만 링크 스타일을 지정하려면 :linkClass 속성을 사용해야 합니다.

주형

<Pager :info="$page.allBlogPost.pageInfo"
       class="pager-container"
       linkClass="pager-container__link"  />

스타일

<style scoped lang="scss">
  .pager-container {
    display: inline-block;
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
    color: black;

    &__link {
      text-align: center;
      padding: 0.6rem 1.2rem;
      color: white;
      text-decoration: none;
    }
  }

  .active {
    background-color:  rgb(44, 201, 180);
  }
</style>

그게 다 사람들이야. 4개월 동안 꾸준히 글을 쓰고 있어요 🎉😄

How to add Code snippets to Gridsome에 대한 내 기사를 즐길 수도 있습니다.

Read more of my articles