feat: separate ListBlog template
This commit is contained in:
kmacoders
parent
5fd7175364
commit
e843aa1d7f
@ -1,18 +1,28 @@
|
||||
<template>
|
||||
<article class="columns featured">
|
||||
<div class="column is-7 post-img ">
|
||||
<img src="https://cdn.emk.dev/templates/featured-image.png" alt="">
|
||||
<div class="columns featured-post is-multiline">
|
||||
<div class="column is-12 post">
|
||||
<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 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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -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>
|
||||
@ -3,84 +3,9 @@
|
||||
<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>
|
||||
<FeaturedBlog />
|
||||
<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>
|
||||
<ListBlog />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -90,10 +15,12 @@
|
||||
<script>
|
||||
import { Vue, Component } from 'nuxt-property-decorator'
|
||||
import FeaturedBlog from '@/components/organisms/FeaturedBlog'
|
||||
import ListBlog from '@/components/organisms/ListBlog.vue'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
FeaturedBlog
|
||||
FeaturedBlog,
|
||||
ListBlog
|
||||
}
|
||||
})
|
||||
export default class PageBlog extends Vue {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user