Skip to content

Commit 8078a80

Browse files
author
Asina7
committed
Dynamic routing BlogDetail
1 parent 393f125 commit 8078a80

File tree

3 files changed

+80
-50
lines changed

3 files changed

+80
-50
lines changed

‎src/components/Blog/BlogDetails.vue

Lines changed: 65 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -9,66 +9,33 @@
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>
13-
<h3 class="blog__detail-title animation__word_come">Donate your design for newest designers to try
12+
<h2 class="blog__detail-date animation__word_come">{{blog.category}} <span>{{ blog.date }}</span></h2>
13+
<h3 class="blog__detail-title animation__word_come">{{blog.title}}
1414
better
1515
</h3>
1616
<div class="blog__detail-metalist">
1717
<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>
18+
<img :src="blog.writer_pic" alt="Author Picture" class="bn">
19+
<p>Writen by <span>{{blog.author}}</span></p>
2020
</div>
2121
<div class="blog__detail-meta">
22-
<p>Viewed <span>3 min read</span></p>
22+
<p>Viewed <span>{{ blog.viewed }}</span></p>
2323
</div>
2424
</div>
2525
</div>
2626
</div>
2727
<div class="col-xxl-12">
2828
<div class="blog__detail-thumb" style="overflow: hidden;">
29-
<img ref="parallaxImage" src="@/assets/imgs/blog/detail/1.jpg" alt="Blog Thumbnail" style="position: absolute;">
29+
<img ref="parallaxImage" :src="blog.image" alt="Blog Thumbnail" style="position: absolute;">
3030
</div>
3131
<!-- <div class="blog__detail-thumb">
3232
<img src="@/assets/imgs/blog/detail/1.jpg" alt="Blog Thumbnail" data-speed="0.5">
3333
</div> -->
3434
</div>
3535
<div class="col-xxl-8 col-xl-10 offset-xxl-2 offset-xl-1">
3636
<div class="blog__detail-content">
37-
<p>We love to bring designs to life as a developer, and I aim to do this using whatever front end
38-
tools are necessary. My preferred tools are more modern javascript libraries like React.js but I
39-
like to use whatever is best for the websites needs. There are several reasons why a business would
40-
consider a rebrand and it doesn’t necessarily mean the business has been unsuccessful. </p>
41-
<p>But in order that you may see whence all this born error of those who accuse pleasure and praise
42-
pain, I will open the whole matter, and explain the very things which were said by that discoverer
43-
of truth and, as it were, the architect of a happy life.</p>
44-
<img src="@/assets/imgs/blog/detail/2.jpg" alt="Blog Image">
45-
<h2>JavaScript</h2>
46-
<p>We love to bring designs to life as a developer, and I aim to do this using whatever front end
47-
tools are necessary. My preferred tools are more modern javascript libraries like React.js but I
48-
like to use whatever is best for the websites needs. There are several reasons why a business would
49-
consider a rebrand and it doesn’t necessarily mean the business has been unsuccessful.</p>
50-
<h2>Fremework</h2>
51-
<p>Always ready to push the boundaries, especially when it comes to our own platform, Our analytical
52-
eye to create a site that was visually engaging and also optimised for maximum performance. It also
53-
perfectly reflects the journey to help it tell a story to increase its understanding and drive
54-
action. To create a site that was visually engaging for maximum performance.</p>
55-
<ul>
56-
<li>Brand Development</li>
57-
<li>UX/UI Design</li>
58-
<li>Front-end Development</li>
59-
<li>Copywriting</li>
60-
<li>Shopify Development</li>
61-
</ul>
62-
<h2>Visual Studio</h2>
63-
<p>Just like other pseudo-elements and pseudo-class selectors, :not() can be chained with other
64-
pseudo-classes and pseudo-elements. For example, the following will add a “New!” word to list items
65-
that do not have a .old class name, using the ::after pseudo-element:</p>
66-
<img src="@/assets/imgs/blog/detail/2.jpg" alt="Code">
67-
</div>
68-
<div class="blog__detail-tags">
69-
<p class="sub-title-anim">tags: <a href="tag.html">design</a>, <a href="tag.html">figma</a>,
70-
<a href="tag.html">update</a>
71-
</p>
37+
<p>{{ blog.desc }}</p>
38+
7239
</div>
7340
</div>
7441
</div>
@@ -145,28 +112,56 @@
145112
export default {
146113
data(){
147114
return{
148-
115+
blog:{},
149116
blogData :
150117
[
151118
{
119+
id:1,
152120
date:". 02 May 2019",
153-
title:"How to bring fold to your startup company with Axtra",
121+
category:"UI Design",
122+
image:"https://www.specbee.com/sites/default/files/inline-images/ui-ux-difference.jpg",
123+
author:"Writer Name",
124+
writer_pic:"https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80",
125+
viewed:"3 Min Read",
126+
title:"How to bring fold to your startup company with Axtra 1",
127+
desc:"We love to bring designs to life as a developer, and I aim to do this using whatever front end tools are necessary. My preferred tools are more modern javascript libraries like React.js but I like to use whatever is best for the websites needs. There are several reasons why a business would consider a rebrand and it doesn’t necessarily mean the business has been unsuccessful.But in order that you may see whence all this born error of those who accuse pleasure and praise pain, I will open the whole matter, and explain the very things which were said by that discoverer of truth and, as it were, the architect of a happy life"
154128
},
155-
{
129+
{
130+
id:2,
156131
date:". 02 May 2019",
157-
title:"How to manage a talented and successful de sign team",
132+
category:"Web developement",
133+
image:"https://www.specbee.com/sites/default/files/inline-images/ui-ux-difference.jpg",
134+
author:"Writer Name 2",
135+
writer_pic:"https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80",
136+
viewed:"3 Min Read",
137+
title:"How to bring fold to your startup company with Axtra 2",
138+
desc:"We love to bring designs to life as a developer, and I aim to do this using whatever front end tools are necessary. My preferred tools are more modern javascript libraries like React.js but I like to use whatever is best for the websites needs. There are several reasons why a business would consider a rebrand and it doesn’t necessarily mean the business has been unsuccessful.But in order that you may see whence all this born error of those who accuse pleasure and praise pain, I will open the whole matter, and explain the very things which were said by that discoverer of truth and, as it were, the architect of a happy life"
158139
},
159-
{
140+
{
141+
id:3,
160142
date:". 02 May 2019",
161-
title:"How to bring fold to your startup company with Axtra",
162-
},
143+
category:"Marketing",
144+
image:"https://www.specbee.com/sites/default/files/inline-images/ui-ux-difference.jpg",
145+
author:"Writer Name 2",
146+
writer_pic:"https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80",
147+
viewed:"3 Min Read",
148+
title:"How to bring fold to your startup company with Axtra 3",
149+
desc:"We love to bring designs to life as a developer, and I aim to do this using whatever front end tools are necessary. My preferred tools are more modern javascript libraries like React.js but I like to use whatever is best for the websites needs. There are several reasons why a business would consider a rebrand and it doesn’t necessarily mean the business has been unsuccessful.But in order that you may see whence all this born error of those who accuse pleasure and praise pain, I will open the whole matter, and explain the very things which were said by that discoverer of truth and, as it were, the architect of a happy life"
150+
},
151+
163152
],
164153
commentsToShow: 3
165154
}
166155
},
167156
168157
// parallex
169158
mounted() {
159+
let id =this.$route.params.id;
160+
let current = this.blogData.find(item=>item.id == id);
161+
this.blog = current;
162+
163+
console.log(current)
164+
170165
window.addEventListener('scroll', this.handleScroll);
171166
},
172167
methods: {
@@ -189,6 +184,28 @@ export default {
189184
.blog__detail-thumb img {
190185
height: 150% !important;;
191186
}
187+
188+
/* word animation */
189+
.animation__word_come {
190+
animation: slide-in-middle 1s ease-out both;
191+
}
192+
193+
@keyframes slide-in-middle {
194+
0% {
195+
transform: translateY(-50%);
196+
opacity: 0;
197+
}
198+
100% {
199+
transform: translateY(0);
200+
opacity: 1;
201+
}
202+
}
203+
.bn{
204+
width: 60px;
205+
height: 60px;
206+
object-fit: cover;
207+
border-radius: 50%;
208+
}
192209
</style>
193210

194211

‎src/components/Blog/MainSection.vue

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
<h4 class="blog__meta"><a href="">UI Design</a>{{blog.date}}</h4>
3232
<h5><a href="" class="blog__title-3">{{blog.title}}
3333
Axtra</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>
34+
<router-link :to="'/blogdetail/' +blog.id" class="blog__btn">Read More<span><i class="fa-solid fa-arrow-right"></i></span></router-link>
3535
</div>
3636
</article>
3737
</div>
@@ -93,42 +93,52 @@ import FloatingWhatsapp from '../Home/FloatingWhatsapp.vue';
9393
blogData :
9494
[
9595
{
96+
id:1,
9697
date:". 02 May 2019",
9798
title:"How to bring fold to your startup company with Axtra",
9899
},
99100
{
101+
id:2,
100102
date:". 02 May 2019",
101103
title:"How to manage a talented and successful de sign team",
102104
},
103105
{
106+
id:3,
104107
date:". 02 May 2019",
105108
title:"How to bring fold to your startup company with Axtra",
106109
},
107110
{
111+
id:4,
108112
date:". 02 May 2019",
109113
title:"How to bring fold to your startup company with Axtra",
110114
},
111115
{
116+
id:5,
112117
date:". 02 May 2019",
113118
title:"How to bring fold to your startup company with Axtra",
114119
},
115120
{
121+
id:6,
116122
date:". 02 May 2019",
117123
title:"How to bring fold to your startup company with Axtra",
118124
},
119125
{
126+
id:7,
120127
date:". 02 May 2019",
121128
title:"How to bring fold to your startup company with Axtra",
122129
},
123130
{
131+
id:8,
124132
date:". 02 May 2019",
125133
title:"How to bring fold to your startup company with Axtra",
126134
},
127135
{
136+
id:9,
128137
date:". 02 May 2019",
129138
title:"How to bring fold to your startup company with Axtra",
130139
},
131140
{
141+
id:10,
132142
date:". 02 May 2019",
133143
title:"How to bring fold to your startup company with Axtra",
134144
},
@@ -154,6 +164,7 @@ $("#close_offcanvas").click(function () {
154164
$('.offcanvas__area').css('visibility', 'hidden');
155165
});
156166
},
167+
157168
}
158169
159170
}

‎src/router/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,12 @@ const routes = [
2828
component: () => import("../views/BlogPage.vue"),
2929
},
3030
{
31-
path: "/post0",
31+
path: "/blogdetail/:id",
3232
name: "BlogDetail",
3333
component: () => import("../views/BlogDetail"),
3434
},
35+
36+
3537
{
3638
path: "/service",
3739
name: "ServicePage",

0 commit comments

Comments
 (0)