feat: add dark mode(part.9)

Adapt to dark theme
Optimize data acquisition

Author: reco_luan

components/FriendLink.vue

@@ -127,7 +127,6 @@ export default {
     display: inline-block;
     cursor: pointer;
     border-radius: $borderRadius
-    background: #fff;
     font-size: 13px;
     box-shadow var(--box-shadow)
     transition: all .5s
@@ -148,7 +147,7 @@ export default {
       .popup-window
         position absolute
         display flex
-        background #ffffff
+        background var(--background-color)
         box-shadow var(--box-shadow)
         border-radius $borderRadius
         box-sizing border-box

components/Home.vue

@@ -79,6 +79,7 @@ export default {
     text-align: center;
     h1 {
       font-size: 2.5rem;
+      color: var(--text-color);
     }
 
     h1, .description, .action {
@@ -88,7 +89,7 @@ export default {
     .description {
       font-size: 1.6rem;
       line-height: 1.3;
-      color: lighten($textColor, 20%);
+      color: var(--text-color);
     }
 
     .action-button {
@@ -109,7 +110,7 @@ export default {
   }
 
   .features {
-    border-top: 1px solid $borderColor;
+    border-top: 1px solid var(--border-color);;
     padding: 1.2rem 0;
     margin-top: 2.5rem;
     display: flex;
@@ -124,16 +125,12 @@ export default {
     flex-basis: 30%;
     max-width: 30%;
     transition: all .5s
+    color: var(--text-color);
     h2 {
       font-size: 1.6rem;
       font-weight: 500;
       border-bottom: none;
       padding-bottom: 0;
-      color: lighten($textColor, 10%);
-    }
-
-    p {
-      color: lighten($textColor, 20%);
     }
 
     &:hover {

components/PageInfo.vue

@@ -34,7 +34,7 @@
 
 <script>
 // 引入时间格式化js文件
-import { fromatDateTime } from '@theme/util/formatDate.js'
+import { formatDate } from '@theme/util'
 
 export default {
   // props: ['pageInfo', 'currentTag'],
@@ -77,10 +77,10 @@ export default {
       // 判断时分秒是不是 00:00:00 (如果是用户手动输入的00:00:00也会不显示)
       if (h > 0 || m > 0 || s > 0) {
         // 时分秒有一个> 0 就说明用户输入一个非 00:00:00 的时分秒
-        return fromatDateTime(value)
+        return formatDate(value)
       } else {
         // 用户没有输入或者输入了 00:00:00
-        return fromatDateTime(value, 'date')
+        return formatDate(value, 'yyyy-MM-dd')
       }
     }
   },

example/docs/.vuepress/config.js

@@ -24,7 +24,7 @@ module.exports = {
         ]
       }
     ],
-    type: 'blog',
+    // type: 'blog',
     // 博客设置
     blogConfig: {
       category: {
@@ -70,7 +70,21 @@ module.exports = {
     // }
     keyPage: {
       keys: ['123456']
-    }
+    },
+    friendLink: [
+      {
+        title: '午后南杂',
+        desc: 'Enjoy when you can, and endure when you must.',
+        email: '1156743527@qq.com',
+        link: 'https://www.recoluan.com'
+      },
+      {
+        title: 'vuepress-theme-reco',
+        desc: 'A simple and beautiful vuepress Blog & Doc theme.',
+        avatar: "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
+        link: 'https://vuepress-theme-reco.recoluan.com'
+      },
+    ]
   },
   markdown: {
     lineNumbers: true

example/docs/views/other/installUse.md

@@ -1,6 +1,6 @@
 ---
 title: Installation and reference
-date: 2019-04-09
+date: 2019-04-09 11:11:11
 categories:
   - other
 ---

helpers/postData.js

@@ -1,7 +1,7 @@
-import { compareTime } from '@theme/util'
+import { compareDate } from '@theme/util'
 
 // 过滤博客数据
-export function filterPostData (posts, isTimeline) {
+export function filterPosts (posts, isTimeline) {
   posts = posts.filter(item => {
     const { title, frontmatter: { home, date, publish }} = item
     return isTimeline === true
@@ -12,17 +12,23 @@ export function filterPostData (posts, isTimeline) {
 }
 
 // 排序博客数据
-export function sortPostData (posts) {
-  posts.sort((a, b) => {
-    const aSticky = a.frontmatter.sticky
-    const bSticky = b.frontmatter.sticky
-    if (aSticky && bSticky) {
-      return aSticky == bSticky ? compareTime(a, b) : (aSticky - bSticky)
-    } else if (aSticky && !bSticky) {
+export function sortPostsByStickyAndDate (posts) {
+  posts.sort((prev, next) => {
+    const prevSticky = prev.frontmatter.sticky
+    const nextSticky = next.frontmatter.sticky
+    if (prevSticky && nextSticky) {
+      return prevSticky == nextSticky ? compareDate(prev, next) : (prevSticky - nextSticky)
+    } else if (prevSticky && !nextSticky) {
       return -1
-    } else if (!aSticky && bSticky) {
+    } else if (!prevSticky && nextSticky) {
       return 1
     }
-    return compareTime(a, b)
+    return compareDate(prev, next)
+  })
+}
+
+export function sortPostsByDate (posts) {
+  posts.sort((prev, next) => {
+    return compareDate(prev, next)
   })
 }

layouts/Category.vue

@@ -37,7 +37,7 @@
 import Common from '@theme/components/Common.vue'
 import NoteAbstract from '@theme/components/NoteAbstract.vue'
 import mixin from '@theme/mixins/index.js'
-import { sortPostData, filterPostData } from '@theme/helpers/postData'
+import { sortPostsByStickyAndDate, filterPosts } from '@theme/helpers/postData'
 
 export default {
   mixins: [mixin],
@@ -55,8 +55,8 @@ export default {
     // 时间降序后的博客列表
     posts () {
       let posts = this.$currentCategories.pages
-      posts = filterPostData(posts)
-      sortPostData(posts)
+      posts = filterPosts(posts)
+      sortPostsByStickyAndDate(posts)
       return posts
     },
     // 标题只显示分类名称

layouts/Tag.vue

@@ -27,7 +27,7 @@ import Common from '@theme/components/Common.vue'
 import NoteAbstract from '@theme/components/NoteAbstract.vue'
 import TagList from '@theme/components/TagList.vue'
 import mixin from '@theme/mixins/index.js'
-import { sortPostData, filterPostData } from '@theme/helpers/postData'
+import { sortPostsByStickyAndDate, filterPosts } from '@theme/helpers/postData'
 
 export default {
   mixins: [mixin],
@@ -46,8 +46,8 @@ export default {
     // 时间降序后的博客列表
     posts () {
       let posts = this.$currentTags.pages
-      posts = filterPostData(posts)
-      sortPostData(posts)
+      posts = filterPosts(posts)
+      sortPostsByStickyAndDate(posts)
       return posts
     }
   },

layouts/TimeLines.vue

@@ -3,11 +3,11 @@
   <Common :sidebar="false" :isComment="false">
     <ul class="timeline-wrapper">
       <li class="desc">Yesterday Once More!</li>
-      <li v-for="(item, index) in formatPagesArr" :key="index">
+      <li v-for="(item, index) in $recoPostsForTimeline" :key="index">
         <h3 class="year">{{item.year}}</h3>
         <ul class="year-wrapper">
           <li v-for="(subItem, subIndex) in item.data" :key="subIndex">
-            <span class="date">{{dateFormat(subItem.frontmatter.date)}}</span>
+            <span class="date">{{subItem.frontmatter.date | dateFormat}}</span>
             <span class="title" @click="go(subItem.path)">{{subItem.title}}</span>
           </li>
         </ul>
@@ -20,85 +20,33 @@
 
 <script>
 import Common from '@theme/components/Common.vue'
-import mixin from '@theme/mixins/index.js'
-import { filterPostData, sortPostData } from '@theme/helpers/postData'
 
 export default {
-  mixins: [mixin],
   name: 'TimeLine',
   components: { Common },
-  data () {
-    return {
-      pages: [],
-      tags: [],
-      currentTag: '',
-      currentPage: 1,
-      formatPages: {},
-      formatPagesArr: []
-    }
-  },
-  props: {
-    tag: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    trueCurrentTag () {
-      return this.currentTag
-    }
-  },
-  created () {
-    this.getPages()
-  },
-  methods: {
-    // 根据分类获取页面数据
-    getPages (tag) {
-      let pages = this.$site.pages
-      // 时间轴不进行制定处理
-      pages = filterPostData(pages, true)
-      // reverse()是为了按时间最近排序排序
-      this.pages = pages.length == 0 ? [] : pages
-      for (let i = 0, length = pages.length; i < length; i++) {
-        const page = pages[i]
-        const pageDateYear = this.dateFormat(page.frontmatter.date, 'year')
-        if (this.formatPages[pageDateYear]) this.formatPages[pageDateYear].push(page)
-        else {
-          this.formatPages[pageDateYear] = [page]
-        }
-      }
-
-      for (const key in this.formatPages) {
-        const data = this.formatPages[key]
-        sortPostData(data)
-        this.formatPagesArr.unshift({
-          year: key,
-          data
-        })
-      }
-    },
-    renderTime (date) {
-      var dateee = new Date(date).toJSON()
-      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').replace(/-/g, '/')
-    },
-    // 时间格式化
+  filters: {
     dateFormat (date, type) {
-      date = this.renderTime(date)
+      function renderTime (date) {
+        const dateee = new Date(date).toJSON()
+        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').replace(/-/g, '/')
+      }
+      date = renderTime(date)
       const dateObj = new Date(date)
-      const year = dateObj.getFullYear()
       const mon = dateObj.getMonth() + 1
       const day = dateObj.getDate()
-      if (type == 'year') return year
-      else return `${mon}-${day}`
-    },
-    // 跳转
+      return `${mon}-${day}`
+    }
+  },
+  methods: {
     go (url) {
       this.$router.push({ path: url })
     }
   }
 }
 </script>
 
+<style src="../styles/theme.styl" lang="stylus"></style>
+
 <style lang="stylus" scoped>
 @require '../styles/wrapper.styl'
 

mixins/posts.js

@@ -1,4 +1,4 @@
-import { filterPostData, sortPostData } from '../helpers/postData'
+import { filterPosts, sortPostsByStickyAndDate, sortPostsByDate } from '../helpers/postData'
 
 export default {
   computed: {
@@ -11,10 +11,50 @@ export default {
         return [...allData, ...currnetData.pages]
       }, [])
 
-      posts = filterPostData(posts)
-      sortPostData(posts)
+      posts = filterPosts(posts)
+      sortPostsByStickyAndDate(posts)
 
       return posts
+    },
+    $recoPostsForTimeline () {
+      let pages = this.$recoPosts
+      const formatPages = {}
+      const formatPagesArr = []
+      pages = filterPosts(pages, true)
+      this.pages = pages.length == 0 ? [] : pages
+      for (let i = 0, length = pages.length; i < length; i++) {
+        const page = pages[i]
+        const pageDateYear = dateFormat(page.frontmatter.date, 'year')
+        if (formatPages[pageDateYear]) formatPages[pageDateYear].push(page)
+        else {
+          formatPages[pageDateYear] = [page]
+        }
+      }
+
+      for (const key in formatPages) {
+        const data = formatPages[key]
+        sortPostsByDate(data)
+        formatPagesArr.unshift({
+          year: key,
+          data
+        })
+      }
+
+      return formatPagesArr
     }
   }
 }
+
+function renderTime (date) {
+  var dateee = new Date(date).toJSON()
+  return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').replace(/-/g, '/')
+}
+function dateFormat (date, type) {
+  date = renderTime(date)
+  const dateObj = new Date(date)
+  const year = dateObj.getFullYear()
+  const mon = dateObj.getMonth() + 1
+  const day = dateObj.getDate()
+  if (type == 'year') return year
+  else return `${mon}-${day}`
+}