添加：最新文章模块

2020-02-24 17:25:31 +08:00 · 2020-02-24 17:25:31 +08:00 · f926d9d1de
parent c8e54c22cc
commit f926d9d1de
8 changed files with 205 additions and 7 deletions
--- a/docs/.vuepress/styles/index.styl
+++ b/docs/.vuepress/styles/index.styl
@ -24,6 +24,9 @@ table
    padding 2rem
  @media (max-width: $MQMobileNarrow)
    padding 1.5rem
+.gt-container .gt-comments-null
+  color #999
+

 // 侧边栏高出评论区
 .sidebar
--- a/docs/.vuepress/theme/components/Article.vue
+++ b/docs/.vuepress/theme/components/Article.vue
@ -0,0 +1,148 @@
+<template>
+  <div :class="['article',{ 'article-home': pageMark === 'home', 'no-article': isShowArticle}]">
+    <div class="article-title">
+      <h1 v-if="pageMark === 'home'">
+        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABKFJREFUSA3tVl1oFVcQnrMbrak3QUgkya1akpJYcrUtIqW1JvFBE9LiQ5v6JmJpolbMg32rVrhgoYK0QiMY6i9Y6EMaW5D+xFJaTYItIuK2Kr3+BJNwkxBj05sQY3b3nM6cs2dv9t7NT/vQJw/sndk5M/PNzJkzewGerP+pAmy+ON8lLzUJgA8ZYxYIYZmGYRnctDaWvJJAmTtfP1pvXsBCCPP8QFcCaRkZYACgDZFO4stNIcBCajEOlmmC9XpJ9bAGCaPaPmzPl32dvLSVu3BWCTQs0XQQ6g0DYgwLIoAZbBCdW/i+781o1VVlm/410mw4h06Y7bIPHNyWDyL4FHkX03Q8SrzNhZTZriieckWt7cL6MM85YcLpsi/7O9/iXFT6MswI0DmmpkSaJ0qLxFIm3+i1THHB3zmBH3PYx9CcykcLOeQVVa7QtdxTgQgEleX2AjHYfwA+2ddV77ruGoJUbhGDI09YSNXyMpUt5ylOzxgbUmtOp7NmbNt8v3arjTBfYELmLUV+M+nSawNNAUqpT3ClJWg5I3BLT+cGW/DXNGCa6tx1aakCGEigArTn4TDIPdrXXYKCZNrHLMCOEPvHBlLQ99s9eHB7EB6NTki73CVPQ2F5MSx/uRQixfmq7rK0wYD8w8E905bnPDfwoWs/rfv93NWN/ZfvwsLIU7A09gxECyISeGJkHAau98L97tuw7NXnoPyNF8FcYGLGKsOs0mN3OEyec9esGW/ZEl945dTP34wlR2FZVQWU1q0Cw8Tr7p+hgLLNL0FPxx/Q35mA8aEUrH6nCgwEl0tn7wUiZYJnNRh6DK4UH/k0lfyrsBKdPVv/AriGIQcEDQZ65LBAGe2Rzui9Ybjz7XUppz1/uKBbyVPGkN3ZAeC6hr0x7Nr38N5+EqkoOm17xpoqR9ohQF55ERSvr4Dkr3chNfC3DMzGJlNBElW8w9nsGQvhNGIzDkXzCg8cLK951xHsFBlTJspJNi3ZFIMF2AeDV3q8DNOB+YHi6QTrChDIWDBRi5U5f+ZMfJLu3ccrqxtdxk4SKH336LFxSmkqefwU5T8fhdSdQf9IVKD6aNiwI/hnmcAZ91isYMJIaCUCx9W098+LgruikeTqzqqxKPUwqJyCPJiyemVVZBOijDGjD38Os0jOiSPL1z3SPjXNANbiNPXAdzTfukjjuknNBbyz3nwgTd3AVFqUJ5hpHlq9MveLnWwttUfoygBmvVjuikxND3znrhsELnZk7k+OjIGxeNEkomyLVta0xxn+HZhjBc4YZ/AFjHjz9u3xRZl2BN4aq9nFwWh16IrQ1aHHEd3j1+4/dB9OtH4e29A2H1DyHQRmOSfQZ1Fy7MHBTGB6J/Djq6p3OxyO2cB+4Car7v/o3GXgfAkj23+x9ID1Teoamo/SXcbvSf2PX7Vc8DdCmE1vN9di+32P9/5YR3vLnhCVGUWBjEkr3yh4H8v9CzmsbdhzOKzsJKM90iFdaTMjRPhGVsakRvOaRidljo6H6G7j+ctrJpsP+4COhDIl0La2+FS4+5mlocBaXY5QnGZysIBYoeSsl5qQzrSj/cgNrfuEzlWBfwA+EjrZyWUvpAAAAABJRU5ErkJggg==">
+        最新文章
+      </h1>
+      <span v-else>最新文章</span>
+    </div>
+    <div class="article-wrapper">
+      <dl v-for="(item, index) in topPublishPosts" :key="item.path">
+        <dd>{{'0' + (index + 1)}}</dd>
+        <dt>
+          <a :href="item.path"><div>{{item.title}}</div></a>
+          <span>{{item.formatDay}}</span>
+        </dt>
+      </dl>
+     
+      <dl>
+        <dd></dd>
+        <dt>
+          <a href="/pages/8818d4830dac5e2a" class="more">更多文章></a>
+        </dt>
+      </dl>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['pageMark'],
+  data() {
+    return {
+      posts: []
+    }
+  },
+  created() {
+    this.posts = this.$site.pages
+  },
+  computed: {
+    topPublishPosts() {
+      return this.getTopKPosts()
+    },
+    isShowArticle () {
+      const { frontmatter } = this.$page
+      return !(frontmatter.article !== false)
+    }
+  },
+  methods: {
+    getTopKPosts() { // 文章数据处理
+      const re = /.*\/(.*?)\.(html|md)/
+      return this.posts
+        .filter(post => {
+          const { frontmatter } = post;
+          return frontmatter && frontmatter.permalink && frontmatter.title;
+        })
+        .map(post => {
+          const execs = re.exec(post.relativePath)
+          return {
+            ...post,
+            updateTimestamp: (new Date(post.lastUpdated || post.frontmatter.date)).getTime(),
+            filename: execs ? execs['1'] : '',
+            formatDay: this.formatDate(new Date(post.lastUpdated || post.frontmatter.date))
+          }
+        })
+        .sort((a, b) => b.updateTimestamp - a.updateTimestamp)
+        .slice(0,5)
+    },
+    
+    formatDate(date) { // 日期格式化
+      if (!(date instanceof Date)) {
+        return 
+      }
+      return `${date.getFullYear()}/${this.zero(date.getMonth() + 1)}/${this.zero(date.getDate())}`
+    },
+    zero(d){ // 补0
+      return d.toString().padStart(2,'0')
+    }
+  }
+}
+</script>
+
+<style lang='stylus'>
+  .article
+    max-width $contentWidth
+    margin 0 auto
+    padding 2rem 2.5rem 0 2.5rem
+    @media (max-width: $MQNarrow)
+      padding 2rem 2rem 0rem 2rem
+    @media (max-width: $MQMobileNarrow)
+      padding 1.5rem 1.5rem 0rem 1.5rem
+    &.article-home
+      max-width: 100%
+      padding 0 0 2rem 0
+    &.no-article
+      display none
+    .article-title
+      border-bottom 1px solid #eaecef
+      font-size 1.1rem
+      font-weight bold
+      padding 0 0 .5rem 1rem
+    .article-wrapper
+      overflow hidden
+      dl
+        border-bottom 1px solid #eaecef
+        width 50%
+        float left
+        display flex
+        padding 10px 0
+        margin 0
+        height 55px
+        @media (max-width: $MQNarrow)
+          width 100%
+        dd
+          font-size 1.1rem
+          color #F17229
+          width 50px
+          margin-left 30px
+          font-weight bold
+          line-height: 55px;
+        dt
+          flex 1
+          display flex
+          a
+            color $textColor
+            flex 1
+            display: flex;
+            height: 55px;
+            align-items: center;
+            div
+              overflow: hidden;
+              white-space: normal;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+            &:hover
+              text-decoration underline 
+            &.more
+              color $accentColor
+          span
+            width 100px
+            color #999
+            text-align right 
+            font-size .9rem
+            line-height: 55px;
+</style>
--- a/docs/.vuepress/theme/components/Home.vue
+++ b/docs/.vuepress/theme/components/Home.vue
@ -76,7 +76,7 @@
          </a>
        </div>
      </div> -->
