88 lines
1.9 KiB
Vue
88 lines
1.9 KiB
Vue
|
<template>
|
||
|
<Layout>
|
||
|
<header :class=HeroBgClass :style=HeroBgImage>
|
||
|
<div class="inner">
|
||
|
<div class="site-header-content">
|
||
|
<h1 class="site-title">
|
||
|
<img v-if="Admin.site.logo != ''" class="site-logo" :src="Admin.site.logo" :alt="Admin.site.title" />
|
||
|
<p v-if="Admin.site.logo === ''">
|
||
|
{{ Admin.site.title }}
|
||
|
</p>
|
||
|
</h1>
|
||
|
<h2 class="site-description">{{ Admin.site.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 } in $page.allPost.edges" :key="node.id" :cardData="node" />
|
||
|
</div>
|
||
|
</div>
|
||
|
</main>
|
||
|
</Layout>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import Admin from '../../data/admin.yml';
|
||
|
import Navbar from '../components/Navbar'
|
||
|
import Card from '../components/Card';
|
||
|
|
||
|
export default {
|
||
|
metaInfo: {
|
||
|
bodyAttrs: {
|
||
|
class: 'home-template'
|
||
|
}
|
||
|
},
|
||
|
components: {
|
||
|
Navbar, Card
|
||
|
},
|
||
|
computed: {
|
||
|
Admin() {
|
||
|
return Admin
|
||
|
},
|
||
|
HeroBgImage() {
|
||
|
if (Admin.site.cover_image) {
|
||
|
return {
|
||
|
backgroundImage: 'url(' + Admin.site.cover_image + ')'
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
HeroBgClass() {
|
||
|
if (Admin.site.cover_image) {
|
||
|
return 'site-header outer'
|
||
|
} else {
|
||
|
return 'site-header outer no-cover'
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<page-query>
|
||
|
query Home ($page: Int) {
|
||
|
allPost (page: $page, order: ASC) {
|
||
|
edges {
|
||
|
node {
|
||
|
id
|
||
|
title
|
||
|
path
|
||
|
tags {
|
||
|
title
|
||
|
}
|
||
|
image
|
||
|
content
|
||
|
author {
|
||
|
id
|
||
|
name
|
||
|
image
|
||
|
}
|
||
|
timeToRead
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</page-query>
|