Skip to content

Commit 5b8edac

Browse files
author
Asina7
committed
dynamic routing blog
1 parent d2cfcac commit 5b8edac

File tree

5 files changed

+39
-176
lines changed

5 files changed

+39
-176
lines changed

‎src/components/Blog/BlogDetails.vue

Lines changed: 4 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -9,166 +9,26 @@
99
<div class="row">
1010
<div class="col-xxl-8 col-xl-10 offset-xxl-2 offset-xl-1">
1111
<div class="blog__detail-top">
12-
<h2 class="blog__detail-date animation__word_come">Design, Marketing <span>25 Jan 2019</span></h2>
12+
<h2 class="blog__detail-date animation__word_come">Marketing <span>25 Jan 2019</span></h2>
1313
<h3 class="blog__detail-title animation__word_come">Donate your design for newest designers to try
1414
better
1515
</h3>
16-
<div class="blog__detail-metalist">
17-
<div class="blog__detail-meta">
18-
<img src="@/assets/imgs/blog/detail/author.png" alt="Author Picture">
19-
<p>Writen by <span>Codexpand</span></p>
20-
</div>
21-
<div class="blog__detail-meta">
22-
<p>Viewed <span>3 min read</span></p>
23-
</div>
24-
</div>
16+
2517
</div>
2618
</div>
2719
<div class="col-xxl-12">
2820
<div class="blog__detail-thumb">
2921
<img src="@/assets/imgs/blog/detail/1.jpg" alt="Blog Thumbnail" data-speed="0.5">
3022
</div>
3123
</div>
32-
<div class="col-xxl-8 col-xl-10 offset-xxl-2 offset-xl-1">
33-
<div class="blog__detail-content">
34-
<p>We love to bring designs to life as a developer, and I aim to do this using whatever front end
35-
tools are necessary. My preferred tools are more modern javascript libraries like React.js but I
36-
like to use whatever is best for the websites needs. There are several reasons why a business would
37-
consider a rebrand and it doesn’t necessarily mean the business has been unsuccessful. </p>
38-
<p>But in order that you may see whence all this born error of those who accuse pleasure and praise
39-
pain, I will open the whole matter, and explain the very things which were said by that discoverer
40-
of truth and, as it were, the architect of a happy life.</p>
41-
<img src="@/assets/imgs/blog/detail/2.jpg" alt="Blog Image">
42-
<h2>JavaScript</h2>
43-
<p>We love to bring designs to life as a developer, and I aim to do this using whatever front end
44-
tools are necessary. My preferred tools are more modern javascript libraries like React.js but I
45-
like to use whatever is best for the websites needs. There are several reasons why a business would
46-
consider a rebrand and it doesn’t necessarily mean the business has been unsuccessful.</p>
47-
<h2>Fremework</h2>
48-
<p>Always ready to push the boundaries, especially when it comes to our own platform, Our analytical
49-
eye to create a site that was visually engaging and also optimised for maximum performance. It also
50-
perfectly reflects the journey to help it tell a story to increase its understanding and drive
51-
action. To create a site that was visually engaging for maximum performance.</p>
52-
<ul>
53-
<li>Brand Development</li>
54-
<li>UX/UI Design</li>
55-
<li>Front-end Development</li>
56-
<li>Copywriting</li>
57-
<li>Shopify Development</li>
58-
</ul>
59-
<h2>Visual Studio</h2>
60-
<p>Just like other pseudo-elements and pseudo-class selectors, :not() can be chained with other
61-
pseudo-classes and pseudo-elements. For example, the following will add a “New!” word to list items
62-
that do not have a .old class name, using the ::after pseudo-element:</p>
63-
<img src="@/assets/imgs/blog/detail/3.jpg" alt="Code">
64-
</div>
65-
<div class="blog__detail-tags">
66-
<p class="sub-title-anim">tags: <a href="tag.html">design</a>, <a href="tag.html">figma</a>,
67-
<a href="tag.html">update</a>
68-
</p>
69-
</div>
70-
</div>
24+
7125
</div>
7226
</div>
7327
</section>
7428
<!-- Blog detail end -->
7529

7630

