snipette/snipette-gridsome
snipette/snipette-gridsome
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Paginate homepage

Browse source
This commit is contained in:
Badri Sunderarajan 2020-03-09 18:45:40 +05:30
parent ea9427f474
commit a67c114815
1 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/pages/Index.vue
View file

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