From 48f0bcbe74fa02ba15df61a934d24256986f48b6 Mon Sep 17 00:00:00 2001
From: Zyao89 <zyao89@gmail.com>
Date: Mon, 2 Mar 2020 00:29:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E4=BC=98=E5=8C=96=20?=
 =?UTF-8?q?blog=20=E9=A6=96=E9=A1=B5=20UI=20=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/components/AboutMe.vue              |  53 +++++++
 theme/components/BlogPosts.vue            |  66 +-------
 theme/components/CategoriesCardBlocks.vue | 120 +++++++++++++++
 theme/components/HomeBlog.vue             |  38 ++++-
 theme/components/PersonalInfo.vue         |  79 ++++++++--
 theme/components/PostCardBlocks.vue       | 174 ++++++++++++++++++++++
 theme/components/PostInfo.vue             |  91 +++++++++++
 theme/components/Topics.vue               | 103 +++++++++++++
 8 files changed, 651 insertions(+), 73 deletions(-)
 create mode 100644 theme/components/AboutMe.vue
 create mode 100644 theme/components/CategoriesCardBlocks.vue
 create mode 100644 theme/components/PostCardBlocks.vue
 create mode 100644 theme/components/PostInfo.vue
 create mode 100644 theme/components/Topics.vue

diff --git a/theme/components/AboutMe.vue b/theme/components/AboutMe.vue
new file mode 100644
index 0000000..9b336bf
--- /dev/null
+++ 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
index 592e7d8..fa538e3 100644
--- 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
new file mode 100644
index 0000000..2c71492
--- /dev/null
+++ 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
index f024439..a19c539 100644
--- a/theme/components/HomeBlog.vue
+++ b/theme/components/HomeBlog.vue
@@ -1,6 +1,24 @@
 <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>
 
@@ -8,15 +26,31 @@
 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>
diff --git a/theme/components/PersonalInfo.vue b/theme/components/PersonalInfo.vue
index ed3e36e..0471877 100644
--- a/theme/components/PersonalInfo.vue
+++ b/theme/components/PersonalInfo.vue
@@ -1,15 +1,27 @@
 <template>
     <div :class="$style.root">
-        <img :class="$style.avatar" :src="$withBase(avatar)" />
-        <h3 :class="$style.name" v-if="author">{{ author }}</h3>
-        <div :class="$style.num">
-            <div>
-                <h3>{{$posts.length}}</h3>
-                <h6>文章</h6>
+        <div :class="$style.left" :simple="simple">
+            <img :class="$style.avatar" :src="$withBase(avatar)" />
+            <h3 :class="$style.name" v-if="author">{{ author }}</h3>
+        </div>
+        <div :class="$style.warpper" :simple="simple">
+            <div v-if="simple" :class="$style.description">
+                <div v-if="description">{{ description }}</div>
+                <Content slot-key="aboutme"></Content>
             </div>
-            <div>
-                <h3>{{$tags.length}}</h3>
-                <h6>标签</h6>
+            <div :class="$style.num" :simple="simple">
+                <div>
+                    <h3>{{$posts.length}}</h3>
+                    <h6>文章</h6>
+                </div>
+                <div v-if="simple">
+                    <h3>{{$categories.length}}</h3>
+                    <h6>分类</h6>
+                </div>
+                <div>
+                    <h3>{{$tags.length}}</h3>
+                    <h6>标签</h6>
+                </div>
             </div>
         </div>
     </div>
