修改：最新页面功能改版

2020-03-02 22:41:02 +08:00 · 2020-03-02 22:41:02 +08:00 · c30c21408f
parent bbb4c017e8
commit c30c21408f
172 changed files with 364 additions and 204 deletions
--- a/docs/.vuepress/theme/layouts/404.vue
+++ b/docs/.vuepress/theme/layouts/404.vue
--- a/docs/.vuepress/theme/util/getTopKPosts.js
+++ b/docs/.vuepress/theme/util/getTopKPosts.js
@ -1,30 +1,116 @@
 const re = /.*\/(.*?)\.(html|md)/

+export function getPagesList(posts) {
+  console.log('------')
+  let pagesList = {}
+
+  // 过滤非文章页
+  posts = filterNotArticle(posts)
+
+  // 对页面数据二次处理和排序
+  const pages = posts.map(post => {
+    const execs = re.exec(post.relativePath)
+    const date = new Date(post.frontmatter.date || post.lastUpdated)
+    const pathArr = post.relativePath.split('/')
+
+    return {
+      ...post,
+      updateTimestamp: date.getTime(), // 更新日期的时间戳
+      filename: execs ? execs['1'] : '',
+      formatDay: formatDate(date),
+      year: date.getFullYear(),
+      tag: /\./g.test(pathArr[0]) ? pathArr[1].split('.')[1] : pathArr[0] // 区分是单独合集的笔记还是文章
+    }
+  }).sort((a, b) => b.updateTimestamp - a.updateTimestamp)
+
+
+  // 根据年份对数据分组
+  let pageYearArr = []
+  let pageYearObj = {}
+  pages.forEach( page => {
+
+    // 全部
+    if (!pageYearObj[page.year]){
+      pageYearArr.push({
+        year: page.year,
+        pageList: [page]
+      })
+      pageYearObj[page.year] = page
+    } else {
+      pageYearArr.forEach(ele => {
+        if (ele.year == page.year){
+          ele.pageList.push(page)
+        }
+      })
+    }
+
+    // 按标签分组
+    //console.log(page.tag)
+    if (!pagesList[page.tag]) {
+      pagesList[page.tag] = []
+    } else {
+
+    }
+    
+
+
+
+
+  })
+
+  // 根据标签分组
+  pagesList['全部'] = pageYearArr
+  
+
+  console.log(pagesList)
+}
+
+// 按年份分组
+function pageGrouping(){
+
+}
+
+
+
+
+
+
 export function getTopKPosts(posts, len) {
-  return posts
-    .filter(post => {
+  return handlePageData(
+    filterNotArticle(posts)
+    ).slice(0,len)
+}
+
+ // 过滤没有frontmatter数据的 和 非文章页面的
+function filterNotArticle(posts){
+  return posts.filter(post => {
    const { frontmatter } = post;
    return frontmatter && frontmatter.permalink && frontmatter.title && frontmatter.article !== false;
  })
-    .map(post => {
+}
+
+// 页面数据的处理和排序
+function handlePageData(posts){
+  return posts.map(post => {
    const execs = re.exec(post.relativePath)
    return {
      ...post,
-        updateTimestamp: (new Date(post.lastUpdated || post.frontmatter.date)).getTime(),
+      updateTimestamp: (new Date(post.frontmatter.date || post.lastUpdated)).getTime(), // 更新日期的时间戳
      filename: execs ? execs['1'] : '',
-        formatDay: formatDate(new Date(post.lastUpdated || post.frontmatter.date))
+      formatDay: formatDate(new Date(post.frontmatter.date || post.lastUpdated))
    }
-    })
-    .sort((a, b) => b.updateTimestamp - a.updateTimestamp)
-    .slice(0,len)
+  }).sort((a, b) => b.updateTimestamp - a.updateTimestamp)
 }

-function formatDate(date) { // 日期格式化
+// 日期格式化
+function formatDate(date) {
  if (!(date instanceof Date)) {
    return 
  }
  return `${date.getFullYear()}/${zero(date.getMonth() + 1)}/${zero(date.getDate())}`
 }
-function zero(d) { // 补0
+
+// 补0
+function zero(d) { 
  return d.toString().padStart(2,'0')
 }
--- a/docs/01.前端/10.学习笔记/00.《JavaScript教程》笔记.md
+++ b/docs/01.前端/10.学习笔记/00.《JavaScript教程》笔记.md
@ -1,6 +1,6 @@
 ---
 title: 《JavaScript教程》笔记
-date: 2020-01-12
+date: 2020-01-12 11:51:53
 permalink: /pages/b002833e252f5727
 ---
 <main aria-labelledby="main-title" class="home">
--- a/docs/01.前端/10.学习笔记/10.《ES6
+++ b/docs/01.前端/10.学习笔记/10.《ES6
@ -1,6 +1,6 @@
 ---
 title: 《ES6 教程》笔记
-date: 2020-01-12
+date: 2020-01-12 15:49:22
 permalink: /pages/5966e7c94628d277
 ---

--- a/docs/01.前端/10.学习笔记/20.《Vue》笔记.md
+++ b/docs/01.前端/10.学习笔记/20.《Vue》笔记.md
@ -1,6 +1,6 @@
 ---
 title: 《Vue》笔记
-date: 2020-02-04
+date: 2020-02-04 12:16:12
 permalink: /pages/830b1fea836eee46
 ---
 <main aria-labelledby="main-title" class="home">
--- a/docs/01.前端/10.学习笔记/30.《TypeScript
+++ b/docs/01.前端/10.学习笔记/30.《TypeScript
@ -1,6 +1,6 @@
 ---
 title: 《TypeScript 从零实现 axios》
-date: 2020-01-05
+date: 2020-01-05 10:40:48
 permalink: /pages/943193f9d25bc5fb
 ---

--- a/docs/01.前端/10.学习笔记/40.小程序笔记.md
+++ b/docs/01.前端/10.学习笔记/40.小程序笔记.md
@ -1,6 +1,6 @@
 ---
 title: 小程序笔记
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/236ec09c26876b59
 ---
 # 小程序笔记
--- a/docs/01.前端/25.JavaScript文章/02.new命令原理.md
+++ b/docs/01.前端/25.JavaScript文章/02.new命令原理.md
@ -1,6 +1,6 @@
 ---
 title: new命令原理
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/8143cc480faf9a11
 ---
 # new命令原理
--- a/docs/01.前端/25.JavaScript文章/03.ES5面向对象.md
+++ b/docs/01.前端/25.JavaScript文章/03.ES5面向对象.md
@ -1,6 +1,6 @@
 ---
 title: ES5面向对象
-date: 2019-12-25
+date: 2020-02-22 10:35:43
 permalink: /pages/b1af5cb8996363c5
 ---
 # ES5面向对象
--- a/docs/01.前端/25.JavaScript文章/04.ES6面向对象.md
+++ b/docs/01.前端/25.JavaScript文章/04.ES6面向对象.md
@ -1,6 +1,6 @@
 ---
 title: ES6面向对象
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/1f4123be6f45abcd
 ---
 # ES6面向对象
--- a/docs/01.前端/25.JavaScript文章/06.多种数组去重性能对比.md
+++ b/docs/01.前端/25.JavaScript文章/06.多种数组去重性能对比.md
@ -1,6 +1,6 @@
 ---
 title: 多种数组去重性能对比
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/e808fba1fa8fbab2
 ---
 # 多种数组去重性能对比
--- a/docs/01.前端/25.JavaScript文章/50.js随机打乱数组.md
+++ b/docs/01.前端/25.JavaScript文章/50.js随机打乱数组.md
@ -1,6 +1,6 @@
 ---
 title: JS随机打乱数组
-date: 2020-02-08
+date: 2020-02-08 17:42:03
 permalink: /pages/40b4db2d38ba85f2
 ---
 # JS随机打乱数组
--- a/docs/01.前端/25.JavaScript文章/60.判断是否为移动端浏览器.md
+++ b/docs/01.前端/25.JavaScript文章/60.判断是否为移动端浏览器.md
@ -1,6 +1,6 @@
 ---
 title: 判断是否为移动端浏览器
-date: 2020-01-04
+date: 2020-01-04 15:25:11
 permalink: /pages/40f623be692cf8bc
 ---
 # 判断是否为移动端浏览器
--- a/docs/01.前端/25.JavaScript文章/70.将一维数组按指定长度转为二维数组.md
+++ b/docs/01.前端/25.JavaScript文章/70.将一维数组按指定长度转为二维数组.md
@ -1,6 +1,6 @@
 ---
 title: 将一维数组按指定长度转为二维数组
-date: 2020-02-23
+date: 2020-02-23 13:49:31
 permalink: /pages/f1acb712033ac8da
 ---
 # 将一维数组按指定长度转为二维数组
--- a/docs/01.前端/25.JavaScript文章/80.防抖与节流函数.md
+++ b/docs/01.前端/25.JavaScript文章/80.防抖与节流函数.md
@ -1,6 +1,6 @@
 ---
 title: 防抖与节流函数
-date: 2020-02-29
+date: 2020-02-29 15:07:47
 permalink: /pages/0f6a0ac99b62ede5
 ---
 # 防抖与节流函数
--- a/docs/01.前端/30.Vue文章/10.Vue项目开发前的一些准备工作.md
+++ b/docs/01.前端/30.Vue文章/10.Vue项目开发前的一些准备工作.md
@ -1,6 +1,6 @@
 ---
 title: Vue项目开发前的一些准备工作
-date: 2020-02-21
+date: 2020-02-21 14:40:19
 permalink: /pages/802a1ca6f7b71c59
 ---
 # Vue项目开发前的一些准备工作
--- a/docs/01.前端/30.Vue文章/20.Vue
+++ b/docs/01.前端/30.Vue文章/20.Vue
@ -1,6 +1,6 @@
 ---
 title: Vue CLi3 修改webpack配置
-date: 2020-02-22
+date: 2020-02-22 15:00:36
 permalink: /pages/5d463fbdb172d43b
 ---
 # Vue CLi3 修改webpack配置
--- a/docs/01.前端/30.Vue文章/30.Vue中的scoped和scoped穿透.md
+++ b/docs/01.前端/30.Vue文章/30.Vue中的scoped和scoped穿透.md
@ -1,6 +1,6 @@
 ---
 title: Vue中的scoped和scoped穿透
-date: 2020-02-23
+date: 2020-02-23 10:54:23
 permalink: /pages/c80d2751cf1f4268
 ---
 # Vue中的scoped和scoped穿透
--- a/docs/01.前端/30.Vue文章/40.Vue项目使用mock数据的几种方式.md
+++ b/docs/01.前端/30.Vue文章/40.Vue项目使用mock数据的几种方式.md
@ -1,6 +1,6 @@
 ---
 title: Vue项目使用mock数据的几种方式
-date: 2020-02-26
+date: 2020-02-26 14:06:58
 permalink: /pages/bd1af2f75fd361fc
 ---
 # Vue项目使用mock数据的几种方式
--- a/docs/02.页面/10.HTML/10.常用meta整理.md
+++ b/docs/02.页面/10.HTML/10.常用meta整理.md
@ -1,6 +1,6 @@
 ---
 title: 常用meta整理
-date: 2020-02-21
+date: 2020-02-21 12:20:10
 permalink: /pages/8309a5b876fc95e3
 ---
 # 常用meta整理
--- a/docs/02.页面/20.CSS/01.flex布局语法.md
+++ b/docs/02.页面/20.CSS/01.flex布局语法.md
@ -1,6 +1,6 @@
 ---
 title: flex布局语法
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/0a83b083bdf257cb
 ---
 # flex布局语法
--- a/docs/02.页面/20.CSS/02.flex布局案例-基础.md
+++ b/docs/02.页面/20.CSS/02.flex布局案例-基础.md
@ -1,6 +1,6 @@
 ---
 title: flex布局案例-基础
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/ea6db1530c42ad51
 ---
 # flex布局案例-基础
--- a/docs/02.页面/20.CSS/03.flex布局案例-骰子.md
+++ b/docs/02.页面/20.CSS/03.flex布局案例-骰子.md
@ -1,6 +1,6 @@
 ---
 title: flex布局案例-骰子
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/eff61bc8b4f4695d
 ---
 # flex布局案例-骰子
--- a/docs/02.页面/20.CSS/04.flex布局案例-圣杯布局.md
+++ b/docs/02.页面/20.CSS/04.flex布局案例-圣杯布局.md
@ -1,6 +1,6 @@
 ---
 title: flex布局案例-圣杯布局
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/df9e7c7214fa5046
 ---
 # flex布局案例-圣杯布局
--- a/docs/02.页面/20.CSS/05.flex布局案例-网格布局.md
+++ b/docs/02.页面/20.CSS/05.flex布局案例-网格布局.md
@ -1,6 +1,6 @@
 ---
 title: flex布局案例-网格布局
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/85b5a3fe218a34b7
 ---
 # flex布局案例-网格布局
--- a/docs/02.页面/20.CSS/06.flex布局案例-输入框布局.md
+++ b/docs/02.页面/20.CSS/06.flex布局案例-输入框布局.md
@ -1,6 +1,6 @@
 ---
 title: flex布局案例-输入框布局
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/05cc577fb51c7998
 ---
 # flex布局案例-输入框布局
--- a/docs/02.页面/20.CSS/07.CSS3之transform过渡.md
+++ b/docs/02.页面/20.CSS/07.CSS3之transform过渡.md
@ -1,6 +1,6 @@
 ---
 title: CSS3之transform过渡
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/02d7f59d98d87409
 ---
 # CSS3之transform过渡
--- a/docs/02.页面/20.CSS/08.CSS3之animation动画.md
+++ b/docs/02.页面/20.CSS/08.CSS3之animation动画.md
@ -1,6 +1,6 @@
 ---
 title: CSS3之animation动画
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/c2c0432138f6e042
 ---
 # CSS3之animation动画
--- a/docs/02.页面/20.CSS/20.「布局技巧」图片未加载前自动撑开元素高度.md
+++ b/docs/02.页面/20.CSS/20.「布局技巧」图片未加载前自动撑开元素高度.md
@ -1,6 +1,6 @@
 ---
 title: 「布局技巧」图片未加载前自动撑开元素高度
-date: 2020-02-22
+date: 2020-02-22 16:37:10
 permalink: /pages/3d52574260725aea
 ---
 # 「布局技巧」图片未加载前自动撑开元素高度
--- a/docs/02.页面/20.CSS/30.文字在一行或两行时超出显示省略号.md
+++ b/docs/02.页面/20.CSS/30.文字在一行或两行时超出显示省略号.md
@ -1,6 +1,6 @@
 ---
 title: 文字在一行或两行时超出显示省略号
-date: 2020-02-23
+date: 2020-02-23 15:07:08
 permalink: /pages/42b66999cc27dc25
 ---
 # 文字在一行或两行时超出显示省略号
--- a/docs/02.页面/20.CSS/35.从box-sizing属性入手，了解盒子模型.md
+++ b/docs/02.页面/20.CSS/35.从box-sizing属性入手，了解盒子模型.md
@ -1,6 +1,6 @@
 ---
 title: 从box-sizing属性入手，了解盒子模型
-date: 2020-02-27
+date: 2020-02-27 17:08:48
 permalink: /pages/20a978023139589d
 ---
 # 从box-sizing属性入手，了解盒子模型
--- a/docs/02.页面/25.stylus/10.混入(Mixins).md
+++ b/docs/02.页面/25.stylus/10.混入(Mixins).md
@ -1,7 +1,7 @@
 ---
-title: 混合(Mixins)
-date: 2020-02-23
-permalink: /pages/bc1fe93547956f88
+title: 混入(Mixins)
+date: 2020-02-23 15:47:03
+permalink: /pages/9f15c1a281d8bedb
 ---
 # stylus混入(Mixins)

--- a/docs/03.技术/01.技术文档/01.Git使用手册.md
+++ b/docs/03.技术/01.技术文档/01.Git使用手册.md
@ -1,6 +1,6 @@
 ---
 title: Git使用手册
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/9a7ee40fc232253e
 ---

--- a/docs/03.技术/01.技术文档/02.Markdown使用教程.md
+++ b/docs/03.技术/01.技术文档/02.Markdown使用教程.md
@ -1,6 +1,6 @@
 ---
 title: Markdown使用教程
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/ad247c4332211551
 ---
 # Markdown使用教程
--- a/docs/03.技术/01.技术文档/03.npm常用命令.md
+++ b/docs/03.技术/01.技术文档/03.npm常用命令.md
@ -1,6 +1,6 @@
 ---
 title: npm常用命令
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/61f2f95fd7da14fd
 ---
 # npm常用命令
--- a/docs/03.技术/01.技术文档/04.yaml语言教程.md
+++ b/docs/03.技术/01.技术文档/04.yaml语言教程.md
@ -1,6 +1,6 @@
 ---
 title: yaml语言教程
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/4e8444e2d534d14f
 ---
 # yaml语言教程
--- a/docs/03.技术/02.GitHub/01.GitHub高级搜索技巧.md
+++ b/docs/03.技术/02.GitHub/01.GitHub高级搜索技巧.md
@ -1,6 +1,6 @@
 ---
 title: GitHub高级搜索技巧
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/4c778760be26d8b3
 ---
 # GitHub高级搜索技巧	
--- a/docs/03.技术/02.GitHub/02.GitHub
+++ b/docs/03.技术/02.GitHub/02.GitHub
@ -1,6 +1,6 @@
 ---
 title: GitHub Actions 实现自动部署静态博客
-date: 2019-12-27
+date: 2019-12-27 11:44:41
 permalink: /pages/6b9d359ec5aa5019
 ---
 #  GitHub Actions 实现自动部署静态博客
--- a/定时运行代码：每天定时百度链接推送.md
+++ b/定时运行代码：每天定时百度链接推送.md
@ -1,6 +1,6 @@
 ---
 title: GitHub Actions 定时运行代码：每天定时百度链接推送
-date: 2019-12-30
+date: 2019-12-30 21:23:00
 permalink: /pages/f44d2f9ad04ab8d3
 ---
 #  GitHub Actions 定时运行代码：每天定时百度链接推送
--- a/docs/03.技术/03.Nodejs/01.nodejs递归读取所有文件.md
+++ b/docs/03.技术/03.Nodejs/01.nodejs递归读取所有文件.md
@ -1,6 +1,6 @@
 ---
 title: nodejs递归读取所有文件
-date: 2019-12-26
+date: 2019-12-26 15:57:32
 permalink: /pages/117708e0af7f0bd9
 ---
 # nodejs递归读取所有文件
--- a/docs/03.技术/04.博客搭建/01.解决百度无法收录搭建在GitHub上的个人博客的问题.md
+++ b/docs/03.技术/04.博客搭建/01.解决百度无法收录搭建在GitHub上的个人博客的问题.md
@ -1,6 +1,6 @@
 ---
 title: 解决百度无法收录搭建在GitHub上的个人博客的问题
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/41f87d890d0a02af
 ---
 # 解决百度无法收录搭建在GitHub上的静态博客的问题
--- a/docs/03.技术/04.博客搭建/02.使用Gitalk实现静态博客无后台评论系统.md
+++ b/docs/03.技术/04.博客搭建/02.使用Gitalk实现静态博客无后台评论系统.md
@ -1,6 +1,6 @@
 ---
 title: 使用Gitalk实现静态博客无后台评论系统
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/1da0bf9a988eafe5
 ---
 # 使用Gitalk实现静态博客无后台评论系统
--- a/打造稳定快速、高效免费图床.md
+++ b/打造稳定快速、高效免费图床.md
@ -1,6 +1,6 @@
 ---
 title: GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床
-date: 2020-01-03
+date: 2020-01-03 12:55:43
 permalink: /pages/a5f73af5185fdf0a
 ---
 # GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床
--- a/docs/04.其他/01.学习/02.提高学习效率的策略.md
+++ b/docs/04.其他/01.学习/02.提高学习效率的策略.md
@ -1,6 +1,6 @@
 ---
 title: 提高学习效率的策略
-date: 2020-01-04
+date: 2020-01-04 11:54:14
 permalink: /pages/a8692ab3bdcb4588
 ---
 # 提高学习效率的策略
--- a/docs/04.其他/01.学习/03.提高记忆的技巧.md
+++ b/docs/04.其他/01.学习/03.提高记忆的技巧.md
@ -1,6 +1,6 @@
 ---
 title: 提高记忆的技巧
-date: 2020-01-03
+date: 2020-01-03 14:34:48
 permalink: /pages/996822b2a2ca6e3b
 ---
 # 提高记忆的技巧
--- a/docs/04.其他/01.学习/04.自律小建议.md
+++ b/docs/04.其他/01.学习/04.自律小建议.md
@ -1,6 +1,6 @@
 ---
 title: 自律小建议
-date: 2020-01-03
+date: 2020-01-03 14:35:18
 permalink: /pages/c3f302a03c8daf79
 ---
 # 自律小建议
--- a/docs/04.其他/01.学习/05.处理问题的思路.md
+++ b/docs/04.其他/01.学习/05.处理问题的思路.md
@ -1,6 +1,6 @@
 ---
 title: 处理问题的思路
-date: 2020-01-03
+date: 2020-01-03 14:36:02
 permalink: /pages/9ba2b8fb13de1957
 ---
 # 处理问题的思路
--- a/docs/04.其他/03.面试/01.面试问题集锦.md
+++ b/docs/04.其他/03.面试/01.面试问题集锦.md
@ -1,6 +1,6 @@
 ---
 title: 面试问题集锦
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/aea6571b7a8bae86
 ---
 # 面试问题集锦
--- a/docs/04.其他/04.英语/01.英语基础.md
+++ b/docs/04.其他/04.英语/01.英语基础.md
@ -1,6 +1,6 @@
 ---
 title: 英语基础
-date: 2020-01-13
+date: 2020-01-13 11:55:53
 permalink: /pages/6f9525eecdd51d5a
 ---
 # 英语基础
--- a/docs/04.其他/05.心情杂货/01.一个完美主义者的自我救赎.md
+++ b/docs/04.其他/05.心情杂货/01.一个完美主义者的自我救赎.md
@ -1,6 +1,6 @@
 ---
 title: 一个完美主义者的自我救赎
-date: 2020-01-16
+date: 2020-01-16 15:15:27
 permalink: /pages/2d615df9a36a98ed
 ---
 # 一个完美主义者的自我救赎
--- a/docs/04.其他/97.学习网站.md
+++ b/docs/04.其他/97.学习网站.md
@ -1,6 +1,6 @@
 ---
 title: 学习网站
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/2e9ba3fa6e1ed0e9
 article: false
 ---
--- a/docs/04.其他/98.在线工具.md
+++ b/docs/04.其他/98.在线工具.md
@ -1,6 +1,6 @@
 ---
 title: 在线工具
-date: 2020-01-12
+date: 2020-01-12 11:39:41
 permalink: /pages/9c2232288caaa8ec
 article: false
 ---
@ -13,11 +13,26 @@ article: false
 | codepen     | <https://codepen.io>      | 在线代码编辑与演示       |
 | codesandbox | <https://codesandbox.io/> | 用于快速Web开发的在线IDE |

-## 字体图标
+## UI

 | 名称     | 网址                              | 描述               |
-| -------- | -------------------------- | ------------------ |
+| -------- | --------------------------------- | ------------------ |
 | iconfont | <https://www.iconfont.cn/>        | 阿里巴巴矢量图标库 |
+| undraw   | <https://undraw.co/illustrations> | 免费的矢量插画     |
+
+
+
+## Chrome 插件
+
+| 名称         | 网址                              | 描述     |
+| ------------ | --------------------------------- | -------- |
+| 谷歌访问助手 | <https://github.com/haotian-wang/google-access-helper> | 用于访问Google搜索、Chrome商店 |
+| SetupVPN | Chrome商店 | 科学上网 |
+| Hoxx VPN Proxy | Chrome商店 | 科学上网 |
+| skyZIP™ Proxy | Chrome商店 | 科学上网 |
+| 集装箱 | Chrome商店 | 科学上网 |
+
+

 ## Emoji表情

--- a/docs/04.其他/99.友情链接.md
+++ b/docs/04.其他/99.友情链接.md
@ -1,6 +1,6 @@
 ---
 title: 友情链接
-date: 2019-12-25
+date: 2019-12-25 14:27:01
 permalink: /pages/844eea1b2387fb96
 article: false
 ---
--- a/docs/05.关于/01.关于.md
+++ b/docs/05.关于/01.关于.md
@ -1,12 +1,14 @@
 ---
 title: 关于
-date: 2019-12-25
+date: 2019-12-25 ‏‎14:27:01
 permalink: /pages/81d9f505441078e0
 sidebar: false
 article: false
 ---
+
 # 关于

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


@ -15,6 +17,7 @@ article: false
 <!-- <img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200217210849.gif"> -->
 <img src='https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg' alt='本人照片' style="width:106px;">

+
 [更新日志](https://github.com/xugaoyi/blog/commits/master)

 ## :email: 联系
--- a/docs/06.最新/01.最新.md
+++ b/docs/06.最新/01.最新.md
@ -1,12 +1,36 @@
 ---
 title: 最新
-date: 2019-12-31
+date: 2019-12-31 13:49:34
 permalink: /pages/8818d4830dac5e2a
 sidebar: false
 article: false # 不显示最近更新栏，以及不参与到最近更新文章数据计算
+comment: false
 ---

-# 最近更新
+<!-- <div class="tags">
+  {{getTags}}
+  <span class="active">全部</span>
+  <span>JavaScript文章</span>
+  <span>Vue文章</span>
+  <span>《JavaScript教程》笔记</span>
+  <span>《ES6 教程》笔记</span>
+  <span>JavaScript文章</span>
+  <span>Vue文章</span>
+  <span>《JavaScript教程》笔记</span>
+  <span>《ES6 教程》笔记</span>
+  <span>JavaScript文章</span>
+  <span>Vue文章</span>
+  <span>《JavaScript教程》笔记</span>
+  <span>《ES6 教程》笔记</span>
+  <span>JavaScript文章</span>
+  <span>Vue文章</span>
+  <span>《JavaScript教程》笔记</span>
+  <span>《ES6 教程》笔记</span>
+  <span>JavaScript文章</span>
+  <span>Vue文章</span>
+  <span>《JavaScript教程》笔记</span>
+  <span>《ES6 教程》笔记</span>
+</div> -->

 <ul class="page-guide-ul">
  <li 
@ -25,15 +49,16 @@ article: false # 不显示最近更新栏，以及不参与到最近更新文章
 </div>

 <script>
-import { getTopKPosts } from '../.vuepress/theme/util/getTopKPosts'
+import { getTopKPosts, getPagesList } from '../.vuepress/theme/util/getTopKPosts'

 export default {
  data() {
    return {
+      pagesList: {},
      step: 20,
      posts: [],
      page: 1,
-      num: 0,
+      num: 0, // 页面数量
      btnInfo: '加载更多',
      showBtn: true,
      timeout: null,
@ -46,6 +71,9 @@ export default {
  },

  computed: {
+    getTags() {
+      getPagesList(this.posts)
+    },
    topPublishPosts() {
      // return this.getTopKPosts(this.page * this.step)
      return getTopKPosts(this.posts, this.page * this.step)
@ -53,6 +81,10 @@ export default {
  },

  methods: {
+   
+
+
+
    // getTopKPosts(num) { // 文章数据处理
    //   const re = /.*\/(.*?)\.(html|md)/
    //   return this.posts
@ -103,6 +135,26 @@ export default {
 </script>

 <style scoped lang="stylus" rel="stylesheet/stylus">
+.tags
+  margin 30px 0
+  span
+    vertical-align: middle;
+    margin: 4px 4px 10px;
+    padding: 5px 8px;
+    display: inline-block;
+    cursor: pointer;
+    border-radius: .25rem;
+    background: #E15B64;
+    color: #fff;
+    line-height: 13px;
+    font-size: 13px;
+    box-shadow: var(--box-shadow);
+    transition: all .5s;
+    &.active
+      transform: scale(1.2);
+    &:not(.active):hover
+      transform: scale(1.1); 
+
 .page-guide-ul {
  padding-left: 0;
 }
--- a/教程》笔记/01.ECMAScript
+++ b/教程》笔记/01.ECMAScript
@ -1,6 +1,6 @@
 ---
 title: ECMAScript 6 简介
-date: 2020-01-12
+date: 2020-01-12 15:45:35
 permalink: /pages/f344d070a1031ef7
 ---
 > 说明：本章内容为博主在原教程基础上添加自己的学习笔记，来源<http://es6.ruanyifeng.com/>，教程版权归原作者所有。
--- a/教程》笔记/02.let
+++ b/教程》笔记/02.let
@ -1,6 +1,6 @@
 ---
 title: let 和 const 命令
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/c1edd70a6b7c7872
 ---
 # let 和 const 命令
--- a/教程》笔记/03.变量的解构赋值.md
+++ b/教程》笔记/03.变量的解构赋值.md
@ -1,6 +1,6 @@
 ---
 title: 变量的解构赋值
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/b1ab10a62f7564da
 ---
 # 变量的解构赋值
--- a/教程》笔记/04.字符串的扩展.md
+++ b/教程》笔记/04.字符串的扩展.md
@ -1,6 +1,6 @@
 ---
 title: 字符串的扩展
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/ca89eca8adeba5f4
 ---
 # 字符串的扩展
--- a/教程》笔记/05.字符串的新增方法.md
+++ b/教程》笔记/05.字符串的新增方法.md
@ -1,6 +1,6 @@
 ---
 title: 字符串的新增方法
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/a650b4a0ebfc9350
 ---
 # 字符串的新增方法
--- a/教程》笔记/06.正则的扩展.md
+++ b/教程》笔记/06.正则的扩展.md
@ -1,6 +1,6 @@
 ---
 title: 正则的扩展
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/0473261a6ab0ee8c
 ---
 # 正则的扩展
--- a/教程》笔记/07.数值的扩展.md
+++ b/教程》笔记/07.数值的扩展.md
@ -1,6 +1,6 @@
 ---
 title: 数值的扩展
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/5dfea9a0f2d1a392
 ---
 # 数值的扩展
--- a/教程》笔记/08.函数的扩展.md
+++ b/教程》笔记/08.函数的扩展.md
@ -1,6 +1,6 @@
 ---
 title: 函数的扩展
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/8ed309d668b20264
 ---
 # 函数的扩展
--- a/教程》笔记/09.数组的扩展.md
+++ b/教程》笔记/09.数组的扩展.md
@ -1,6 +1,6 @@
 ---
 title: 数组的扩展
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/e34009d60d8bc4b2
 ---
 # 数组的扩展
--- a/教程》笔记/10.对象的扩展.md
+++ b/教程》笔记/10.对象的扩展.md
@ -1,6 +1,6 @@
 ---
 title: 对象的扩展
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/b5e3e0a0ff6e9c25
 ---
 # 对象的扩展
--- a/教程》笔记/11.对象的新增方法.md
+++ b/教程》笔记/11.对象的新增方法.md
@ -1,6 +1,6 @@
 ---
 title: 对象的新增方法
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/e85e68947502cf90
 ---
 # 对象的新增方法
--- a/教程》笔记/12.Symbol.md
+++ b/教程》笔记/12.Symbol.md
@ -1,6 +1,6 @@
 ---
 title: Symbol
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/02c86eb2792f3262
 ---
 # Symbol
--- a/教程》笔记/13.Set
+++ b/教程》笔记/13.Set
@ -1,6 +1,6 @@
 ---
 title: Set 和 Map 数据结构
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/0c21dae358fca16b
 ---
 # Set 和 Map 数据结构
--- a/教程》笔记/14.Proxy.md
+++ b/教程》笔记/14.Proxy.md
@ -1,6 +1,6 @@
 ---
 title: Proxy
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/f56ec2ab97d60483
 ---
 # Proxy
--- a/教程》笔记/15.Reflect.md
+++ b/教程》笔记/15.Reflect.md
@ -1,6 +1,6 @@
 ---
 title: Reflect
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/74de3e45e4491e95
 ---
 # Reflect
--- a/教程》笔记/16.Promise
+++ b/教程》笔记/16.Promise
@ -1,6 +1,6 @@
 ---
 title: Promise 对象
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/2810ae8985e9bd52
 ---
 # Promise 对象
--- a/教程》笔记/17.Iterator
+++ b/教程》笔记/17.Iterator
@ -1,6 +1,6 @@
 ---
 title: Iterator 和 for-of 循环
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/48df907ad3570f3d
 ---
 # Iterator 和 for...of 循环
--- a/教程》笔记/18.Generator
+++ b/教程》笔记/18.Generator
@ -1,6 +1,6 @@
 ---
 title: Generator 函数的语法
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/718b48ed9ce0adce
 ---
 # Generator 函数的语法
--- a/教程》笔记/19.Generator
+++ b/教程》笔记/19.Generator
@ -1,6 +1,6 @@
 ---
 title: Generator 函数的异步应用
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/75af7031eb66847b
 ---
 # Generator 函数的异步应用
--- a/教程》笔记/20.async
+++ b/教程》笔记/20.async
@ -1,6 +1,6 @@
 ---
 title: async 函数
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/3777253e65bac487
 ---
 # async 函数
--- a/教程》笔记/21.Class
+++ b/教程》笔记/21.Class
@ -1,6 +1,6 @@
 ---
 title: Class 的基本语法
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/e831e1593c82bbe0
 ---
 # Class 的基本语法
--- a/教程》笔记/22.Class
+++ b/教程》笔记/22.Class
@ -1,6 +1,6 @@
 ---
 title: Class 的继承
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/83f8c3a0cd87dd83
 ---
 # Class 的继承
--- a/教程》笔记/23.Module
+++ b/教程》笔记/23.Module
@ -1,6 +1,6 @@
 ---
 title: Module 的语法
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/efe2fb04eb8ac5fb
 ---
 # Module 的语法
--- a/教程》笔记/24.Module
+++ b/教程》笔记/24.Module
@ -1,6 +1,6 @@
 ---
 title: Module 的加载实现
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/a79ca2e64ceae213
 ---
 # Module 的加载实现
--- a/教程》笔记/25.编程风格.md
+++ b/教程》笔记/25.编程风格.md
@ -1,6 +1,6 @@
 ---
 title: 编程风格
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/984bf549204bb266
 ---
 # 编程风格
--- a/教程》笔记/26.读懂
+++ b/教程》笔记/26.读懂
@ -1,6 +1,6 @@
 ---
 title: 读懂 ECMAScript 规格
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/32c35f7651d6e58e
 ---
 # 读懂 ECMAScript 规格
--- a/教程》笔记/27.异步遍历器.md
+++ b/教程》笔记/27.异步遍历器.md
@ -1,6 +1,6 @@
 ---
 title: 异步遍历器
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/16121351be68691b
 ---
 # 异步遍历器
--- a/教程》笔记/28.ArrayBuffer.md
+++ b/教程》笔记/28.ArrayBuffer.md
@ -1,6 +1,6 @@
 ---
 title: ArrayBuffer
-date: 2020-01-12
+date: 2020-02-09 16:00:29
 permalink: /pages/a2ba314746bfdbdd
 ---
 # ArrayBuffer
--- a/教程》笔记/29.最新提案.md
+++ b/教程》笔记/29.最新提案.md
@ -1,6 +1,6 @@
 ---
 title: 最新提案
-date: 2020-01-12
+date: 2020-02-09 16:00:30
 permalink: /pages/7188882b8d65af1b
 ---
 # 最新提案
--- a/教程》笔记/30.装饰器.md
+++ b/教程》笔记/30.装饰器.md
@ -1,6 +1,6 @@
 ---
 title: 装饰器
-date: 2020-01-12
+date: 2020-02-09 16:00:30
 permalink: /pages/e97bc1e5626b082c
 ---
 # 装饰器
--- a/教程》笔记/31.函数式编程.md
+++ b/教程》笔记/31.函数式编程.md
@ -1,6 +1,6 @@
 ---
 title: 函数式编程
-date: 2020-01-12
+date: 2020-02-09 16:00:30
 permalink: /pages/1cf50330655efc69
 ---
 # 函数式编程
--- a/教程》笔记/32.Mixin.md
+++ b/教程》笔记/32.Mixin.md
@ -1,6 +1,6 @@
 ---
 title: Mixin
-date: 2020-01-12
+date: 2020-02-09 16:00:30
 permalink: /pages/6a8e2dc558da1b39
 ---
 # Mixin
--- a/教程》笔记/33.SIMD.md
+++ b/教程》笔记/33.SIMD.md
@ -1,6 +1,6 @@
 ---
 title: SIMD
-date: 2020-01-12
+date: 2020-02-09 16:00:30
 permalink: /pages/8e8f80f69b775a56
 ---
 # SIMD
--- a/教程》笔记/34.参考链接.md
+++ b/教程》笔记/34.参考链接.md
@ -1,6 +1,6 @@
 ---
 title: 参考链接
-date: 2020-01-12
+date: 2020-02-09 16:00:30
 permalink: /pages/ea6f3b870f6dab69
 ---
 # 参考链接
--- a/docs/《JavaScript教程》笔记/01.基础.md
+++ b/docs/《JavaScript教程》笔记/01.基础.md
@ -1,6 +1,6 @@
 ---
 title: 基础
-date: 2020-01-12
+date: 2020-01-12 11:49:16
 permalink: /pages/0796ba76b4b55368
 ---

--- a/docs/《JavaScript教程》笔记/02.内置对象.md
+++ b/docs/《JavaScript教程》笔记/02.内置对象.md
@ -1,6 +1,6 @@
 ---
 title: 内置对象
-date: 2020-01-12
+date: 2020-01-12 11:49:16
 permalink: /pages/74d2ab3fbfeaaa68
 ---

--- a/docs/《JavaScript教程》笔记/03.面向对象.md
+++ b/docs/《JavaScript教程》笔记/03.面向对象.md
@ -1,6 +1,6 @@
 ---
 title: 面向对象
-date: 2020-01-12
+date: 2020-01-12 11:49:16
 permalink: /pages/659b5af5e2e704e0
 ---

--- a/docs/《JavaScript教程》笔记/04.异步操作.md
+++ b/docs/《JavaScript教程》笔记/04.异步操作.md
@ -1,6 +1,6 @@
 ---
 title: 异步操作
-date: 2020-01-12
+date: 2020-01-12 11:49:16
 permalink: /pages/d61b1cb4cdac1f63
 ---

--- a/docs/《JavaScript教程》笔记/05.DOM.md
+++ b/docs/《JavaScript教程》笔记/05.DOM.md
@ -1,6 +1,6 @@
 ---
 title: DOM
-date: 2020-01-12
+date: 2020-01-12 11:49:16
 permalink: /pages/7d961b8030c6099e
 ---

--- a/docs/《JavaScript教程》笔记/06.事件.md
+++ b/docs/《JavaScript教程》笔记/06.事件.md
@ -1,6 +1,6 @@
 ---
 title: 事件
-date: 2020-01-12
+date: 2020-01-12 11:49:16
 permalink: /pages/10b2761db5a8e089
 ---

--- a/docs/《JavaScript教程》笔记/07.浏览器模型.md
+++ b/docs/《JavaScript教程》笔记/07.浏览器模型.md
@ -1,6 +1,6 @@
 ---
 title: 浏览器模型
-date: 2020-01-12
+date: 2020-01-12 11:49:16
 permalink: /pages/bab4930124ad2c10
 ---
 # 浏览器模型
--- a/TypeScript/01.简介.md
+++ b/TypeScript/01.简介.md
@ -1,6 +1,6 @@
 ---
 title: 简介
-date: 2020-01-05
+date: 2020-01-05 10:15:07
 permalink: /pages/e05dce83e5129785
 ---
 # 简介
--- a/TypeScript/02.安装
+++ b/TypeScript/02.安装
@ -1,6 +1,6 @@
 ---
 title: 安装 TypeScript
-date: 2020-01-05
+date: 2020-01-05 10:15:07
 permalink: /pages/064e0f7b6b6142c8
 ---
 # 安装 TypeScript
--- a/TypeScript/03.编写第一个
+++ b/TypeScript/03.编写第一个
@ -1,6 +1,6 @@
 ---
 title: 编写第一个 TypeScript 程序
-date: 2020-01-05
+date: 2020-01-05 10:15:07
 permalink: /pages/c85249f40e7a3517
 ---
 # 编写第一个 TypeScript 程序
--- a/常用语法/01.基础类型.md
+++ b/常用语法/01.基础类型.md
@ -1,6 +1,6 @@
 ---
 title: 基础类型
-date: 2020-01-05
+date: 2020-01-05 10:17:47
 permalink: /pages/28672e2743bbc3a7
 ---
 # 基础类型
--- a/Show More
+++ b/Show More