feat: 增加优化 blog 首页 UI 逻辑

MicroAppJS · Mar 1, 2020 · 48f0bcb · 48f0bcb
1 parent 7bbefe6
commit 48f0bcb
Show file tree

Hide file tree

Showing 8 changed files with 651 additions and 73 deletions.
diff --git a/theme/components/AboutMe.vue b/theme/components/AboutMe.vue
@@ -0,0 +1,53 @@
+<template>
+    <PostCardBlocks :title="title" :subtitle="subtitle">
+        <template slot="body">
+            <div :class="$style.root">
+                <div :class="$style.warpper">
+                    <PersonalInfo simple></PersonalInfo>
+                </div>
+            </div>
+        </template>
+    </PostCardBlocks>
+</template>
+
+<script>
+import PostCardBlocks from '@theme/components/PostCardBlocks.vue';
+import PersonalInfo from '@theme/components/PersonalInfo.vue';
+export default {
+    name: 'AboutMe',
+    components: {
+        PostCardBlocks, PersonalInfo,
+    },
+    props: {
+        title: {
+            type: Array,
+            default() { return []; },
+        },
+        subtitle: {
+            type: Array,
+            default() { return []; },
+        },
+    },
+
+};
+</script>
+
+<style lang="stylus" module>
+.root {
+    position: relative;
+    box-sizing: border-box;
+    box-shadow: $boxShadow;
+    border-radius: $borderRadius;
+    transition: all 0.3s;
+    margin: 1rem;
+
+    &:hover {
+        box-shadow: $boxShadowHover;
+        transform: translateY(-0.2rem);
+    }
+}
+
+.warpper {
+    padding: 0.6rem;
+}
+</style>
diff --git a/theme/components/BlogPosts.vue b/theme/components/BlogPosts.vue
@@ -8,28 +8,11 @@
 
         <template v-else>
             <TransitionFadeSlide direction="x" group>
-                <div v-for="(post, index) in currentPosts" :key="post.key" :class="$style.post">
-                    <h2 :key="`title-${index}`" :class="$style.title">
-                        <NavLink :item="post.path">{{ post.title }}</NavLink>
-                        <Badge
-                            v-if="post.frontmatter.type"
-                            style="margin-left: 5px;"
-                            :text="post.frontmatter.type"
-                            type="yellow"
-                        ></Badge>
-                    </h2>
-                    <article :key="`summary-${index}`" :class="$style.summary">
-                        <template v-if="post.frontmatter.summary">
-                            <span>{{ post.frontmatter.summary || '' }}</span>
-                        </template>
-                        <!-- $page.excerpt -->
-                        <template v-else-if="post.excerpt">
-                            <div class="abstract" v-html="post.excerpt"></div>
-                        </template>
-                        <!-- <Content :post-key="post.key" slot-key="summary" /> -->
-                    </article>
-                    <PageInfo :key="`info-${index}`" :class="$style.info" :info="post" hideTitle />
-                </div>
+                <PostInfo
+                    v-for="(post, index) in currentPosts"
+                    :key="`${post.key}_${index}`"
+                    :post="post"
+                ></PostInfo>
             </TransitionFadeSlide>
         </template>
 
@@ -48,15 +31,13 @@
 </template>
 
 <script>
