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

feat: add ListBlog component

Browse Source
This commit is contained in:
kmacoders 2021-07-03 00:08:21 +07:00
parent 93180f04cb
commit 2f2c82ba59
2 changed files with 35 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
components/organisms/ListBlog.vue
View File

@ -1,102 +1,36 @@
<template> <template>
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column post is-6"> <div
v-for="(blog, index) in listBlogs"
:key="index"
:class="'column post' + isFour(index + 1)"
>
<article class="columns is-multiline"> <article class="columns is-multiline">
<div class="column is-12 post-img"> <div class="column is-12 post-img">
<img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image"> <img :src="blog.image" alt="Featured Image">
</div> </div>
<div class="column is-12 featured-content "> <div class="column is-12 featured-content ">
<h3 class="heading post-category"> <h3 class="heading post-category">
Category Name <span
v-for="(tag, i) in blog.tags"
:key="i"
>
{{ tag }}
</span>&nbsp;
</h3> </h3>
<h1 class="title post-title"> <h1 class="title post-title">
Slightly Longer Blog Post Title {{ blog.title }}
</h1> </h1>
<p class="post-excerpt"> <p class="post-excerpt">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ratione harum eaque, animi nulla tempore quis, quam voluptatum. {{ blog.description }}
</p> </p>
<br> <br>
<a href="#" class="button is-primary">Read More</a> <NuxtLink
</div> :to="blog.path"
</article> class="button is-primary"
</div> >
<div class="column post is-6"> Read More
<article class="columns is-multiline"> </NuxtLink>
<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> </div>
</article> </article>
</div> </div>
@ -106,7 +40,20 @@
<script> <script>
import { Vue, Component } from 'nuxt-property-decorator' import { Vue, Component } from 'nuxt-property-decorator'
@Component @Component({
props: {
listBlogs: {
type: Array,
require: true
}
}
})
export default class ListBlog extends Vue { export default class ListBlog extends Vue {
isFour (position) {
if (position <= 2 && this.listBlogs.length > 5) {
return ' is-6'
}
return ' is-4'
}
} }
</script> </script>

2
pages/blog/page/_page.vue
View File

@ -5,7 +5,7 @@
<div class="column is-10 is-offset-1"> <div class="column is-10 is-offset-1">
<FeaturedBlog :first-blog="allArticles[0]" /> <FeaturedBlog :first-blog="allArticles[0]" />
<hr> <hr>
<ListBlog /> <ListBlog :list-blogs="paginatedArticles"/>
</div> </div>
</div> </div>
</div> </div>