77-
<!-- Related blog start -->
78-
<section class="blog__related blog__animation">
79-
<div class="container g-0 line pt-130 pb-140">
80-
<span class="line-3"></span>
81-
<div class="row">
82-
<div class="col-xxl-12">
83-
<div class="sec-title-wrapper">
84-
<h2 class="sec-title title-anim">Related Aricles</h2>
85-
</div>
86-
</div>
87-
</div>
88-
89-
<div class="row reset-grid">
90-
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4">
91-
<article class="blog__item">
92-
<div class="blog__img-wrapper">
93-
<a href="blog-details.html">
94-
<div class="img-box">
95-
<img class="image-box__item" src="@/assets/imgs/blog/1.jpg" alt="Blog Thumbnail">
96-
<img class="image-box__item" src="@/assets/imgs/blog/1.jpg" alt="BLog Thumbnail">
97-
</div>
98-
</a>
99-
</div>
100-
<h4 class="blog__meta sub-title-anim"><a href="category.html">UI Design</a> . 02 May 2019</h4>
101-
<h5><a href="blog-details.html" class="blog__title sub-title-anim">Ways of lying to yourself about
102-
your new
103-
relationship.</a></h5>
104-
<a href="blog-details.html" class="blog__btn">Read More <span><i
105-
class="fa-solid fa-arrow-right"></i></span></a>
106-
</article>
107-
</div>
108-
109-
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4">
110-
<article class="blog__item" data-speed="auto">
111-
<div class="blog__img-wrapper">
112-
<a href="blog-details.html">
113-
<div class="img-box">
114-
<img class="image-box__item" src="@/assets/imgs/blog/2.jpg" alt="Blog Thumbnail">
115-
<img class="image-box__item" src="@/assets/imgs/blog/2.jpg" alt="BLog Thumbnail">
116-
</div>
117-
</a>
118-
</div>
119-
<h4 class="blog__meta sub-title-anim"><a href="category.html">UI Design</a> . 02 May 2019</h4>
120-
<h5><a href="blog-details.html" class="blog__title sub-title-anim">How to manage a talented and
121-
successful de sign
122-
team</a></h5>
123-
<a href="blog-details.html" class="blog__btn">Read More <span><i
124-
class="fa-solid fa-arrow-right"></i></span></a>
125-
</article>
126-
</div>
127-
128-
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4">
129-
<article class="blog__item" data-speed="auto">
130-
<div class="blog__img-wrapper">
131-
<a href="blog-details.html">
132-
<div class="img-box">
133-
<img class="image-box__item" src="@/assets/imgs/blog/3.jpg" alt="Blog Thumbnail">
134-
<img class="image-box__item" src="@/assets/imgs/blog/3.jpg" alt="BLog Thumbnail">
135-
</div>
136-
</a>
137-
</div>
138-
<h4 class="blog__meta sub-title-anim"><a href="category.html">UI Design</a> . 02 May 2019</h4>
139-
<h5><a href="blog-details.html" class="blog__title sub-title-anim">How to bring fold to your startup
140-
company with
141-
Axtra</a></h5>
142-
<a href="blog-details.html" class="blog__btn">Read More <span><i
143-
class="fa-solid fa-arrow-right"></i></span></a>
144-
</article>
145-
</div>
146-
</div>
147-
</div>
148-
</section>
149-
<!-- Related blog end -->
150-
151-
152-
<!-- CTA area start -->
153-
<section class="cta__area">
154-
<div class="container line pb-110">
155-
<div class="line-3"></div>
156-
<div class="row">
157-
<div class="col-xxl-12">
158-
<div class="cta__content">
159-
<p class="cta__sub-title">Work with us</p>
160-
<h2 class="cta__title title-anim">We would love to hear more about your project</h2>
161-
<div id="btn_wrapper">
162-
<a href="contact.html" class="wc-btn-primary btn-item btn-hover"><span></span>Let’s talk us <i
163-
class="fa-solid fa-arrow-right"></i></a>
164-
</div>
165-
</div>
166-
</div>
167-
</div>
168-
</div>
169-
</section>
170-
<!-- CTA area end -->
17131

17232
</main>
17333
</div>
174-
</template>
34+
</template>

‎src/components/Blog/MainSection.vue

Lines changed: 12 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</div>
2020

2121
<div class="row reset-grid">
22-
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4" v-for="commentIndex in commentsToShow" v-bind:key="commentIndex.id">
22+
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4" v-for="(blog, index) in blogData.slice(0, commentsToShow)" v-bind:key="index">
2323
<article class="blog__item" >
2424
<div class="blog__img-wrapper" >
2525
<a href="blog-details.html">
@@ -29,24 +29,17 @@
2929
</div>
3030
</a>
3131
</div>
32-
<h4 class="blog__meta"><a href="category.html">UI Design</a>{{blogData[commentIndex].date}}</h4>
33-
<h5><a href="" class="blog__title">{{blogData[commentIndex].title}}</a></h5>
34-
<a href="/blogdetail" class="blog__btn">Read More<span><i
35-
class="fa-solid fa-arrow-right"></i></span></a>
36-
<!-- <a>
37-
<router-link v-bind:to="{name: blogData.component}" class="blog__btn">Read More<span><i class="fa-solid fa-arrow-right"></i></span></router-link>
38-
</a>
39-
-->
40-
41-
42-
32+
<h4 class="blog__meta"><a href="category.html">UI Design</a>{{blog.date}}</h4>
33+
<h5><a href="" class="blog__title">{{blog.title}}</a></h5>
34+
<router-link :to="'/post' + index" class="blog__btn">Read More<span><i class="fa-solid fa-arrow-right"></i></span></router-link>
4335
</article>
4436
</div>
4537

