140 lines
2.8 KiB
Vue
140 lines
2.8 KiB
Vue
<template>
|
|
<Layout>
|
|
<header
|
|
:class=HeroBgClass>
|
|
<div class="inner">
|
|
<div class="site-header-content">
|
|
<h1 class="site-title">
|
|
<img v-if="$static.metadata.ghost.logo != ''" class="site-logo"
|
|
:src="$static.metadata.ghost.logo"
|
|
:alt="$static.metadata.siteTitle||$static.metadata.ghost.title" />
|
|
<p v-if="$static.metadata.ghost.logo === ''">
|
|
{{ $static.metadata.title }}
|
|
</p>
|
|
</h1>
|
|
<h2 class="site-description">
|
|
{{ $static.metadata.siteDescription||$static.metadata.ghost.description}}
|
|
</h2>
|
|
</div>
|
|
<Navbar :logo=false />
|
|
</div>
|
|
</header>
|
|
|
|
<!-- The main content area -->
|
|
<main id="site-main" class="site-main outer">
|
|
<div class="inner">
|
|
<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;
|
|
}
|
|
|
|
.button.active {
|
|
font-weight: bold;
|
|
background: black;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
import Navbar from '../components/Navbar'
|
|
import Card from '../components/Card';
|
|
import { Pager } from 'gridsome'
|
|
|
|
export default {
|
|
metaInfo: {
|
|
bodyAttrs: {
|
|
class: 'home-template'
|
|
}
|
|
},
|
|
components: {
|
|
Navbar,
|
|
Card,
|
|
Pager,
|
|
},
|
|
computed: {
|
|
HeroBgImage(metadata) {
|
|
if (metadata.cover_image) {
|
|
return {
|
|
backgroundImage: 'url(' + $static.metadata.cover_image + ')'
|
|
}
|
|
}
|
|
},
|
|
HeroBgClass() {
|
|
return 'site-header outer no-cover'
|
|
}
|
|
}
|
|
}
|
|
</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
|
|
description: excerpt
|
|
date: published_at (format: "D. MMMM YYYY")
|
|
path
|
|
slug
|
|
id
|
|
coverImage: feature_image
|
|
content: html
|
|
authors {
|
|
name
|
|
url
|
|
slug
|
|
image: profile_image
|
|
}
|
|
tags {
|
|
name
|
|
slug
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</page-query>
|
|
|
|
<static-query>
|
|
query Admin {
|
|
metadata {
|
|
siteName
|
|
siteDescription
|
|
siteUrl
|
|
ghost {
|
|
title
|
|
url
|
|
logo
|
|
description
|
|
navigation {
|
|
url
|
|
label
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</static-query>
|