kohvip/eHandyTech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: wip add blog page

Browse Source
This commit is contained in:
kmacoders 2021-06-30 23:46:29 +07:00
parent 7eb7e72c55
commit 5fd7175364
8 changed files with 193 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
components/atoms/.gitkeep Normal file
View File

0
components/molecules/.gitkeep Normal file
View File

0
components/organisms/.gitkeep Normal file
View File

24
components/organisms/FeaturedBlog.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<article class="columns featured">
<div class="column is-7 post-img ">
<img src="https://cdn.emk.dev/templates/featured-image.png" alt="">
</div>
<div class="column is-5 featured-content va">
<div>
<h3 class="heading post-category">Category Name</h3>
<h1 class="title post-title">Blog Posts Template</h1>
<p class="post-excerpt">This template is based off of the official default blog template created by the fine folks over at <a href="https://ghost.io">Ghost</a>. If you are looking for a fully featured blog platform, I highly recommend checking them out!</p>
<br>
<a href="#" class="button is-primary">Read More</a>
</div>
</div>
</article>
</template>
<script>
import { Vue, Component } from 'nuxt-property-decorator'
@Component
export default class FeaturedBlog extends Vue {
}
</script>

0
components/organisms/ListBlog.vue Executable file
View File

22
pages/blog/_slug.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<div>
<banner />
<banner />
<banner />
<banner />
<banner />
</div>
</template>
<script>
import { Vue, Component } from 'nuxt-property-decorator'
import Banner from '@/components/templates/home/Banner'
@Component({
components: {
Banner
}
})
export default class Index extends Vue {
}
</script>

7
pages/blog/index.vue Normal file
View File

@ -0,0 +1,7 @@
<script>
export default {
middleware ({ redirect }) {
return redirect('301', '/blog/page/1')
}
}
</script>

140
pages/blog/page/_page.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<section class="blog-posts">
<div class="container">
<div class="columns">
<div class="column is-10 is-offset-1">
<div class="columns featured-post is-multiline">
<div class="column is-12 post">
<FeaturedBlog />
</div>
</div>
<hr>
<div class="columns is-multiline">
<div class="column post is-6">
<article class="columns is-multiline">
<div class="column is-12 post-img">
<img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
</div>
<div class="column is-12 featured-content ">
<h3 class="heading post-category">Category Name</h3>
<h1 class="title post-title">Slightly Longer Blog Post Title</h1>
<p class="post-excerpt">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum.</p>
<br>
<a href="#" class="button is-primary">Read More</a>
</div>
</article>
</div>
<div class="column post is-6">
<article class="columns is-multiline">
<div class="column is-12 post-img">
<img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
</div>
<div class="column is-12 featured-content ">
<h3 class="heading post-category">Category Name</h3>
<h1 class="title post-title">Slightly Longer Blog Post Title</h1>
<p class="post-excerpt">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum.</p>
<br>
<a href="#" class="button is-primary">Read More</a>
</div>
</article>
</div>
<div class="column post is-4">
<article class="columns is-multiline">
<div class="column is-12 post-img">
<img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
</div>
<div class="column is-12 featured-content ">
<h3 class="heading post-category">Category Name</h3>
<h1 class="title post-title">Slightly Longer Blog Post Title</h1>
<p class="post-excerpt">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum.</p>
<br>
<a href="#" class="button is-primary">Read More</a>
</div>
</article>
</div>
<div class="column post is-4">
<article class="columns is-multiline">
<div class="column is-12 post-img">
<img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
</div>
<div class="column is-12 featured-content ">
<h3 class="heading post-category">Category Name</h3>
<h1 class="title post-title">Slightly Longer Blog Post Title</h1>
<p class="post-excerpt">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum.</p>
<br>
<a href="#" class="button is-primary">Read More</a>
</div>
</article>
</div>
<div class="column post is-4">
<article class="columns is-multiline">
<div class="column is-12 post-img">
<img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
</div>
<div class="column is-12 featured-content ">
<h3 class="heading post-category">Category Name</h3>
<h1 class="title post-title">Slightly Longer Blog Post Title</h1>
<p class="post-excerpt">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum.</p>
<br>
<a href="#" class="button is-primary">Read More</a>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import { Vue, Component } from 'nuxt-property-decorator'
import FeaturedBlog from '@/components/organisms/FeaturedBlog'
@Component({
components: {
FeaturedBlog
}
})
export default class PageBlog extends Vue {
}
</script>
<style>
.va {
display: flex;
align-items: center;
}
.blog-posts {
min-height: 100vh;
padding-top: 4rem;
padding-bottom: 10rem;
}
.blog-posts article {
padding: 1.5rem;
}
.blog-posts .post img {
border-radius: 6px;
}
.blog-posts .post .post-category {
color: #3b7adf;
}
.blog-posts .post .post-title {
font-size: 2.2rem;
}
.blog-posts .post .post-excerpt {
line-height: 1.5rem;
letter-spacing: 0.03rem;
font-size: 1.2rem;
font-family: 'IBM Plex Serif', serif;
}
.blog-posts .post .featured .featured-image img {
height: 380px;
}
</style>