4638
</div>
4739
<div class="m-auto">
48-
<button class="btn btn-primary" @click="commentsToShow += 3">Show More</button>
40+
<button class="btn btn-primary" v-if="showMoreButton" @click="commentsToShow += 3">Show More</button>
4941
</div>
42+
5043

5144

5245
</div>
@@ -79,60 +72,46 @@ import FloatingWhatsapp from '../Home/FloatingWhatsapp.vue';
7972
},
8073
data(){
8174
return{
75+
8276
blogData :
8377
[
8478
{
85-
id:"1",
8679
date:". 02 May 2019",
8780
title:"How to bring fold to your startup company with Axtra",
88-
// component:'ServiceSection'
8981
},
9082
{
91-
id:"2",
9283
date:". 02 May 2019",
9384
title:"How to manage a talented and successful de sign team",
94-
// component:'ServiceSection'
9585
},
9686
{
97-
id:"3",
9887
date:". 02 May 2019",
9988
title:"How to bring fold to your startup company with Axtra",
100-
// component:ServiceSection
10189
},
10290
{
103-
id:"4",
10491
date:". 02 May 2019",
10592
title:"How to bring fold to your startup company with Axtra",
106-
// component:ServiceSection
10793
},
10894
{
109-
id:"5",
11095
date:". 02 May 2019",
11196
title:"How to bring fold to your startup company with Axtra",
112-
// component:ServiceSection
11397
},
11498
{
115-
id:"6",
11699
date:". 02 May 2019",
117100
title:"How to bring fold to your startup company with Axtra",
118101
},
119102
{
120-
id:"7",
121103
date:". 02 May 2019",
122104
title:"How to bring fold to your startup company with Axtra",
123105
},
124106
{
125-
id:"8",
126107
date:". 02 May 2019",
127108
title:"How to bring fold to your startup company with Axtra",
128109
},
129110
{
130-
id:"9",
131111
date:". 02 May 2019",
132112
title:"How to bring fold to your startup company with Axtra",
133113
},
134114
{
135-
id:"10",
136115
date:". 02 May 2019",
137116
title:"How to bring fold to your startup company with Axtra",
138117
},
@@ -141,6 +120,11 @@ import FloatingWhatsapp from '../Home/FloatingWhatsapp.vue';
141120
commentsToShow: 3
142121
}
143122
},
123+
computed: {
124+
showMoreButton() {
125+
return this.commentsToShow < this.blogData.length;
126+
}
127+
},
144128
145129
methods:{
146130
offcanvascontact(){

‎src/components/Home/MainSection/FeedbackSection.vue

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@
3535

3636
</div>
3737
</div>
38-
<h6 class="all-reviews">see all reviews</h6>
38+
<div class="hero-item-btn">
39+
<button class=" hero-btn1">See All Reviews</button>
40+
</div>
3941
</section>
4042
</div>
4143
</template>
@@ -175,4 +177,21 @@
175177
transition: all ease 0.3s;
176178
}
177179
180+
.hero-item-btn .hero-btn1{
181+
border: 1px solid black;
182+
border-radius: 20px;
183+
width: 150px;
184+
padding: 5px;
185+
text-align: center;
186+
cursor: pointer;
187+
margin-top: 20px;
188+
cursor: pointer;
189+
margin-bottom: 20px;
190+
191+
}
192+
.hero-item-btn .hero-btn1:hover{
193+
color: white;
194+
background: black;
195+
}
196+
178197
</style>

‎src/components/Home/MainSection/GoogleReview.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<div class="col-xxl-7 col-xl-7 col-lg-7 col-md-7 m-auto">
3+
<div class="col-xxl-7 col-xl-7 col-lg-7 col-md-7">
44
<div class="counter__img-3">
55
<img src="@/assets/imgs/review/google-reviews.png" alt="google Image">
66
</div>
@@ -9,7 +9,7 @@
99
</template>
1010
<style scoped>
1111
.counter__img-3 img{
12-
width:35%;
12+
width:18%;
1313
}
1414
1515
</style>

‎src/router/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const routes = [
2828
component: () => import("../views/BlogPage.vue"),
2929
},
3030
{
31-
path: "/blogdetail",
31+
path: "/post1",
3232
name: "BlogDetail",
3333
component: () => import("../views/BlogDetail"),
3434
},

0 commit comments

Comments
 (0)