update:add ci cd files ==> do not edit those file
This commit is contained in:
mahyargdz
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div class="blog-page page">
|
||||
<!---------------------------------- Section 1 ------------------------------------->
|
||||
<section class="s1-Img-BG">
|
||||
<div
|
||||
class="parallax"
|
||||
:style="{
|
||||
background: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(${cover ? cover : defaultCover})`
|
||||
}"
|
||||
>
|
||||
<h1 class="h1 anim-fadeIn" :style="{ color: $route.params.lang === 'fa' && '#fff' }">{{ content.s1.t1 }}</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!---------------------------------- Section 2 ------------------------------------->
|
||||
|
||||
<section class="s2-BG">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<ul>
|
||||
<nuxt-link
|
||||
class="s2-all-cat"
|
||||
tag="li"
|
||||
:to="{ name: 'lang-blog', params: { lang: $route.params.lang }, query: { category: 'all', page: 1 } }"
|
||||
>
|
||||
<a :class="$route.query.category === 'all' ? 'active' : null">{{ content.s2.t1 }}</a>
|
||||
</nuxt-link>
|
||||
|
||||
<nuxt-link
|
||||
class="s2-all-cat"
|
||||
v-for="item in blogCategories"
|
||||
:key="item._id"
|
||||
tag="li"
|
||||
:to="{
|
||||
name: 'lang-blog',
|
||||
params: { lang: $route.params.lang },
|
||||
query: { category: item.locale[$route.params.lang].title, page: 1 }
|
||||
}"
|
||||
>
|
||||
<a :class="$route.query.category === item.locale[$route.params.lang].title ? 'active' : null">{{
|
||||
item.locale[$route.params.lang].title
|
||||
}}</a>
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!---------------------------------- Section 3 ------------------------------------->
|
||||
|
||||
<section class="s3-BG">
|
||||
<div class="parallax section">
|
||||
<div class="container">
|
||||
<div class="row align-items-stretch" v-if="blogPosts.docs.length">
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4 anim-fadeIn" v-for="item in blogPosts.docs" :key="item._id">
|
||||
<div class="s3-item">
|
||||
<img :src="item.thumb" :alt="item.locale[$route.params.lang].title" />
|
||||
<div class="s3-body">
|
||||
<div class="s3-top-desc">
|
||||
<div>
|
||||
<i class="far fa-circle"></i>
|
||||
<span>{{ jDate(item.created_at) }}</span>
|
||||
</div>
|
||||
<!-- <div>-->
|
||||
<!-- <i class="far fa-clone"></i>-->
|
||||
<!-- <span>{{ item.name }}</span>-->
|
||||
<!-- </div>-->
|
||||
<div>
|
||||
<i class="far fa-folder-open"></i>
|
||||
<span>{{ item.category ? item.category.locale[$route.params.lang].title : 'No Category' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="h6">{{ item.locale[$route.params.lang].title }}</h6>
|
||||
<p>{{ item.locale[$route.params.lang].short_description }}</p>
|
||||
<nuxt-link
|
||||
:to="{
|
||||
name: 'lang-blog-post',
|
||||
params: { lang: $route.params.lang, post: item.locale[$route.params.lang].title }
|
||||
}"
|
||||
class="s3-reading"
|
||||
>
|
||||
<p>
|
||||
{{ content.s3.t1 }}
|
||||
<i class="fas" :class="$route.params.lang === 'en' ? 'fa-arrow-right' : 'fa-arrow-left'"></i>
|
||||
</p>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" v-if="!blogPosts.docs.length">
|
||||
<p>there is no post yet</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" v-else>
|
||||
<div class="col-12 s3-notFound">
|
||||
<h6 class="h6 notFound">{{ content.s3.t2 }}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- paginate -->
|
||||
<section class="pagination section">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
v-if="paginate"
|
||||
class="el-pagination"
|
||||
@current-change="pageNumber"
|
||||
:current-page="Number($route.query.page)"
|
||||
:page-count="Number(blogPosts.totalPages)"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
fadeInAnimation,
|
||||
fadeInStaggerAnimation,
|
||||
leftToRightAnimation,
|
||||
leftToRightStaggerAnimation,
|
||||
numberAnimation,
|
||||
progressAnimation
|
||||
} from '~/utils/animations'
|
||||
|
||||
import moment from 'moment-jalaali'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
blogPosts: null,
|
||||
blogCategories: null,
|
||||
defaultCover: '/img/BlogPage/page-title.png'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
paginate() {
|
||||
return this.blogPosts.totalPages > 1
|
||||
},
|
||||
category() {
|
||||
return this.$route.query.category
|
||||
},
|
||||
page() {
|
||||
return this.$route.query.page
|
||||
},
|
||||
content() {
|
||||
return this.$store.state.content.blog[this.$route.params.lang]
|
||||
},
|
||||
cover() {
|
||||
return this.$store.state.global.cover?.blog
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
category(newVal, oldVal) {
|
||||
this.$nuxt.refresh()
|
||||
},
|
||||
page(newVal, oldVal) {
|
||||
this.$nuxt.refresh()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pageNumber(val) {
|
||||
this.$router.push({
|
||||
name: 'lang-blog',
|
||||
params: { lang: this.$route.params.lang },
|
||||
query: { category: this.$route.query.category, page: val }
|
||||
})
|
||||
},
|
||||
jDate(date) {
|
||||
return moment(date).locale('fa').format(' HH:mm - jYYYY/jMM/jDD')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
fadeInAnimation(this.$gsap)
|
||||
leftToRightAnimation(this.$gsap)
|
||||
fadeInStaggerAnimation(this.$gsap)
|
||||
leftToRightStaggerAnimation(this.$gsap)
|
||||
numberAnimation(this.$gsap)
|
||||
progressAnimation(this.$gsap)
|
||||
//--------------------------------------------------------- Section 1
|
||||
this.$gsap
|
||||
.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: '.s2-BG',
|
||||
scrub: true,
|
||||
start: 'top top'
|
||||
}
|
||||
})
|
||||
.to($('.s1-Img-BG > div'), {
|
||||
duration: 9,
|
||||
opacity: 0,
|
||||
y: '10%'
|
||||
})
|
||||
})
|
||||
},
|
||||
async asyncData({ $axios, error, query }) {
|
||||
try {
|
||||
const allData = await Promise.all([
|
||||
// fetch blogCategories [0]
|
||||
$axios.get(`/api/public/blogCategories`),
|
||||
// fetch blogPosts [1]
|
||||
$axios.get(`/api/public/blogPosts?category=${encodeURIComponent(query.category)}&page=${query.page}`)
|
||||
])
|
||||
const blogCategories = allData[0]
|
||||
const blogPosts = allData[1]
|
||||
|
||||
return {
|
||||
blogCategories: blogCategories.data,
|
||||
blogPosts: blogPosts.data
|
||||
}
|
||||
} catch (e) {
|
||||
error({ status: 404, message: 'page not found' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user