-
+      <Article pageMark="home" />
      <Content class="theme-default-content custom" />
    </main>
    <div class="footer" v-if="data.footer">Copyright © {{ data.footer.year }}-{{ new Date().getFullYear() }} {{ data.footer.content }}</div>
@ -87,6 +87,7 @@
 import NavLink from "@theme/components/NavLink.vue";
 import BScroll from "@better-scroll/core"
 import Slide from "@better-scroll/slide"
+import Article from './Article.vue'

 BScroll.use(Slide)

@ -163,7 +164,7 @@ export default {
    }
  },

-  components: { NavLink },
+  components: { NavLink, Article },

  computed: {
    data() {
--- a/docs/.vuepress/theme/components/Page.vue
+++ b/docs/.vuepress/theme/components/Page.vue
@ -0,0 +1,43 @@
+<template>
+  <main class="page">
+    <slot name="top" />
+
+    <Content class="theme-default-content" />
+    <PageEdit />
+
+    <PageNav v-bind="{ sidebarItems }" />
+
+    <Article />
+
+    <slot name="bottom" />
+  </main>
+</template>
+
+<script>
+import PageEdit from '@theme/components/PageEdit.vue'
+import PageNav from '@theme/components/PageNav.vue'
+import Article from './Article.vue'
+
+export default {
+  components: { PageEdit, PageNav, Article},
+  props: ['sidebarItems']
+}
+</script>
+
+<style lang="stylus">
+// @require '../styles/wrapper.styl'
+
+$wrapper
+  max-width $contentWidth
+  margin 0 auto
+  padding 2rem 2.5rem
+  @media (max-width: $MQNarrow)
+    padding 2rem
+  @media (max-width: $MQMobileNarrow)
+    padding 1.5rem
+
+.page
+  padding-bottom 2rem
+  display block
+
+</style>
--- a/docs/04.其他/99.友情链接.md
+++ b/docs/04.其他/99.友情链接.md
@ -4,12 +4,12 @@ date: 2019-12-25
 permalink: /pages/844eea1b2387fb96
 ---

-## 小伙伴们♪(^∇^*)
+# 小伙伴们 o(^∇^*)

 | 小伙伴                                                       | 介绍                 |
 | ------------------------------------------------------------ | -------------------- |
-| <img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg" class="headImg">[麋鹿鲁哟](https://www.cnblogs.com/miluluyo/) | 大道至简，知易行难。# web # 二次元 # 美少女 |
-| <img src="https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png" class="headImg">[xaoxuu](https://xaoxuu.com) | # iOS |
+| <img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg" class="headImg">[麋鹿鲁哟](https://www.cnblogs.com/miluluyo/) | 大道至简，知易行难。`#Web` `#二次元` `#美少女` |
+| <img src="https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png" class="headImg">[xaoxuu](https://xaoxuu.com) | `#iOS` |

 <br><br><br>

--- a/docs/05.关于/01.关于.md
+++ b/docs/05.关于/01.关于.md
@ -3,6 +3,7 @@ title: 关于
 date: 2019-12-25
 permalink: /pages/81d9f505441078e0
 sidebar: false
+article: false
 ---
 # 关于

--- a/docs/06.最新/01.最新.md
+++ b/docs/06.最新/01.最新.md
@ -3,9 +3,10 @@ title: 最新
 date: 2019-12-31
 permalink: /pages/8818d4830dac5e2a
 sidebar: false
+article: false
 ---

-> 最近更新的文章 👇
+# 最新文章

 <ul class="page-guide-ul">
  <li 
@ -128,6 +129,7 @@ export default {
 .page-guide-row a {
  max-width: 50%;
  padding-right: 20px;
+  color: $textColor
 }

 .page-guide-row span {
--- a/docs/index.md
+++ b/docs/index.md
@ -22,7 +22,7 @@ footer:
  bgImg: /img/footer.jpg
 ---

-# 简介
+## 简介
 这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术（[最新](/pages/8818d4830dac5e2a/)）。如果你喜欢这个博客欢迎到 [GitHub](https://github.com/xugaoyi/blog) 点个Star、获取源码，或者交换 [友链](/pages/844eea1b2387fb96/)。

 </br>