优化：细节优化 && 自动生成永久链接代码优化
This commit is contained in:
xugaoyi
parent
121180f5bf
commit
4339704279
|
|
@ -6,7 +6,7 @@ module.exports = {
|
|||
description: 'web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 <meta> 标签渲染到当前页面的 HTML 中
|
||||
// base: '/blog/', //默认'/' || github仓库名'/<仓库名>/',
|
||||
head: [ // 注入到当前页面<head> 中的标签，格式[tagName, { attrName: attrValue }, innerHTML?]
|
||||
['link', { rel: 'icon', href: '/img/EB-logo.png' }], //favicons，资源放在public文件夹
|
||||
['link', { rel: 'icon', href: '/img/favicon.ico' }], //favicons，资源放在public文件夹
|
||||
['meta', { name: 'keywords', content: '前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown'}],
|
||||
['meta', { name: 'baidu-site-verification', content: '7F55weZDDc'}],
|
||||
['meta', { name: 'theme-color', content: '#11a8cd'}], // 移动浏览器主题颜色
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ module.exports = [
|
|||
{text: '博客搭建', link: '/pages/41f87d890d0a02af/'},
|
||||
]
|
||||
},
|
||||
{text: '其他',
|
||||
{text: '更多',
|
||||
items: [
|
||||
{text: '学习', link: '/pages/a8692ab3bdcb4588/'},
|
||||
{text: '面试', link: '/pages/aea6571b7a8bae86/'},
|
||||
|
|
@ -40,8 +40,8 @@ module.exports = [
|
|||
{text: '友情链接', link: '/pages/844eea1b2387fb96/'},
|
||||
]
|
||||
},
|
||||
{text: '关于', link: '/pages/81d9f505441078e0/'},
|
||||
{text: '时间轴', link: '/pages/8818d4830dac5e2a/'},
|
||||
{text: '关于', link: '/about/'},
|
||||
{text: '时间轴', link: '/timeline/'},
|
||||
|
||||
// {text: '前端', link: '/01.前端/01.JavaScript/01.JavaScript中的名词概念'},
|
||||
// {text: '页面', link: '/02.页面/01.html-css/00.flex布局语法'},
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ module.exports = {
|
|||
|
||||
"/03.技术/": [{"title":"技术文档","collapsable":false,"children":[["01.技术文档/01.Git使用手册.md","Git使用手册"],["01.技术文档/02.Markdown使用教程.md","Markdown使用教程"],["01.技术文档/03.npm常用命令.md","npm常用命令"],["01.技术文档/04.yaml语言教程.md","yaml语言教程"]]},{"title":"GitHub","collapsable":false,"children":[["02.GitHub/01.GitHub高级搜索技巧.md","GitHub高级搜索技巧"],["02.GitHub/02.GitHub Actions 实现自动部署静态博客.md","GitHub Actions 实现自动部署静态博客"],["02.GitHub/03.GitHub Actions 定时运行代码：每天定时百度链接推送.md","GitHub Actions 定时运行代码：每天定时百度链接推送"]]},{"title":"Nodejs","collapsable":false,"children":[["03.Nodejs/01.nodejs递归读取所有文件.md","nodejs递归读取所有文件"]]},{"title":"博客搭建","collapsable":false,"children":[["04.博客搭建/01.解决百度无法收录搭建在GitHub上的个人博客的问题.md","解决百度无法收录搭建在GitHub上的个人博客的问题"],["04.博客搭建/02.使用Gitalk实现静态博客无后台评论系统.md","使用Gitalk实现静态博客无后台评论系统"],["04.博客搭建/03.GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床.md","GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床"]]}],
|
||||
|
||||
"/04.其他/": [{"title":"学习","collapsable":false,"children":[["01.学习/02.提高学习效率的策略.md","提高学习效率的策略"],["01.学习/03.提高记忆的技巧.md","提高记忆的技巧"],["01.学习/04.自律小建议.md","自律小建议"],["01.学习/05.处理问题的思路.md","处理问题的思路"]]},{"title":"面试","collapsable":false,"children":[["03.面试/01.面试问题集锦.md","面试问题集锦"]]},{"title":"英语","collapsable":false,"children":[["04.英语/01.英语基础.md","英语基础"]]},{"title":"心情杂货","collapsable":false,"children":[["05.心情杂货/01.一个完美主义者的自我救赎.md","一个完美主义者的自我救赎"]]},["97.学习网站.md","学习网站"],["98.在线工具.md","在线工具"],["99.友情链接.md","友情链接"]],
|
||||
"/04.更多/": [{"title":"学习","collapsable":false,"children":[["01.学习/02.提高学习效率的策略.md","提高学习效率的策略"],["01.学习/03.提高记忆的技巧.md","提高记忆的技巧"],["01.学习/04.自律小建议.md","自律小建议"],["01.学习/05.处理问题的思路.md","处理问题的思路"]]},{"title":"面试","collapsable":false,"children":[["03.面试/01.面试问题集锦.md","面试问题集锦"]]},{"title":"英语","collapsable":false,"children":[["04.英语/01.英语基础.md","英语基础"]]},{"title":"心情杂货","collapsable":false,"children":[["05.心情杂货/01.一个完美主义者的自我救赎.md","一个完美主义者的自我救赎"]]},["97.学习网站.md","学习网站"],["98.在线工具.md","在线工具"],["99.友情链接.md","友情链接"]],
|
||||
|
||||
"/05.关于/": [["01.关于.md","关于"]],
|
||||
"/about/": [["01.about.md","about"]],
|
||||
|
||||
"/06.最新/": [["01.最新.md","最新"]],
|
||||
"/timeline/": [["01.timeline.md","timeline"],["02.test22.md","test22"]],
|
||||
|
||||
"/《ES6 教程》笔记/": [{"title":"《ES6 教程》笔记","collapsable":false,"children":[]},["01.ECMAScript 6 简介.md","ECMAScript 6 简介"],["02.let 和 const 命令.md","let 和 const 命令"],["03.变量的解构赋值.md","变量的解构赋值"],["04.字符串的扩展.md","字符串的扩展"],["05.字符串的新增方法.md","字符串的新增方法"],["06.正则的扩展.md","正则的扩展"],["07.数值的扩展.md","数值的扩展"],["08.函数的扩展.md","函数的扩展"],["09.数组的扩展.md","数组的扩展"],["10.对象的扩展.md","对象的扩展"],["11.对象的新增方法.md","对象的新增方法"],["12.Symbol.md","Symbol"],["13.Set 和 Map 数据结构.md","Set 和 Map 数据结构"],["14.Proxy.md","Proxy"],["15.Reflect.md","Reflect"],["16.Promise 对象.md","Promise 对象"],["17.Iterator 和 for-of 循环.md","Iterator 和 for-of 循环"],["18.Generator 函数的语法.md","Generator 函数的语法"],["19.Generator 函数的异步应用.md","Generator 函数的异步应用"],["20.async 函数.md","async 函数"],["21.Class 的基本语法.md","Class 的基本语法"],["22.Class 的继承.md","Class 的继承"],["23.Module 的语法.md","Module 的语法"],["24.Module 的加载实现.md","Module 的加载实现"],["25.编程风格.md","编程风格"],["26.读懂 ECMAScript 规格.md","读懂 ECMAScript 规格"],["27.异步遍历器.md","异步遍历器"],["28.ArrayBuffer.md","ArrayBuffer"],["29.最新提案.md","最新提案"],["30.装饰器.md","装饰器"],["31.函数式编程.md","函数式编程"],["32.Mixin.md","Mixin"],["33.SIMD.md","SIMD"],["34.参考链接.md","参考链接"]],
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 614 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
|
|
@ -11,7 +11,7 @@
|
|||
<dl v-for="(item, index) in topPublishPosts" :key="index">
|
||||
<dd>{{'0' + (index + 1)}}</dd>
|
||||
<dt>
|
||||
<a :href="item.path"><div>{{item.title}}</div></a>
|
||||
<router-link :to="item.path"><div>{{item.title}}</div></router-link>
|
||||
<span>{{item.formatDay}}</span>
|
||||
</dt>
|
||||
</dl>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<dl>
|
||||
<dd></dd>
|
||||
<dt>
|
||||
<a href="/pages/8818d4830dac5e2a" class="more">更多文章></a>
|
||||
<router-link to="/timeline/" class="more">更多文章></router-link>
|
||||
</dt>
|
||||
</dl>
|
||||
</div>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getTopKPosts } from '../util/getTopKPosts'
|
||||
import { getTopKPosts } from '../util/getArticleDate'
|
||||
|
||||
export default {
|
||||
props: ['pageMark'],
|
||||
|
|
@ -42,44 +42,12 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
topPublishPosts() {
|
||||
// return this.getTopKPosts()
|
||||
return getTopKPosts(this.posts, 5)
|
||||
},
|
||||
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 && frontmatter.article !== false;
|
||||
// })
|
||||
// .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>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export function getPagesList(posts) {
|
|||
|
||||
// 对页面数据二次处理和排序
|
||||
const pages = posts.map(post => {
|
||||
const execs = re.exec(post.relativePath)
|
||||
// const execs = re.exec(post.relativePath)
|
||||
const date = new Date(post.frontmatter.date || post.lastUpdated)
|
||||
const pathArr = post.relativePath.split('/')
|
||||
|
||||
|
|
@ -75,13 +75,19 @@ export function getPagesList(posts) {
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export function getTopKPosts(posts, len) {
|
||||
return handlePageData(
|
||||
filterNotArticle(posts)
|
||||
).slice(0,len)
|
||||
return filterNotArticle(posts)
|
||||
.map(post => {
|
||||
const execs = re.exec(post.relativePath)
|
||||
return {
|
||||
...post,
|
||||
updateTimestamp: (new Date(post.frontmatter.date || post.lastUpdated)).getTime(), // 更新日期的时间戳
|
||||
filename: execs ? execs['1'] : '',
|
||||
formatDay: formatDate(new Date(post.frontmatter.date || post.lastUpdated))
|
||||
}
|
||||
})
|
||||
.sort((a, b) => b.updateTimestamp - a.updateTimestamp)
|
||||
.slice(0,len)
|
||||
}
|
||||
|
||||
// 过滤没有frontmatter数据的 和 非文章页面的
|
||||
|
|
@ -92,19 +98,6 @@ function filterNotArticle(posts){
|
|||
})
|
||||
}
|
||||
|
||||
// 页面数据的处理和排序
|
||||
function handlePageData(posts){
|
||||
return posts.map(post => {
|
||||
const execs = re.exec(post.relativePath)
|
||||
return {
|
||||
...post,
|
||||
updateTimestamp: (new Date(post.frontmatter.date || post.lastUpdated)).getTime(), // 更新日期的时间戳
|
||||
filename: execs ? execs['1'] : '',
|
||||
formatDay: formatDate(new Date(post.frontmatter.date || post.lastUpdated))
|
||||
}
|
||||
}).sort((a, b) => b.updateTimestamp - a.updateTimestamp)
|
||||
}
|
||||
|
||||
// 日期格式化
|
||||
function formatDate(date) {
|
||||
if (!(date instanceof Date)) {
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: JS随机打乱数组
|
||||
date: 2020-02-08 17:42:03
|
||||
permalink: /pages/40b4db2d38ba85f2
|
||||
title: "JS随机打乱数组"
|
||||
date: "2020-02-08 17:42:03"
|
||||
permalink: "/pages/40b4db2d38ba85f2"
|
||||
---
|
||||
# JS随机打乱数组
|
||||
|
||||
|
|
|
|||
|
|
@ -55,8 +55,6 @@ npm i <ModuleName1> <ModuleName2>
|
|||
-save # 简写-S，加入到生产依赖中
|
||||
-save-dev # 简写-D，加入到开发依赖中
|
||||
-g # 全局安装 将安装包放在 /usr/local 下或者你 node 的安装目录
|
||||
|
||||
# 安装方式参数可以省略，默认安装到开发依赖，即-D
|
||||
```
|
||||
|
||||
#### 查看
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: 提高学习效率的策略
|
||||
date: 2020-01-04 11:54:14
|
||||
permalink: /pages/a8692ab3bdcb4588
|
||||
title: "提高学习效率的策略"
|
||||
date: "2020-01-04 11:54:14"
|
||||
permalink: "/pages/a8692ab3bdcb4588"
|
||||
---
|
||||
# 提高学习效率的策略
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: 提高记忆的技巧
|
||||
date: 2020-01-03 14:34:48
|
||||
permalink: /pages/996822b2a2ca6e3b
|
||||
title: "提高记忆的技巧"
|
||||
date: "2020-01-03 14:34:48"
|
||||
permalink: "/pages/996822b2a2ca6e3b"
|
||||
---
|
||||
# 提高记忆的技巧
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: 自律小建议
|
||||
date: 2020-01-03 14:35:18
|
||||
permalink: /pages/c3f302a03c8daf79
|
||||
title: "自律小建议"
|
||||
date: "2020-01-03 14:35:18"
|
||||
permalink: "/pages/c3f302a03c8daf79"
|
||||
---
|
||||
# 自律小建议
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: 处理问题的思路
|
||||
date: 2020-01-03 14:36:02
|
||||
permalink: /pages/9ba2b8fb13de1957
|
||||
title: "处理问题的思路"
|
||||
date: "2020-01-03 14:36:02"
|
||||
permalink: "/pages/9ba2b8fb13de1957"
|
||||
---
|
||||
# 处理问题的思路
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: 面试问题集锦
|
||||
date: 2019-12-25 14:27:01
|
||||
permalink: /pages/aea6571b7a8bae86
|
||||
title: "面试问题集锦"
|
||||
date: "2019-12-25 14:27:01"
|
||||
permalink: "/pages/aea6571b7a8bae86"
|
||||
---
|
||||
# 面试问题集锦
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: 英语基础
|
||||
date: 2020-01-13 11:55:53
|
||||
permalink: /pages/6f9525eecdd51d5a
|
||||
title: "英语基础"
|
||||
date: "2020-01-13 11:55:53"
|
||||
permalink: "/pages/6f9525eecdd51d5a"
|
||||
---
|
||||
# 英语基础
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: 一个完美主义者的自我救赎
|
||||
date: 2020-01-16 15:15:27
|
||||
permalink: /pages/2d615df9a36a98ed
|
||||
title: "一个完美主义者的自我救赎"
|
||||
date: "2020-01-16 15:15:27"
|
||||
permalink: "/pages/2d615df9a36a98ed"
|
||||
---
|
||||
# 一个完美主义者的自我救赎
|
||||
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: 学习网站
|
||||
date: 2019-12-25 14:27:01
|
||||
permalink: /pages/2e9ba3fa6e1ed0e9
|
||||
article: false
|
||||
title: "学习网站"
|
||||
date: "2019-12-25 14:27:01"
|
||||
permalink: "/pages/2e9ba3fa6e1ed0e9"
|
||||
article: false
|
||||
---
|
||||
# 学习网站
|
||||
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: 在线工具
|
||||
date: 2020-01-12 11:39:41
|
||||
permalink: /pages/9c2232288caaa8ec
|
||||
article: false
|
||||
title: "在线工具"
|
||||
date: "2020-01-12 11:39:41"
|
||||
permalink: "/pages/9c2232288caaa8ec"
|
||||
article: false
|
||||
---
|
||||
# 在线工具
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ article: false
|
|||
|
||||
| 名称 | 网址 | 描述 |
|
||||
| --------------- | -------------------- | ------------------- |
|
||||
| tinypng图片压缩 | <https://tinypng.cn> | png 和 jpg 图片压缩 |
|
||||
| tinypng图片压缩 | <https://tinypng.com> | png 和 jpg 图片压缩 |
|
||||
|
||||
## 作图
|
||||
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: 友情链接
|
||||
date: 2019-12-25 14:27:01
|
||||
permalink: /pages/844eea1b2387fb96
|
||||
article: false
|
||||
title: "友情链接"
|
||||
date: "2019-12-25 14:27:01"
|
||||
permalink: "/pages/844eea1b2387fb96"
|
||||
article: false
|
||||
---
|
||||
|
||||
# 小伙伴们 o(^∇^*)
|
||||
|
|
@ -16,7 +16,7 @@ article: false
|
|||
|
||||
## 友链申请
|
||||
|
||||
与我[ 联系 ](/pages/81d9f505441078e0/#联系)或者 在本页面评论区留言您的友链信息，格式：
|
||||
与我[ 联系 ](/about/#联系)或者 在本页面评论区留言您的友链信息，格式：
|
||||
|
||||
::: tip
|
||||
昵称：Evan's blog
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
title: 关于
|
||||
date: 2019-12-25 14:27:01
|
||||
permalink: /pages/81d9f505441078e0
|
||||
sidebar: false
|
||||
article: false
|
||||
title: "about"
|
||||
date: "2019-12-25 14:27:01"
|
||||
permalink: "/about"
|
||||
sidebar: false
|
||||
article: false
|
||||
---
|
||||
|
||||
# 关于
|
||||
|
|
@ -23,7 +23,7 @@ footer:
|
|||
---
|
||||
|
||||
## 简介
|
||||
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术（[最新](/pages/8818d4830dac5e2a/)）。如果你喜欢这个博客欢迎到 [GitHub](https://github.com/xugaoyi/blog) 点个Star、获取源码，或者交换 [友链](/pages/844eea1b2387fb96/)。
|
||||
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术（[最新](/timeline/)）。如果你喜欢这个博客欢迎到 [GitHub](https://github.com/xugaoyi/blog) 点个Star、获取源码，或者交换 [友链](/pages/844eea1b2387fb96/)。
|
||||
|
||||
</br>
|
||||
|
||||
|
|
@ -105,7 +105,7 @@ footer:
|
|||
* [博客源码](https://github.com/xugaoyi/blog)
|
||||
|
||||
|
||||
### 👾其他
|
||||
### 💡更多
|
||||
* 学习
|
||||
* [提高学习效率的策略](/pages/a8692ab3bdcb4588/)
|
||||
* [提高记忆的技巧](/pages/996822b2a2ca6e3b/)
|
||||
|
|
@ -115,7 +115,7 @@ footer:
|
|||
* [面试问题集锦](/pages/aea6571b7a8bae86/)
|
||||
* 心情杂货
|
||||
* [一个完美主义者的自我救赎](/pages/2d615df9a36a98ed/)
|
||||
* 其他
|
||||
* 更多
|
||||
* [学习网站](/pages/2e9ba3fa6e1ed0e9/)
|
||||
* [在线工具](/pages/9c2232288caaa8ec/)
|
||||
* [友情链接](/pages/844eea1b2387fb96/)
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
---
|
||||
title: 最新
|
||||
date: 2019-12-31 13:49:34
|
||||
permalink: /pages/8818d4830dac5e2a
|
||||
sidebar: false
|
||||
article: false # 不显示最近更新栏，以及不参与到最近更新文章数据计算
|
||||
comment: false
|
||||
editLink: false
|
||||
title: "timeline"
|
||||
date: "2019-12-31T13:49:34.000Z"
|
||||
permalink: "/timeline"
|
||||
sidebar: false
|
||||
article: false
|
||||
comment: false
|
||||
editLink: false
|
||||
---
|
||||
|
||||
<div class="tags">
|
||||
|
|
@ -15,20 +15,20 @@ editLink: false
|
|||
v-for="(item, key) of getPages.tagGroup"
|
||||
:style="randomBgcolor()"
|
||||
@click="toggleTag(key)"
|
||||
:key="key"
|
||||
>
|
||||
{{key}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- <transition-group class="timeline-wrapper"> -->
|
||||
<div class="timeline-wrapper">
|
||||
<transition-group tag="ul"> <!--tag转为ul-->
|
||||
<transition-group tag="ul">
|
||||
<li class="desc" key="0">只争朝夕，不负韶华！( •̀ ω •́ )✧</li>
|
||||
<template v-for="yearItem in tagPages()">
|
||||
<li :key="yearItem.year">
|
||||
<h3 class="year">{{yearItem.year}}</h3>
|
||||
<div class="year-wrapper">
|
||||
<transition-group tag="span"> <!--tag转为ul-->
|
||||
<transition-group tag="span">
|
||||
<router-link :to="item.path" v-for="item in yearItem.pageList" :key="item.path.slice(-6)">
|
||||
<span class="date">{{item.formatDay}}</span>
|
||||
<span class="title">{{item.title}}</span>
|
||||
|
|
@ -40,57 +40,25 @@ editLink: false
|
|||
</transition-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
<ul class="page-guide-ul">
|
||||
<li
|
||||
class="page-guide-row"
|
||||
v-for="(post, index) in topPublishPosts"
|
||||
:key="index"
|
||||
href="post"
|
||||
>
|
||||
<a :href="post.path">{{post.title}}</a>
|
||||
<span>{{ post.formatDay }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div @click="loadMore" class="page-guide-btn" v-if="showBtn">
|
||||
<div ref="btn">{{btnInfo}}</div>
|
||||
</div> -->
|
||||
|
||||
<script>
|
||||
import { getTopKPosts, getPagesList } from '../.vuepress/theme/util/getTopKPosts'
|
||||
import { getPagesList } from '../.vuepress/theme/util/getArticleDate'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTag: "全部",
|
||||
|
||||
step: 20,
|
||||
posts: [],
|
||||
page: 1,
|
||||
num: 0, // 页面数量
|
||||
btnInfo: '加载更多',
|
||||
showBtn: true,
|
||||
timeout: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.posts = this.$site.pages
|
||||
this.num = this.posts.length
|
||||
document.body.style="overflow-y: scroll;" // 解决切换tag页面高度不满屏出现跳动的问题
|
||||
},
|
||||
|
||||
computed: {
|
||||
getPages() {
|
||||
return getPagesList(this.posts)
|
||||
},
|
||||
|
||||
topPublishPosts() {
|
||||
// return this.getTopKPosts(this.page * this.step)
|
||||
return getTopKPosts(this.posts, this.page * this.step)
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -121,60 +89,12 @@ export default {
|
|||
return { background: `${bgcs[Math.floor(Math.random() * bgcs.length)]}`}
|
||||
},
|
||||
|
||||
|
||||
|
||||
// getTopKPosts(num) { // 文章数据处理
|
||||
// const re = /.*\/(.*?)\.(html|md)/
|
||||
// return this.posts
|
||||
// .filter(post => {
|
||||
// const { frontmatter } = post;
|
||||
// return frontmatter && frontmatter.permalink && frontmatter.title && frontmatter.article !== false;
|
||||
// })
|
||||
// .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, num)
|
||||
// },
|
||||
|
||||
// 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')
|
||||
// },
|
||||
|
||||
|
||||
loadMore() { // 加载更多
|
||||
if (this.timeout) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this.page * this.step >= this.num) {
|
||||
this.btnInfo = '加载完成'
|
||||
this.$refs.btn.style.opacity = 0
|
||||
this.timeout = setTimeout(() => this.showBtn = false, 300)
|
||||
} else {
|
||||
this.page += 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus" rel="stylesheet/stylus">
|
||||
|
||||
|
||||
.tags
|
||||
margin 30px 0
|
||||
span
|
||||
|
|
@ -281,72 +201,4 @@ ul
|
|||
.date:before
|
||||
background: $accentColor
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.page-guide-ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.page-guide-row {
|
||||
line-height: 1.3;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 10px 0px;
|
||||
text-shadow: 0 3px 6px rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
.page-guide-row::after {
|
||||
content: " ";
|
||||
width: 100%;
|
||||
border-bottom: 1px dashed #aaa;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.page-guide-row a, .page-guide-row span {
|
||||
background: white;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-guide-row a {
|
||||
max-width: 50%;
|
||||
padding-right: 20px;
|
||||
color: $textColor
|
||||
}
|
||||
|
||||
.page-guide-row span {
|
||||
color: #aaa;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.page-guide-btn {
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.page-guide-btn div {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
background-color: $accentColor;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid $badgeTipColor;
|
||||
}
|
||||
|
||||
.page-guide-btn div:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,6 +2,8 @@
|
|||
"name": "evanblog",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"test": "node utils/frontmatter.js",
|
||||
"test2": "node utils/frontmatter.js -update",
|
||||
"dev": "node utils/frontmatter.js && node utils/sidebar.js && vuepress dev docs",
|
||||
"build": "node utils/frontmatter.js && node utils/sidebar.js && vuepress build docs",
|
||||
"deploy": "bash deploy.sh",
|
||||
|
|
@ -12,6 +14,7 @@
|
|||
"devDependencies": {
|
||||
"@vuepress/plugin-back-to-top": "^1.2.0",
|
||||
"ejs": "^3.0.1",
|
||||
"json2yaml": "^1.1.0",
|
||||
"md5.js": "^1.3.5",
|
||||
"moment": "^2.24.0",
|
||||
"tracer": "^1.0.1",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const matter = require('gray-matter'); // FrontMatter解析器 https://github.com/jonschlinkert/gray-matter
|
||||
const readFileList = require('./modules/readFileList');
|
||||
const urlsRoot = path.join(__dirname, '..', 'urls.txt'); // 百度链接推送文件
|
||||
|
||||
|
|
@ -17,10 +17,9 @@ main();
|
|||
function main() {
|
||||
fs.writeFileSync(urlsRoot, DOMAIN)
|
||||
const files = readFileList(); // 读取所有md文件数据
|
||||
|
||||
files.forEach( file => {
|
||||
const link = `\r\n${DOMAIN}${file.permalink}/`;
|
||||
console.log(link);
|
||||
fs.appendFileSync(urlsRoot, link);
|
||||
const { data } = matter(fs.readFileSync(file.filePath, 'utf8'));
|
||||
data.permalink && fs.appendFileSync(urlsRoot, `\r\n${DOMAIN}${data.permalink}/`);
|
||||
})
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
* 生成frontmatter (标题、日期、永久链接)
|
||||
*/
|
||||
const fs = require('fs'); // 文件模块
|
||||
const logger = require('tracer').colorConsole(); // 控制台工具(用于控制台打印信息包含时间、打印类型、文件及代码行号、对象、颜色)
|
||||
const logger = require('tracer').colorConsole(); // 控制台工具(用于控制台打印信息包含时间、打印类型、文件及代码行号、对象、颜色)
|
||||
const matter = require('gray-matter'); // FrontMatter解析器 https://github.com/jonschlinkert/gray-matter
|
||||
const YAML = require('json2yaml')
|
||||
const arg = process.argv.splice(2)[0]; // 获取命令行传入的参数
|
||||
const readFileList = require('./modules/readFileList');
|
||||
|
||||
|
|
@ -16,39 +18,97 @@ function main() {
|
|||
|
||||
files.forEach(file => {
|
||||
let dataStr = fs.readFileSync(file.filePath, 'utf8');// 读取每个md文件内容
|
||||
if(dataStr.substring(0,3) !== '---'){ // 没有FrontMatter
|
||||
console.log(`写入FrontMatter：${file.filePath}`)
|
||||
writeFrontMatter(file, dataStr);
|
||||
|
||||
/**
|
||||
* fileMatterObj => {content:'剔除frontmatter的文件内容字符串', data:{<frontmatter对象>}, ...}
|
||||
*/
|
||||
const fileMatterObj = matter(dataStr);
|
||||
|
||||
if (Object.keys(fileMatterObj.data).length === 0) { // 未定义FrontMatter数据
|
||||
const stat = fs.statSync(file.filePath);
|
||||
const dateStr = dateFormat(stat.birthtime);// 文件的创建时间
|
||||
const newData = `---\r\ntitle: ${file.name}\r\ndate: ${dateStr}\r\npermalink: ${file.permalink}\r\n---\r\n` + fileMatterObj.content;
|
||||
fs.writeFileSync(file.filePath, newData); // 写入
|
||||
console.log(`写入FrontMatter：${file.filePath} `)
|
||||
|
||||
} else { // 已有FrontMatter
|
||||
if (arg !== '-update'){
|
||||
return;
|
||||
const matterData = fileMatterObj.data;
|
||||
let mark = false;
|
||||
|
||||
// 已有FrontMatter，但是没有title、date、permalink数据的
|
||||
if (!matterData.hasOwnProperty('title')) {
|
||||
matterData.title = file.name;
|
||||
mark = true;
|
||||
}
|
||||
// 重新写入FrontMatter
|
||||
const dataArr = dataStr.split(/\r\n|\n|\r/gm);
|
||||
const fmArr = dataArr.slice(0,5);
|
||||
const dataStrOld = dataArr.slice(5).join('\r\n');
|
||||
// 判断FrontMatter 是否为自动生成的格式
|
||||
if (fmArr[0] === '---' && /title/.test(fmArr[1]) && /date/.test(fmArr[2]) && /permalink/.test(fmArr[3]) && fmArr[4] === '---') {
|
||||
|
||||
if (!matterData.hasOwnProperty('date')) {
|
||||
const stat = fs.statSync(file.filePath);
|
||||
matterData.date = dateFormat(stat.birthtime);
|
||||
mark = true;
|
||||
}
|
||||
|
||||
if (!matterData.hasOwnProperty('permalink')) {
|
||||
matterData.permalink = file.permalink;
|
||||
mark = true;
|
||||
}
|
||||
|
||||
if (mark) {
|
||||
const newData = YAML.stringify(matterData) + '---\r\n' + fileMatterObj.content;
|
||||
fs.writeFileSync(file.filePath, newData); // 写入
|
||||
console.log(`更新FrontMatter：${file.filePath} `)
|
||||
writeFrontMatter(file, dataStrOld);
|
||||
} else {
|
||||
logger.warn(`此文件FrontMatter更新失败${file.filePath}，因为它的FrontMatter格式并非自动生成的。`)
|
||||
}
|
||||
|
||||
|
||||
// 更新title和permalink
|
||||
if (arg === '-update'){
|
||||
if (matterData.title != file.name) { // 当title和文件名不一致时才更新
|
||||
matterData.title = file.name;
|
||||
if (/pages/.test(matterData.permalink)) {
|
||||
matterData.permalink = file.permalink;
|
||||
}
|
||||
// 修复date时区和格式被修改的问题 (并非更新date的值)
|
||||
const date = new Date(matterData.date);
|
||||
matterData.date = `${date.getUTCFullYear()}-${zero(date.getUTCMonth()+1)}-${zero(date.getUTCDate())} ${zero(date.getUTCHours())}:${zero(date.getUTCMinutes())}:${zero(date.getUTCSeconds())}`;
|
||||
|
||||
const newData2 = YAML.stringify(JSON.parse(JSON.stringify(matterData))) + '---\r\n' + fileMatterObj.content;
|
||||
fs.writeFileSync(file.filePath, newData2); // 写入
|
||||
console.log(`更新FrontMatter标题和链接：${file.filePath} `)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// if(dataStr.substring(0,3) !== '---'){ // 没有FrontMatter
|
||||
///console.log(`写入FrontMatter：${file.filePath}`)
|
||||
// writeFrontMatter(file, dataStr);
|
||||
// } else { // 已有FrontMatter
|
||||
// if (arg !== '-update'){
|
||||
// return;
|
||||
// }
|
||||
// // 重新写入FrontMatter
|
||||
// const dataArr = dataStr.split(/\r\n|\n|\r/gm);
|
||||
// const fmArr = dataArr.slice(0,5);
|
||||
// const dataStrOld = dataArr.slice(5).join('\r\n');
|
||||
// // 判断FrontMatter 是否为自动生成的格式
|
||||
// if (fmArr[0] === '---' && /title/.test(fmArr[1]) && /date/.test(fmArr[2]) && /permalink/.test(fmArr[3]) && fmArr[4] === '---') {
|
||||
// console.log(`更新FrontMatter：${file.filePath} `)
|
||||
// writeFrontMatter(file, dataStrOld);
|
||||
// } else {
|
||||
// logger.warn(`此文件FrontMatter更新失败${file.filePath}，因为它的FrontMatter格式并非自动生成的。`)
|
||||
// }
|
||||
// }
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// 写入FrontMatter
|
||||
function writeFrontMatter(file, dataStr) {
|
||||
const stat = fs.statSync(file.filePath);
|
||||
const date = stat.birthtime; // 文件的创建时间
|
||||
const dateStr = `${date.getFullYear()}-${zero(date.getMonth()+1)}-${zero(date.getDate())} ${zero(date.getHours())}:${zero(date.getMinutes())}:${zero(date.getSeconds())}`;
|
||||
const newData = `---\r\ntitle: ${file.name}\r\ndate: ${dateStr}\r\npermalink: ${file.permalink}\r\n---\r\n` + dataStr;
|
||||
fs.writeFileSync(file.filePath, newData); // 写入
|
||||
// 日期的格式
|
||||
function dateFormat(date) {
|
||||
return `${date.getFullYear()}-${zero(date.getMonth()+1)}-${zero(date.getDate())} ${zero(date.getHours())}:${zero(date.getMinutes())}:${zero(date.getSeconds())}`
|
||||
}
|
||||
|
||||
// 补0
|
||||
// 小于10补0
|
||||
function zero(d){
|
||||
return d.toString().padStart(2,'0')
|
||||
}
|
||||
|
|
|
|||
30
utils/nav.js
30
utils/nav.js
|
|
@ -1,30 +0,0 @@
|
|||
/**
|
||||
* 生成导航栏数据
|
||||
*/
|
||||
|
||||
// 思路：从sidebar.js中抽离一套获取目录文件结构树的代码，然后共用这块代码，对返回的数据做二次处理，分别产出侧边栏、导航栏、百度链接推送、首页内部链接数据。
|
||||
// 考虑：需要对导航和首页内链接做个性化处理，暂时不做自动化生成。
|
||||
|
||||
// const fs = require('fs');
|
||||
// const path = require('path');
|
||||
|
||||
// const readFileList = require('./modules/readFileList');
|
||||
// const navPath = path.join(__dirname, '..', 'docs', '.vuepress', 'config', 'nav-auto.js'); // 导航栏js文件要保存的路径
|
||||
|
||||
// main();
|
||||
|
||||
|
||||
|
||||
// /**
|
||||
// * 主体函数
|
||||
// */
|
||||
// function main() {
|
||||
// let navArr = [{text: '首页', link: '/'}];
|
||||
// const files = readFileList(); // 读取所有md文件数据
|
||||
// files.forEach( file => {
|
||||
// //if (file.order === 1) {
|
||||
// //console.log(file.filePath.split('\\'))
|
||||
// //}
|
||||
// })
|
||||
|
||||
// }
|
||||
Loading…
Reference in New Issue