Paginate homepage

This commit is contained in:
Badri Sunderarajan 2020-03-09 18:45:40 +05:30
parent ea9427f474
commit a67c114815

View file

@ -26,14 +26,28 @@
<div class="post-feed">
<Card v-for="{ node }, count in $page.posts.edges" :key="node.id" :cardData="node" :isLarge="count % 6 == 0 ? true : false" />
</div>
<Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
</div>
</main>
</Layout>
</template>
<style lang="css">
.button {
color: white;
background: #81645B;
border-radius: 0.5rem;
padding: 1rem;
margin: 0.5rem;
}
</style>
<script>
import Navbar from '../components/Navbar'
import Card from '../components/Card';
import { Pager } from 'gridsome'
export default {
metaInfo: {
@ -42,7 +56,9 @@
}
},
components: {
Navbar, Card
Navbar,
Card,
Pager,
},
computed: {
HeroBgImage(metadata) {
@ -60,11 +76,17 @@
</script>
<page-query>
{
query Posts($page: Int) {
posts: allGhostPost(
sortBy: "published_at",
order: DESC,
) {
perPage: 6,
page: $page,
) @paginate {
pageInfo {
totalPages
currentPage
}
edges {
node {
title