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

feat: separate ListBlog template

Browse Source
This commit is contained in:
kmacoders 2021-06-30 23:51:21 +07:00
parent 5fd7175364
commit e843aa1d7f
3 changed files with 140 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/organisms/FeaturedBlog.vue
View File

@ -1,18 +1,28 @@
<template> <template>
<article class="columns featured"> <div class="columns featured-post is-multiline">
<div class="column is-7 post-img "> <div class="column is-12 post">
<img src="https://cdn.emk.dev/templates/featured-image.png" alt=""> <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>
</div> </div>
<div class="column is-5 featured-content va"> </div>
<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> </template>
<script> <script>

112
components/organisms/ListBlog.vue
View File

@ -0,0 +1,112 @@
<template>
<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>
</template>
<script>
import { Vue, Component } from 'nuxt-property-decorator'
@Component
export default class ListBlog extends Vue {
}
</script>

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

@ -3,84 +3,9 @@
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column is-10 is-offset-1"> <div class="column is-10 is-offset-1">
<div class="columns featured-post is-multiline"> <FeaturedBlog />
<div class="column is-12 post">
<FeaturedBlog />
</div>
</div>
<hr> <hr>
<div class="columns is-multiline"> <ListBlog />
<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> </div>
</div> </div>
@ -90,10 +15,12 @@
<script> <script>
import { Vue, Component } from 'nuxt-property-decorator' import { Vue, Component } from 'nuxt-property-decorator'
import FeaturedBlog from '@/components/organisms/FeaturedBlog' import FeaturedBlog from '@/components/organisms/FeaturedBlog'
import ListBlog from '@/components/organisms/ListBlog.vue'
@Component({ @Component({
components: { components: {
FeaturedBlog FeaturedBlog,
ListBlog
} }
}) })
export default class PageBlog extends Vue { export default class PageBlog extends Vue {