112 lines
2.3 KiB
Vue
112 lines
2.3 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>
|
|
</div>
|
|
</main>
|
|
</Layout>
|
|
</template>
|
|
|
|
<script>
|
|
import Navbar from '../components/Navbar'
|
|
import Card from '../components/Card';
|
|
|
|
export default {
|
|
metaInfo: {
|
|
bodyAttrs: {
|
|
class: 'home-template'
|
|
}
|
|
},
|
|
components: {
|
|
Navbar, Card
|
|
},
|
|
computed: {
|
|
HeroBgImage(metadata) {
|
|
if (metadata.cover_image) {
|
|
return {
|
|
backgroundImage: 'url(' + $static.metadata.cover_image + ')'
|
|
}
|
|
}
|
|
},
|
|
HeroBgClass() {
|
|
return 'site-header outer no-cover'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<page-query>
|
|
{
|
|
posts: allGhostPost(
|
|
sortBy: "published_at",
|
|
order: DESC,
|
|
) {
|
|
edges {
|
|
node {
|
|
title
|
|
description: excerpt
|
|
date: published_at (format: "D. MMMM YYYY")
|
|
path
|
|
slug
|
|
id
|
|
coverImage: feature_image
|
|
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>
|