添加首页简约文章列表配置&修复bug

2020-05-09 14:15:49 +08:00 · 2020-05-09 14:15:49 +08:00 · cff259d500
parent 19890227bf
commit cff259d500
7 changed files with 78 additions and 104 deletions
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@ -37,9 +37,8 @@ module.exports = {
    sidebar: 'structuring', // 侧边栏  'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定义    温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页

    // sidebarOpen: false, // 初始状态是否打开侧边栏，默认true
-    // updateBar: { // 文章页中的最近更新栏（此配置和它下面的属性均是可选的）
-    //   isShow: true, // 是否显示，默认true
-    //   length: 3, // 显示的数量，默认3
+    // updateBar: { // 最近更新栏
+    //   showToArticle: true, // 显示到文章页底部，默认true
    //   moreArticle: '/archives' // “更多文章”跳转的页面，默认'/archives'
    // },
    // titleBadge: false, // 文章标题前的图标是否显示，默认true
--- a/docs/index.md
+++ b/docs/index.md
@ -17,6 +17,9 @@ features: # 可选的
    details: 技术文档、教程、技巧、总结等文章
    link: /technology/
    imgUrl: /img/other.png
+
+# 是否启用简约版文章列表：true => 显示简约版文章列表（仅标题和日期）。false => 默认的，显示详细版文章列表（包括作者、分类、标签、摘要、分页等）
+# simplePostList: true 
 ---

 <!-- 
@ -34,7 +37,6 @@ features: # 可选的
 </br>


-
 ## 特色功能
 博客部分特色功能介绍

@ -66,75 +68,7 @@ features: # 可选的
 :::


-</br> -->
-
-<!-- 
-## 文章推荐
-
-### :earth_americas:前端
-
-* JavaScript
-  * [ES6面向对象](/pages/1f4123be6f45abcd/)
-  * [new命令原理](/pages/8143cc480faf9a11/)
-  * [多种数组去重性能对比](/pages/e808fba1fa8fbab2/)
-  * [更多... 👈](/pages/8143cc480faf9a11/)
-* Vue
-  * [Vue CLi3 修改webpack配置](/pages/5d463fbdb172d43b/)
-  * [Vue中的scoped和scoped穿透](/pages/c80d2751cf1f4268/)
-  * [Vue项目使用mock数据的几种方式](/pages/bd1af2f75fd361fc/)
-  * [更多... 👈](/pages/802a1ca6f7b71c59/)
-* TypeScript
-  * [《TypeScript 从零实现 axios》](/pages/e05dce83e5129785/)
-
-### 🗺️页面
-* HTML
-  * [常用meta整理](/pages/8309a5b876fc95e3/)
-* CSS
-  * [flex布局语法](/pages/0a83b083bdf257cb/)
-  * [flex布局案例-圣杯布局](/pages/df9e7c7214fa5046/)
-  * [CSS3之animation动画](/pages/c2c0432138f6e042/)
-  * [更多... 👈](/pages/0a83b083bdf257cb/)
-
-
-
-### 💻技术
-
-* 技术文档
-  * [Git使用手册](/pages/9a7ee40fc232253e/)
-  * [Markdown使用教程](/pages/ad247c4332211551/)
-  * [npm常用命令](/pages/61f2f95fd7da14fd/)
-  * [更多... 👈](/pages/9a7ee40fc232253e/)
-* GitHub
-  * [GitHub高级搜索技巧](/pages/4c778760be26d8b3/)
-  * [GitHub Actions 实现自动部署静态博客](/pages/6b9d359ec5aa5019/) 
-  * [GitHub Actions 定时运行代码：每天定时百度链接推送](/pages/6b9d359ec5aa5019/) 
-  * [更多... 👈](/pages/4c778760be26d8b3/)
-* Nodejs
-  * [nodejs递归读取所有文件](/pages/117708e0af7f0bd9/)
-* 博客搭建
-  * [解决百度无法收录搭建在GitHub上的静态博客的问题](/pages/41f87d890d0a02af/)
-  * [使用Gitalk实现静态博客无后台评论系统](/pages/1da0bf9a988eafe5/)
-  * [GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床](/pages/a5f73af5185fdf0a/)
-  * [博客源码](https://github.com/xugaoyi/vuepress-theme-vdoing)
-
-
-### 💡更多
-* 学习
-  * [提高学习效率的策略](/pages/a8692ab3bdcb4588/)
-  * [提高记忆的技巧](/pages/996822b2a2ca6e3b/)
-  * [自律小建议](/pages/c3f302a03c8daf79/)
-  * [更多... 👈](/pages/a8692ab3bdcb4588/)
-* 面试
-  * [面试问题集锦](/pages/aea6571b7a8bae86/)
-* 心情杂货
-  * [一个完美主义者的自我救赎](/pages/2d615df9a36a98ed/)
-* 更多
-  * [学习网站](/pages/2e9ba3fa6e1ed0e9/)
-  * [在线工具](/pages/9c2232288caaa8ec/)
-  * [友情链接](/pages/844eea1b2387fb96/)
-  * [更多... 👈](/pages/2e9ba3fa6e1ed0e9/) -->
-
-<!-- ## :email: 联系
+## :email: 联系

 - **WeChat or QQ**: <a href="tencent://message/?uin=894072666&Site=&Menu=yesUrl" class='qq'>894072666</a>
 - **Email**: <a href="mailto:894072666@qq.com">894072666@qq.com</a>
--- a/vuepress-theme-vdoing/components/ArticleInfo.vue
+++ b/vuepress-theme-vdoing/components/ArticleInfo.vue
@ -7,10 +7,12 @@
        </li>
        <li>
          <router-link v-if="articleInfo.cataloguePermalink" :to="articleInfo.cataloguePermalink" :title="articleInfo.classify1+'-目录页'">{{articleInfo.classify1}}</router-link>
+          <router-link  v-else-if="$themeConfig.category !== false" :to="`/categories/?category=${articleInfo.classify1}`" title="分类">{{articleInfo.classify1}}</router-link>
          <span v-else>{{ articleInfo.classify1 }}</span>
        </li>
        <li v-if="articleInfo.classify2">
          <router-link v-if="articleInfo.cataloguePermalink" :to="articleInfo.cataloguePermalink + '/#' + encodeUrl(articleInfo.classify2)" :title="articleInfo.classify1+'#'+articleInfo.classify2">{{articleInfo.classify2}}</router-link>
+          <router-link  v-else-if="$themeConfig.category !== false" :to="`/categories/?category=${articleInfo.classify2}`" title="分类">{{articleInfo.classify2}}</router-link>
          <span v-else>{{articleInfo.classify2}}</span>
        </li>
      </ul>
--- a/vuepress-theme-vdoing/components/Home.vue
+++ b/vuepress-theme-vdoing/components/Home.vue
@ -2,7 +2,7 @@
  <div class="home-wrapper">

    <!-- banner块 s -->
-    <div class="banner" :style="bannerBg" v-if="showBanner">
+    <div class="banner" :class="{'hide-banner': !showBanner}" :style="bannerBg">
      <div class="banner-conent" :style="!homeData.features && `padding-top: 7rem`">
        <header class="hero">
          <img v-if="homeData.heroImage" :src="$withBase(homeData.heroImage)" :alt="homeData.heroAlt || 'hero'" />
@ -62,19 +62,32 @@

    <MainLayout>
      <template #mainLeft>
-        <PostList
-         :currentPage="currentPage"
-         :perPage="perPage"
+
+        <!-- 简约版文章列表 -->
+        <UpdateArticle
+          class="card-box"
+          v-if="homeData.simplePostList"
+          :length="5"
        />
-        <Pagination
-          :total="total"
-          :perPage="perPage"
+        
+        <!-- 详情版文章列表 -->
+        <template v-else>
+          <PostList
          :currentPage="currentPage"
-          @getCurrentPage="handlePagination"
-          v-if="Math.ceil(total / perPage) > 1"
-        />
-        <!-- <Content class="theme-vdoing-content custom card-box" /> -->
+          :perPage="perPage"
+          />
+          <Pagination
+            :total="total"
+            :perPage="perPage"
+            :currentPage="currentPage"
+            @getCurrentPage="handlePagination"
+            v-if="Math.ceil(total / perPage) > 1"
+          />
+        </template>
+
+        <Content class="theme-vdoing-content custom card-box"/>
      </template>
+
      <template #mainRight>
        <BloggerBar  v-if="$themeConfig.blogger" />
        <CategoriesBar
@ -99,6 +112,7 @@ import BScroll from "@better-scroll/core"
 import Slide from "@better-scroll/slide"
 import MainLayout from '@theme/components/MainLayout'
 import PostList from '@theme/components/PostList'
+import UpdateArticle from '@theme/components/UpdateArticle'
 import Pagination from '@theme/components/Pagination'
 import BloggerBar from '@theme/components/BloggerBar'
 import CategoriesBar from '@theme/components/CategoriesBar'
@ -123,7 +137,7 @@ export default {
      currentPage: 1// 当前页
    }
  },
-  components: { NavLink, MainLayout, PostList, BloggerBar, CategoriesBar, TagsBar, Pagination },
+  components: { NavLink, MainLayout, PostList, UpdateArticle, BloggerBar, CategoriesBar, TagsBar, Pagination },
  created() {
    this.total = this.$sortPosts.length
  },
@ -136,7 +150,7 @@ export default {

  },
  mounted() {
-    if (this.isMQMobile) {
+    if (this.isMQMobile && (!this.$route.query.p || this.$route.query.p == 1)) {
      this.init()
    }

@ -159,6 +173,15 @@ export default {
    '$route.query.p'() {
      if(!this.$route.query.p){
        this.currentPage = 1
+      } else {
+        this.currentPage = Number(this.$route.query.p)
+      }
+
+      if (this.currentPage === 1 && this.isMQMobile) {
+        setTimeout(() => {
+          this.slide && this.slide.destroy()
+          this.init()
+        }, 0)
      }
    }
  },
@ -211,7 +234,7 @@ export default {

  computed: {
    showBanner() { // 当分页不在第一页时隐藏banner栏
-      return this.$route.query.p && this.$route.query.p != 1 ? false : true
+      return this.$route.query.p && this.$route.query.p != 1 && this.homeData.simplePostList !== true ? false : true
    },
    bannerBg() {
      if (this.homeData.bannerBgImg) {
@ -312,7 +335,7 @@ export default {
        .feature-img 
          animation-play-state: running
        h2,p
-          opacity .7
+          color $accentColor
          

    // 移动端滑动图标
@ -358,9 +381,22 @@ export default {
  
  // 分页不在第一页时，隐藏banner栏
  .main-wrapper
-    margin-top ($navbarHeight + .9rem)
-  .banner + *
    margin-top 2rem
+  .banner.hide-banner
+    display none
+    & + .main-wrapper
+       margin-top ($navbarHeight + .9rem)
+
+  .main-wrapper   
+    .main-left 
+      .card-box
+        margin-bottom .9rem
+      .pagination
+        margin-bottom 4rem
+      .theme-vdoing-content
+        padding 0rem 2rem
+        &>:first-child
+          padding-top 2rem

@keyframes heart
  from{transform:translate(0,0)}
--- a/vuepress-theme-vdoing/components/Page.vue
+++ b/vuepress-theme-vdoing/components/Page.vue
@ -23,10 +23,10 @@
      </div>

      <UpdateArticle
-        :length="updateBarConfig && updateBarConfig.length || 3"
+        :length="3"
        :moreArticle="updateBarConfig && updateBarConfig.moreArticle"
        v-if="isShowUpdateBar"
-        />
+      />

      <slot name="bottom" />
    </main>
@ -58,7 +58,7 @@ export default {
  },
  computed: {
    isShowUpdateBar() {
-      return this.updateBarConfig && this.updateBarConfig.isShow === false ? false : true 
+      return this.updateBarConfig && this.updateBarConfig.showToArticle === false ? false : true 
    },
    showTitle() {
      return !this.$frontmatter.pageComponent
--- a/vuepress-theme-vdoing/components/PostList.vue
+++ b/vuepress-theme-vdoing/components/PostList.vue
@ -84,12 +84,15 @@ export default {
  },
  watch: {
    currentPage() {
-      this.$router.push({
-        query: {
-          ...this.$route.query,
-          p: this.currentPage
-        }
-      })
+
+      if (this.$route.query.p != this.currentPage) { // 此判断防止添加相同的路由信息（如浏览器回退时触发的）
+        this.$router.push({
+          query: {
+            ...this.$route.query,
+            p: this.currentPage
+          }
+        })
+      }
      // setTimeout(() => {
      //   window.scrollTo({ top: this.postListOffsetTop }) // behavior: 'smooth'
      // },0)
--- a/vuepress-theme-vdoing/components/UpdateArticle.vue
+++ b/vuepress-theme-vdoing/components/UpdateArticle.vue
@ -1,5 +1,5 @@
 <template>
-  <div :class="['article',{'no-article': isShowArticle}]">
+  <div :class="['article-list',{'no-article-list': isShowArticle}]">
    <div class="article-title">
      <router-link :to="moreArticle || '/archives/'" class="iconfont icon-shizhong">最近更新</router-link>
    </div>
@ -75,12 +75,12 @@ export default {

 <style lang='stylus'>
  @require '../styles/wrapper.styl'
-  .article
+  .article-list
    @extend $wrapper
-    padding 1.8rem 2rem 0 2rem
+    padding 1rem 2rem
    @media (max-width: $MQNarrow)
-      padding 1.5rem 1.5rem 0rem 1.5rem
-    &.no-article
+      padding 1rem 1.5rem
+    &.no-article-list
      display none
    .article-title
      border-bottom 1px solid var(--borderColor)