-import NavLink from '@theme/components/NavLink.vue';
-import PageInfo from '@theme/components/PageInfo.vue';
+import PostInfo from '@theme/components/PostInfo.vue';
 import Pagination from '@theme/components/Pagination.vue';
 import TransitionFadeSlide from '@theme/components/TransitionFadeSlide.vue';
 export default {
     name: 'BlogPosts',
     components: {
-        NavLink,
-        PageInfo,
+        PostInfo,
         Pagination,
         TransitionFadeSlide,
     },
@@ -123,39 +104,6 @@ export default {
 .posts {
     position: relative;
 
-    .post {
-        position: relative;
-        padding: 10px 20px;
-        margin: 20px 0;
-        box-shadow: $boxShadow;
-        transition: all 0.3s;
-        border-radius: $borderRadius;
-
-        &:hover {
-            box-shadow: $boxShadowHover;
-        }
-
-        &:first-child {
-            margin-top: 0;
-        }
-
-        .title {
-            position: relative;
-            font-size: 1.28rem;
-            line-height: 36px;
-        }
-
-        .summary {
-            word-break: break-all;
-            opacity: 0.85;
-        }
-
-        .info {
-            padding: 0;
-            margin: 20px 0;
-        }
-    }
-
     .pagation {
         position: relative;
         text-align: center;

diff --git a/theme/components/CategoriesCardBlocks.vue b/theme/components/CategoriesCardBlocks.vue
@@ -0,0 +1,120 @@
+<template>
+    <!-- 相关内容 -->
+    <PostCardBlocks :title="title" :subtitle="subtitle" :posts="posts" :max="max">
+        <template slot-scope="{ item }">
+            <div :class="$style.cardItem">
+                <div :class="$style.warpper">
+                    <div :class="$style.process" :style="customStyle(item)"></div>
+                </div>
+                <div :class="$style.cardWarpper">
+                    <h2 :class="$style.title">
+                        <NavLink :item="item.path" line>{{ item.title }}</NavLink>
+                    </h2>
+                    <div :class="$style.right">{{ item.size }} / {{ allCount }}</div>
+                </div>
+            </div>
+        </template>
+    </PostCardBlocks>
+</template>
+
+<script>
+import NavLink from '@theme/components/NavLink.vue';
+import PostCardBlocks from '@theme/components/PostCardBlocks.vue';
+export default {
+    name: 'CategoriesCardBlocks',
+    components: {
+        NavLink,
+        PostCardBlocks,
+    },
+    props: {
+        title: {
+            type: Array,
+            default() { return []; },
+        },
+        subtitle: {
+            type: Array,
+            default() { return []; },
+        },
+        posts: Array,
+        max: {
+            type: Number,
+            default: 12,
+        },
+    },
+    computed: {
+        allCount() {
+            if (!this.$posts) return 0;
+            return this.$posts.length;
+        },
+    },
+    methods: {
+        customStyle(item) {
+            return { width: (item.size / this.allCount * 100) + '%' };
+        },
+    },
+};
+</script>
+
+<style lang="stylus" module>
+.cardItem {
+    position: relative;
+    box-sizing: border-box;
+    box-shadow: $boxShadow;
+    overflow: hidden;
+    height: 54px;
+    font-size: 1.2rem;
+    border-radius: $borderRadius;
+}
+
+.cardWarpper {
+    padding: 10px 20px;
+
+    .title {
+        position: relative;
+        font-size: 1.28rem;
+        line-height: 36px;
+        border: none;
+        display: inline-block;
+        max-width: 100%;
+        margin: auto;
+    }
+
+    .right {
+        position: absolute;
+        right: 20px;
+        top: 10px;
+        color: $backgroundColor;
+        font-weight: bold;
+    }
+}
+
+.warpper {
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    .process {
+        height: 100%;
+        background: $accentColor;
+        border: none;
+        float: right;
+        position: relative;
+        min-width: 15%;
+        max-width: 60%;
+
+        &:before {
+            content: '';
+            transform: translateX(-100%) rotate(45deg);
+            background: $accentColor;
+            height: 300%;
+            left: 15px;
+            top: -50%;
+            position: absolute;
+            width: 60px;
+        }
+    }
+}
+</style>
diff --git a/theme/components/HomeBlog.vue b/theme/components/HomeBlog.vue
@@ -1,22 +1,56 @@
 <template>
     <Home>
-        <BlogWrapper v-if="data.hiddenPosts !== true" />
+        <BlogWrapper v-if="data.showPosts === true" />
+        <template v-else>
+            <div>
+                <!-- 最新文章 -->
+                <PostCardBlocks :title="['最新', '博文']" :subtitle="['LATEST', 'POST']" />
+            </div>
+            <div v-if="$categories && $categories.list && $categories.list.length">
+                <!-- 热门分类 -->
+                <CategoriesCardBlocks
+                    :title="['热门', '分类']"
+                    :subtitle="['POPULAR', 'CATEGORIES']"
+                    :posts="hotCategories"
+                />
+            </div>
+            <div>
+                <!-- 关于我 -->
+                <AboutMe :title="['关于', '我']" :subtitle="['ABOUT', 'ME']" />
+            </div>
+        </template>
     </Home>
 </template>
 
 <script>
 import Home from '@theme/components/Home.vue';
 import Header from '@theme/components/Header.vue';
 import BlogWrapper from '@theme/components/BlogWrapper.vue';
+import PostCardBlocks from '@theme/components/PostCardBlocks.vue';
+import CategoriesCardBlocks from '@theme/components/CategoriesCardBlocks.vue';
+import AboutMe from '@theme/components/AboutMe.vue';
 export default {
     name: 'HomeBlog',
     components: {
-        Home, Header, BlogWrapper,
+        Home, Header, BlogWrapper, PostCardBlocks, CategoriesCardBlocks, AboutMe,
     },
     computed: {
         data() {
             return this.$page.frontmatter;
         },
+        hotCategories() {
+            return this.$categories.list.map(item => {
+                const obj = Object.assign({}, item);
+                obj.title = item.name;
+                obj.size = item.pages ? item.pages.length : 0;
+                obj.frontmatter = {
+
+                };
+                return obj;
+            }).sort((a, b) => {
+                return b.size - a.size;
+            });
+        },
     },
 };
 </script>