Skip to content

Commit 48f0bcb

Browse files
zyao89zyao89
committed
feat: 增加优化 blog 首页 UI 逻辑
1 parent 7bbefe6 commit 48f0bcb

8 files changed

+651
-73
lines changed

‎theme/components/AboutMe.vue

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<PostCardBlocks :title="title" :subtitle="subtitle">
3+
<template slot="body">
4+
<div :class="$style.root">
5+
<div :class="$style.warpper">
6+
<PersonalInfo simple></PersonalInfo>
7+
</div>
8+
</div>
9+
</template>
10+
</PostCardBlocks>
11+
</template>
12+
13+
<script>
14+
import PostCardBlocks from '@theme/components/PostCardBlocks.vue';
15+
import PersonalInfo from '@theme/components/PersonalInfo.vue';
16+
export default {
17+
name: 'AboutMe',
18+
components: {
19+
PostCardBlocks, PersonalInfo,
20+
},
21+
props: {
22+
title: {
23+
type: Array,
24+
default() { return []; },
25+
},
26+
subtitle: {
27+
type: Array,
28+
default() { return []; },
29+
},
30+
},
31+
32+
};
33+
</script>
34+
35+
<style lang="stylus" module>
36+
.root {
37+
position: relative;
38+
box-sizing: border-box;
39+
box-shadow: $boxShadow;
40+
border-radius: $borderRadius;
41+
transition: all 0.3s;
42+
margin: 1rem;
43+
44+
&:hover {
45+
box-shadow: $boxShadowHover;
46+
transform: translateY(-0.2rem);
47+
}
48+
}
49+
50+
.warpper {
51+
padding: 0.6rem;
52+
}
53+
</style>

‎theme/components/BlogPosts.vue

+7-59
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,11 @@
88

99
<template v-else>
1010
<TransitionFadeSlide direction="x" group>
11-
<div v-for="(post, index) in currentPosts" :key="post.key" :class="$style.post">
12-
<h2 :key="`title-${index}`" :class="$style.title">
13-
<NavLink :item="post.path">{{ post.title }}</NavLink>
14-
<Badge
15-
v-if="post.frontmatter.type"
16-
style="margin-left: 5px;"
17-
:text="post.frontmatter.type"
18-
type="yellow"
19-
></Badge>
20-
</h2>
21-
<article :key="`summary-${index}`" :class="$style.summary">
22-
<template v-if="post.frontmatter.summary">
23-
<span>{{ post.frontmatter.summary || '' }}</span>
24-
</template>
25-
<!-- $page.excerpt -->
26-
<template v-else-if="post.excerpt">
27-
<div class="abstract" v-html="post.excerpt"></div>
28-
</template>
29-
<!-- <Content :post-key="post.key" slot-key="summary" /> -->
30-
</article>
31-
<PageInfo :key="`info-${index}`" :class="$style.info" :info="post" hideTitle />
32-
</div>
11+
<PostInfo
12+
v-for="(post, index) in currentPosts"
13+
:key="`${post.key}_${index}`"
14+
:post="post"
15+
></PostInfo>
3316
</TransitionFadeSlide>
3417
</template>
3518

@@ -48,15 +31,13 @@
4831
</template>
4932