@@ -18,6 +30,9 @@
 <script>
 export default {
     name: 'PersonalInfo',
+    props: {
+        simple: Boolean,
+    },
     computed: {
         avatar() {
             return this.$frontmatter.avatar || this.$i18nText('avatar') || require('@theme/assets/avatar.svg');
@@ -25,6 +40,12 @@ export default {
         author() {
             return this.$frontmatter.author || this.$i18nText('author') || this.$site.title;
         },
+        description() {
+            return this.$i18nText('description') || this.$site.description;
+        },
+    },
+    mounted() {
+        console.warn(this);
     },
 };
 </script>
@@ -32,6 +53,7 @@ export default {
 <style lang="stylus" module>
 .root {
     position: relative;
+    box-sizing: border-box;
 }
 
 .avatar {
@@ -40,6 +62,7 @@ export default {
     width: 8rem;
     height: 8rem;
     border-radius: 50%;
+    box-sizing: border-box;
 
     &:hover {
         transform: rotate(666turn);
@@ -50,8 +73,27 @@ export default {
     }
 }
 
-.name {
+.left {
+    &[simple] {
+        display: inline-block;
+        width: 46%;
+    }
+}
+
+.warpper {
+    position: relative;
+    box-sizing: border-box;
     text-align: center;
+
+    &[simple] {
+        display: inline-block;
+        width: 52%;
+        vertical-align: top;
+        padding: 2rem 0;
+    }
+}
+
+.name {
     color: $textColor;
 }
 
@@ -60,12 +102,18 @@ export default {
     margin: 0 auto 1rem;
     width: 80%;
 
+    &[simple] {
+        margin: 0;
+        width: 100%;
+    }
+
     > div {
         text-align: center;
         flex: auto;
+        border-right: 1px solid $borderColor;
 
-        &:first-child {
-            border-right: 1px solid $borderColor;
+        &:last-child {
+            border-right: none;
         }
 
         h3 {
@@ -81,4 +129,11 @@ export default {
         }
     }
 }
+
+.description {
+    position: relative;
+    box-sizing: border-box;
+    padding: 1rem;
+    min-height: 8rem;
+}
 </style>
diff --git a/theme/components/PostCardBlocks.vue b/theme/components/PostCardBlocks.vue
new file mode 100644
index 0000000..240b0dc
--- /dev/null
+++ b/theme/components/PostCardBlocks.vue
@@ -0,0 +1,174 @@
+<template>
+    <!-- 相关内容 -->
+    <section :class="$style.root">
+        <div :class="$style.container">
+            <div :class="$style.title">
+                <h3 :class="$style.sub">
+                    <span v-for="(item, index) in subtitle" :key="index">{{ item }}</span>
+                </h3>
+                <h2 :class="$style.main">
+                    <span v-for="(item, index) in title" :key="index">{{ item }}</span>
+                </h2>
+            </div>
+            <hr :class="$style.line" />
+            <TransitionFadeSlide>
+                <div :class="$style.cardsGroup">
+                    <slot name="body">
+                        <ul :class="$style.cards">
+                            <li
+                                :class="$style.cardItem"
+                                v-for="(post, index) in _posts"
+                                :key="`${post.key}_${index}`"
+                            >
+                                <div :class="$style.card">
+                                    <slot :item="post">
+                                        <PostInfo :post="post" simple></PostInfo>
+                                    </slot>
+                                </div>
+                            </li>
+                        </ul>
+                    </slot>
+                </div>
+            </TransitionFadeSlide>
+        </div>
+    </section>
+</template>
+
+<script>
+import PostInfo from '@theme/components/PostInfo.vue';
+import TransitionFadeSlide from '@theme/components/TransitionFadeSlide.vue';
+export default {
+    name: 'PostCardBlocks',
+    components: {
+        PostInfo,
+        TransitionFadeSlide,
+    },
+    props: {
+        title: {
+            type: Array,
+            default() { return []; },
+        },
+        subtitle: {
+            type: Array,
+            default() { return []; },
+        },
+        posts: Array,
+        max: {
+            type: Number,
+            default: 6,
+        },
+    },
+    computed: {
+        _posts() {
+            return [].concat(this.posts || this.$posts).slice(0, this.max);
+        },
+    },
+};
+</script>
+
+<style lang="stylus" module>
+.root {
+    position: relative;
+    box-sizing: border-box;
+    padding: 6rem 0;
+    text-align: center;
+
+    &:after {
+        clear: both;
+    }
+}
+
+.container {
+    position: relative;
+    box-sizing: border-box;
+    max-width: $maxWidth;
+    margin: auto;
+    padding: 0 3rem;
+
+    @media (max-width: $MQNarrow) {
+        padding: 0;
+    }
+}
+
+.title {
+    .sub {
+        letter-spacing: 0.2rem;
+        font-size: 0.24rem;
+        opacity: 0.65;
+
+        &>span:first-child {
+            margin-right: 0.6rem;
+        }
+    }
+
+    .main {
+        letter-spacing: 0.3rem;
+        margin: 0.6rem 0 1rem;
+        border: none;
+
+        &>span:first-child {
+            color: #fff;
+            background: $accentColor;
+            padding: 0 0.3rem 0 0.6rem;
+            margin-right: 0.3rem;
+        }
+    }
+}
+
+.line {
+    display: block;
+    margin: auto;
+    height: 1px;
+    width: 3rem;
+    background: $accentColor;
+    opacity: 0.65;
+    text-align: center;
+    position: relative;
+    border: none;
+}
+
+.cardsGroup {
+    position: relative;
+    box-sizing: border-box;
+    padding-top: 2rem;
+
+    .cards {
+        list-style: none;
+        position: relative;
+        padding: 0;
+        margin: auto;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        // column-count: 3;
+        .cardItem {
+            position: relative;
+            box-sizing: border-box;
+            padding: 0.6rem;
+            text-align: left;
+            width: 33%;
+            flex: 0 0 33%;
+            // break-inside: avoid;
+            overflow: hidden;
+        }
+
+        .card {
+            position: relative;
+            transition: all 0.3s;
+
+            &:hover {
+                transform: translateY(-0.2rem);
+            }
+        }
+
+        @media (max-width: $MQNarrow) {
+            // column-count: 1;
+            .cardItem {
+                width: 100%;
+                flex: 0 0 100%;
+            }
+        }
+    }
+}
+</style>
diff --git a/theme/components/PostInfo.vue b/theme/components/PostInfo.vue
new file mode 100644
index 0000000..5644e73
--- /dev/null
+++ b/theme/components/PostInfo.vue
@@ -0,0 +1,91 @@
+<template>
+    <div :class="$style.post" :simple="simple">
+        <h2 role="title" :class="$style.title">
+            <Badge
+                v-if="post.frontmatter.type"
+                style="margin-right: 5px;"
+                :text="post.frontmatter.type"
+                type="yellow"
+            ></Badge>
+            <NavLink :item="post.path" line>{{ post.title }}</NavLink>
+        </h2>
+        <article v-if="!simple" role="summary" :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 role="info" :class="$style.info" :info="post" hideTitle />
+    </div>
+</template>
+
+<script>
+import NavLink from '@theme/components/NavLink.vue';
+import PageInfo from '@theme/components/PageInfo.vue';
+export default {
+    name: 'PostInfo',
+    components: {
+        NavLink,
+        PageInfo,
+    },
+    props: {
+        post: {
+            required: true,
+            type: Object,
+        },
+        simple: Boolean,
+    },
+};
+</script>
+
+<style lang="stylus" module>
+.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;
+        border: none;
+        display: inline-block;
+        max-width: 100%;
+    }
+
+    .summary {
+        word-break: break-all;
+        opacity: 0.85;
+        color: $textColor;
+    }
+
+    .info {
+        padding: 0;
+        margin: 20px 0;
+    }
+
+    &[simple] {
+        .title {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 1.2rem;
+        }
+    }
+}
+</style>
diff --git a/theme/components/Topics.vue b/theme/components/Topics.vue
new file mode 100644
index 0000000..da58b26
--- /dev/null
+++ b/theme/components/Topics.vue
@@ -0,0 +1,103 @@
+<template>
+    <!-- 相关内容 -->
+    <div :class="$style.root" class="sidebar-links">
+        <div :class="$style.group" class="sidebar-group">
+            <p :class="$style.title" class="sidebar-heading">
+                <span>相关推荐</span>
+            </p>
+            <ul class="sidebar-links sidebar-group-items">
+                <li v-for="(post, index) in _posts" :key="index">
+                    <!-- <a href class="sidebar-link">{{ post.title }}</a> -->
+                    <NavLink class="sidebar-link" :item="post.path">{{ post.title }}</NavLink>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+import NavLink from '@theme/components/NavLink.vue';
+export default {
+    name: 'Topics',
+    components: {
+        NavLink,
+    },
+    props: {
+        max: {
+            type: Number,
+            default: 5,
+        },
+        posts: Array,
+    },
+    computed: {
+        _currentTags() {
+            const data = this.data || {};
+            return data.tags || [];
+        },
+        _currentCategories() {
+            const data = this.data || {};
+            return data.categories || [];
+        },
+        _posts() {
+            const pages = [];
+            // tags
+            const $tags = (this.$tags || {}).map;
+            if ($tags) {
+                this._currentTags.forEach(key => {
+                    const tag = $tags[key];
+                    if (tag) {
+                        pages.push(...tag.pages);
+                    }
+                });
+            }
+            // categories
+            const $categories = (this.$categories || {}).map;
+            if ($categories) {
+                this._currentCategories.forEach(key => {
+                    const categories = $categories[key];
+                    if (categories) {
+                        pages.push(...categories.pages);
+                    }
+                });
+            }
+            const $page = this.$page || {};
+            const hasKeys = {};
+            return pages.concat(this.posts || this.$posts).filter(item => {
+                if (hasKeys[item.key]) {
+                    return false;
+                }
+                hasKeys[item.key] = true;
+
+                if (item.key === $page.key) {
+                    return false;
+                }
+                return true;
+            }).slice(0, this.max);
+        },
+        data() {
+            return this.$page.frontmatter;
+        },
+    },
+};
+</script>
+
+<style lang="stylus" module>
+.root {
+    box-sizing: border-box;
+    position: relative;
+
+    &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 1.25rem;
+        right: 1.5rem;
+        background: $borderColor;
+        border-bottom: solid 1px $borderColor;
+    }
+}
+
+.group {
+}
+</style>