Merge pull request #53 from vuepress-reco/feature/lxb

Feature/lxb

components/HomeBlog.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home-blog" :class="recoShow?'reco-show': 'reco-hide'">
-     <div class="hero" :style="{background: `url(${$frontmatter.bgImage ? $withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`, ...bgImageStyle}">
+    <div class="hero" :style="{background: `url(${$frontmatter.bgImage ? $withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`, ...bgImageStyle}">
       <h1>{{ data.heroText || $title || '午后南杂' }}</h1>
 
       <p class="description">{{ data.tagline || $description || 'Welcome to your vuePress-theme-reco site' }}</p>
@@ -22,21 +22,21 @@
           @getCurrentPage="getCurrentPage" />
       </div>
       <div class="info-wrapper">
-         <img class="personal-img" :src="$frontmatter.faceImage ? $withBase($frontmatter.faceImage) : require('../images/home-head.png')" alt="hero">
-         <h3 class="name" v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</h3>
-         <div class="num">
-           <div>
-             <h3>{{getPagesLength}}</h3>
-             <h6>文章</h6>
-           </div>
-           <div>
-             <h3>{{$tags.list.length}}</h3>
-             <h6>标签</h6>
-           </div>
-         </div>
-         <hr>
-         <h4><i class="iconfont reco-category"></i> 分类</h4>
-         <ul class="category-wrapper">
+        <img class="personal-img" :src="$frontmatter.faceImage ? $withBase($frontmatter.faceImage) : require('../images/home-head.png')" alt="hero">
+        <h3 class="name" v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</h3>
+        <div class="num">
+          <div>
+            <h3>{{getPagesLength}}</h3>
+            <h6>文章</h6>
+          </div>
+          <div>
+            <h3>{{$tags.list.length}}</h3>
+            <h6>标签</h6>
+          </div>
+        </div>
+        <hr>
+        <h4><i class="iconfont reco-category"></i> 分类</h4>
+        <ul class="category-wrapper">
           <li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
             <router-link :to="item.path">
               <span class="category-name">{{ item.name }}</span>

components/PageInfo.vue

@@ -5,7 +5,7 @@
       v-if="pageInfo.frontmatter.author || $themeConfig.author || $site.title">
       <span>{{ pageInfo.frontmatter.author || $themeConfig.author || $site.title }}</span>
     </i>
-    <i class="iconfont reco-date" v-if="pageInfo.frontmatter.date"><span>{{ new Date(pageInfo.frontmatter.date).toLocaleDateString() }}</span></i>
+    <i class="iconfont reco-date" v-if="pageInfo.frontmatter.date"><span>{{ pageInfo.frontmatter.date | formatDate }}</span></i>
     <AccessNumber v-if="isHome !== true" :idVal="pageInfo.path" :numStyle="numStyle"></AccessNumber>
     <i class="iconfont reco-tag tags" v-if="pageInfo.frontmatter.tags">
       <span
@@ -22,6 +22,8 @@
 
 <script>
 import AccessNumber from './Valine/AccessNumber'
+//引入时间格式化js文件
+import { fromatDateTime } from '@theme/util/formatDate.js'
 
 export default {
   components: { AccessNumber },
@@ -51,7 +53,27 @@ export default {
       }
     }
   },
-
+  filters: {
+    formatDate: function (value) {
+      if (!value) return ''
+      // 返回的value的值都是这个样子2019-09-20T18:22:30.000Z
+      // 对value进行处理
+      value = value.replace('T', ' ').slice(0,value.lastIndexOf('.'))
+      // 转化后的value 2019-09-20 18:22:30
+      // 判断时分秒是不是 00:00:00 (如果是用户手动输入的00:00:00也会不显示)
+      const h = Number(value.substr(11, 2))
+      const m = Number(value.substr(14, 2))
+      const s = Number(value.substr(17, 2))
+      // 时分秒有一个> 0 就说明用户输入一个非 00:00:00 的时分秒
+      if (h > 0 || m > 0 || s > 0) {
+        
+        return fromatDateTime(value)
+      }else {
+        // 用户没有输入或者输入了 00:00:00
+        return new Date(value).toLocaleDateString()
+      }
+    }
+  },
   methods: {
     goTags (tag) {
       const base = this.$site.base

util/formatDate.js

@@ -0,0 +1,21 @@
+/** 
+ *  时间格式化的方法
+ *  创建时间：2019-10-08
+ *  作者：刘晓北
+ *  邮箱： 15732451723@163.com
+*/
+
+// 将时间格式化成 YYYY/MM/DD HH:mm:SS
+export const fromatDateTime = (time) => {
+  const date = new Date(time)
+  const Y = date.getFullYear()
+  const M = date.getMonth() + 1
+  const D = date.getDate()
+  let H = date.getHours()
+  H = H > 9 ? H : '0' + H
+  let m = date.getMinutes()
+  m = m > 9 ? m : '0' + m
+  let S = date.getSeconds()
+  S = S > 9 ? S : '0' + S
+  return Y + '/' + M + '/' + D + ' ' + H + ':' + m + ':' + S
+}