5033
<script>
51-
import NavLink from '@theme/components/NavLink.vue';
52-
import PageInfo from '@theme/components/PageInfo.vue';
34+
import PostInfo from '@theme/components/PostInfo.vue';
5335
import Pagination from '@theme/components/Pagination.vue';
5436
import TransitionFadeSlide from '@theme/components/TransitionFadeSlide.vue';
5537
export default {
5638
name: 'BlogPosts',
5739
components: {
58-
NavLink,
59-
PageInfo,
40+
PostInfo,
6041
Pagination,
6142
TransitionFadeSlide,
6243
},
@@ -123,39 +104,6 @@ export default {
123104
.posts {
124105
position: relative;
125106
126-
.post {
127-
position: relative;
128-
padding: 10px 20px;
129-
margin: 20px 0;
130-
box-shadow: $boxShadow;
131-
transition: all 0.3s;
132-
border-radius: $borderRadius;
133-
134-
&:hover {
135-
box-shadow: $boxShadowHover;
136-
}
137-
138-
&:first-child {
139-
margin-top: 0;
140-
}
141-
142-
.title {
143-
position: relative;
144-
font-size: 1.28rem;
145-
line-height: 36px;
146-
}
147-
148-
.summary {
149-
word-break: break-all;
150-
opacity: 0.85;
151-
}
152-
153-
.info {
154-
padding: 0;
155-
margin: 20px 0;
156-
}
157-
}
158-
159107
.pagation {
160108
position: relative;
161109
text-align: center;

‎theme/components/CategoriesCardBlocks.vue

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<template>
2+
<!-- 相关内容 -->
3+
<PostCardBlocks :title="title" :subtitle="subtitle" :posts="posts" :max="max">
4+
<template slot-scope="{ item }">
5+
<div :class="$style.cardItem">
6+
<div :class="$style.warpper">
7+
<div :class="$style.process" :style="customStyle(item)"></div>
8+
</div>
9+
<div :class="$style.cardWarpper">
10+
<h2 :class="$style.title">
11+
<NavLink :item="item.path" line>{{ item.title }}</NavLink>
12+
</h2>
13+
<div :class="$style.right">{{ item.size }} / {{ allCount }}</div>
14+
</div>
15+
</div>
16+
</template>
17+
</PostCardBlocks>
18+
</template>
19+
20+
<script>
21+
import NavLink from '@theme/components/NavLink.vue';
22+
import PostCardBlocks from '@theme/components/PostCardBlocks.vue';
23+
export default {
24+
name: 'CategoriesCardBlocks',
25+
components: {
26+
NavLink,
27+
PostCardBlocks,
28+
},
29+
props: {
30+
title: {
31+
type: Array,
32+
default() { return []; },
33+
},
34+
subtitle: {
35+
type: Array,
36+
default() { return []; },
37+
},
38+
posts: Array,
39+
max: {
40+
type: Number,
41+
default: 12,
42+
},
43+
},
44+
computed: {
45+
allCount() {
46+
if (!this.$posts) return 0;
47+
return this.$posts.length;
48+
},
49+
},
50+
methods: {
51+
customStyle(item) {
52+
return { width: (item.size / this.allCount * 100) + '%' };
53+
},
54+
},
55+
};
56+
</script>
57+
58+
<style lang="stylus" module>
59+
.cardItem {
60+
position: relative;
61+
box-sizing: border-box;
62+
box-shadow: $boxShadow;
63+
overflow: hidden;
64+
height: 54px;
65+
font-size: 1.2rem;
66+
border-radius: $borderRadius;
67+
}
68+
69+
.cardWarpper {
70+
padding: 10px 20px;
71+
72+
.title {
73+
position: relative;
74+
font-size: 1.28rem;
75+
line-height: 36px;
76+
border: none;
77+
display: inline-block;
78+
max-width: 100%;
79+
margin: auto;
80+
}
81+
82+
.right {
83+
position: absolute;
84+
right: 20px;
85+
top: 10px;
86+
color: $backgroundColor;
87+
font-weight: bold;
88+
}
89+
}
90+
91+
.warpper {
92+
box-sizing: border-box;
93+
height: 100%;
94+
width: 100%;
95+
position: absolute;
96+
top: 0;
97+
right: 0;
98+
99+
.process {
100+
height: 100%;
101+
background: $accentColor;
102+
border: none;
103+
float: right;
104+
position: relative;
105+
min-width: 15%;
106+
max-width: 60%;
107+
108+
&:before {
109+
content: '';
110+
transform: translateX(-100%) rotate(45deg);
111+
background: $accentColor;
112+
height: 300%;
113+
left: 15px;
114+
top: -50%;
115+
position: absolute;
116+
width: 60px;
117+
}
118+
}
119+
}
120+
</style>

‎theme/components/HomeBlog.vue

+36-2
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,56 @@
11
<template>
22
<Home>
3-
<BlogWrapper v-if="data.hiddenPosts !== true" />
3+
<BlogWrapper v-if="data.showPosts === true" />
4+
<template v-else>
5+
<div>
6+
<!-- 最新文章 -->
7+
<PostCardBlocks :title="['最新', '博文']" :subtitle="['LATEST', 'POST']" />
8+
</div>
9+
<div v-if="$categories && $categories.list && $categories.list.length">
10+
<!-- 热门分类 -->
11+
<CategoriesCardBlocks
12+
:title="['热门', '分类']"
13+
:subtitle="['POPULAR', 'CATEGORIES']"
14+
:posts="hotCategories"
15+
/>
16+
</div>
17+
<div>
18+
<!-- 关于我 -->
19+
<AboutMe :title="['关于', '我']" :subtitle="['ABOUT', 'ME']" />
20+
</div>
21+
</template>
422
</Home>
523
</template>
624

725
<script>
826
import Home from '@theme/components/Home.vue';
927
import Header from '@theme/components/Header.vue';
1028
import BlogWrapper from '@theme/components/BlogWrapper.vue';
29+
import PostCardBlocks from '@theme/components/PostCardBlocks.vue';
30+
import CategoriesCardBlocks from '@theme/components/CategoriesCardBlocks.vue';
31+
import AboutMe from '@theme/components/AboutMe.vue';
1132
export default {
1233
name: 'HomeBlog',
1334
components: {
14-
Home, Header, BlogWrapper,
35+
Home, Header, BlogWrapper, PostCardBlocks, CategoriesCardBlocks, AboutMe,
1536
},
1637
computed: {
1738
data() {
1839
return this.$page.frontmatter;
1940
},
41+
hotCategories() {
42+
return this.$categories.list.map(item => {
43+
const obj = Object.assign({}, item);
44+
obj.title = item.name;
45+
obj.size = item.pages ? item.pages.length : 0;
46+
obj.frontmatter = {
47+
48+
};
49+
return obj;
50+
}).sort((a, b) => {
51+
return b.size - a.size;
52+
});
53+
},
2054
},
2155
};
2256
</script>

0 commit comments

Comments
 (0)