node工具内置到主题

This commit is contained in:
xugaoyi 2020-04-20 17:15:12 +08:00
parent d74c3042b5
commit 6e32baf58a
82 changed files with 2732 additions and 137 deletions

View File

@ -16,7 +16,7 @@
[Evan's blog](https://xugaoyi.com/) | [效果图](https://xugaoyi.com/pages/d557b9a89a215d2e) | [指南](https://github.com/xugaoyi/vuepress-theme-vdoing/issues/350)
[Evan's blog](https://xugaoyi.com/) | [效果图](https://xugaoyi.com/pages/d557b9a89a215d2e) | [指南 (必读)](https://github.com/xugaoyi/vuepress-theme-vdoing/issues/350)
**注意:主题当前还在不断完善当中,因此功能和文档或许会有调整。**
@ -42,7 +42,7 @@
<li>简单的<b>目录页</b>配置,查看 <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/issues/330">目录页配置</a>
</li>
<li><b>自动生成侧边栏工具</b> 让你拥有一个结构清晰的侧边栏,无需手动配置。<br/>
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing/issues/113">根据目录自动生成侧边栏和分类标签的约定说明</a>
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing/issues/113">构建结构化站点的核心配置和约定</a>
</li>
<li><b>自动生成Front Matter工具</b> 助你专注于写作你无需给每个文件都手写front matter。<br/>
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing/issues/324">自动生成Front Matter工具</a>

View File

@ -1,5 +1,5 @@
const nav = require('./config/nav.js');
const sidebar = require('./config/sidebar-auto.js');
// const sidebar = require('./config/sidebar-auto.js');
module.exports = {
title: "Evan's blog",
@ -21,21 +21,21 @@ module.exports = {
markdown: {
lineNumbers: true // 代码行号
},
theme: require.resolve('../../theme-vdoing'), // 使用的主题
theme: require.resolve('../../vdoing/theme-vdoing'), // 使用的主题
themeConfig: { // 主题配置
nav,
sidebar, // 侧边栏 'auto' | 自定义
sidebarDepth: 2, // 侧边栏显示深度默认1最大2显示到h3标题
logo: '/img/EB-logo.png', // 导航栏logo
repo: 'xugaoyi/vuepress-theme-vdoing', // 导航栏右侧生成Github链接
searchMaxSuggestions: 10, // 搜索结果显示最大数
lastUpdated: '上次更新', // 更新的时间,及前缀文字 string | boolean (取值为git提交时间)
docsDir: 'docs', // 编辑的文件夹
editLinks: true, // 编辑链接
editLinkText: '编辑',
// 以下配置是Vdoing主题新增配置
// 以下配置是Vdoing主题改动的和新增的配置
sidebar: 'structuring', // 侧边栏 'auto' | 自定义 | 'structuring' | { mode: 'structuring', collapsable: Boolean} 温馨提示:目录页数据依赖于结构化的侧边栏数据,如果你不设置为'structuring',将无法使用目录页
// sidebarOpen: false, // 初始状态是否打开侧边栏默认true
// updateBar: { // 最近更新栏(此配置和它下面的所有属性均是可选的)
// onHome: { // 在首页

View File

@ -43,6 +43,13 @@ module.exports = [
]
},
{text: '关于', link: '/about/'},
{text: '收藏夹', link: '/bookmarks/'},
{text: '收藏夹',
link: '/pages/beb6c0bd8a66cea6/',
items: [
{text: '网站', link: '/pages/beb6c0bd8a66cea6/'},
{text: '资源', link: '/pages/eee83a9211a70f9d/'},
{text: 'Vue资源', link: '/pages/12df8ace52d493f6/'},
]
},
{text: '时间轴', link: '/timeline/'},
]

View File

@ -19,7 +19,7 @@ module.exports = {
"/05.关于/": [["01.关于.md","关于","/about"]],
"/06.收藏夹/": [["01.网站和工具.md","网站和工具","/bookmarks"],["02.资源.md","资源","/pages/eee83a9211a70f9d"]],
"/06.收藏夹/": [["01.网站.md","网站","/pages/beb6c0bd8a66cea6"],["02.资源.md","资源","/pages/eee83a9211a70f9d"],["03.Vue资源.md","Vue资源","/pages/12df8ace52d493f6"]],
"/07.时间轴/": [["01.时间轴.md","时间轴","/timeline"]],

View File

@ -2,6 +2,8 @@
title: new命令原理
date: 2019-12-25 14:27:01
permalink: /pages/8143cc480faf9a11
tags:
- js
---
# new命令原理
@ -13,6 +15,8 @@ permalink: /pages/8143cc480faf9a11
4. 开始执行构造函数内部的代码。
5. 如果构造函数内有返回值且为对象类型,则返回该对象,否则返回上面创建的实例对象。
<!-- more -->
```js
// 构造函数
function Person(name,age){

View File

@ -2,6 +2,8 @@
title: ES5面向对象
date: 2020-02-22 10:35:43
permalink: /pages/b1af5cb8996363c5
tags:
- js
---
# ES5面向对象

View File

@ -2,6 +2,8 @@
title: Git使用手册
date: 2019-12-25 14:27:01
permalink: /pages/9a7ee40fc232253e
tags:
- 技术文档
---

View File

@ -2,6 +2,8 @@
title: Markdown使用教程
date: 2019-12-25 14:27:01
permalink: /pages/ad247c4332211551
tags:
- 技术文档
---
# Markdown使用教程

View File

@ -2,6 +2,8 @@
title: npm常用命令
date: 2019-12-25 14:27:01
permalink: /pages/61f2f95fd7da14fd
tags:
- 技术文档
---
# npm常用命令

View File

@ -1,10 +1,12 @@
---
author:
name: "TZYY"
link: "https://www.cnblogs.com/tzyy/p/5193811.html"
title: "npm packageJson属性详解"
date: "2020-04-08 17:16:38"
permalink: "/pages/dec4f3f00e71a312"
author:
name: TZYY
link: https://www.cnblogs.com/tzyy/p/5193811.html
title: npm packageJson属性详解
date: 2020-04-08 17:16:38
permalink: /pages/dec4f3f00e71a312
tags:
- 技术文档
---

View File

@ -2,6 +2,8 @@
title: yaml语言教程
date: 2019-12-25 14:27:01
permalink: /pages/4e8444e2d534d14f
tags:
- 技术文档
---
# yaml语言教程

View File

@ -2,6 +2,8 @@
title: GitHub高级搜索技巧
date: 2019-12-25 14:27:01
permalink: /pages/4c778760be26d8b3
tags:
- GitHub技巧
---
# GitHub高级搜索技巧

View File

@ -2,6 +2,8 @@
title: GitHub Actions 实现自动部署静态博客
date: 2019-12-27 11:44:41
permalink: /pages/6b9d359ec5aa5019
tags:
- GitHub技巧
---
# GitHub Actions 实现自动部署静态博客

View File

@ -2,6 +2,8 @@
title: GitHub Actions 定时运行代码:每天定时百度链接推送
date: 2019-12-30 21:23:00
permalink: /pages/f44d2f9ad04ab8d3
tags:
- GitHub技巧
---
# GitHub Actions 定时运行代码:每天定时百度链接推送

View File

@ -2,6 +2,8 @@
title: GitHub加速下载项目的方法
date: 2020-03-09 10:28:09
permalink: /pages/95331c6a9613faf8
tags:
- GitHub技巧
---
# GitHub加速下载项目的方法

View File

@ -0,0 +1,199 @@
---
title: 网站
permalink: /pages/beb6c0bd8a66cea6
date: 2020-04-19 11:33:04
article: false
---
# 个人收藏夹
[一位大佬的收藏夹](https://panjiachen.github.io/awesome-bookmarks/)
[码力全开资源库](https://maliquankai.com/designnav/) 很全很强大,独立开发者/设计干货/优质利器/工具资源...
<!-- more -->
## 文档
* [MDN](https://developer.mozilla.org/zh-CN/docs/Web) Web技术权威文档
* [现代JavaScript教程](https://zh.javascript.info) 以最新标准为基准的JS教程
* [ES5教程](https://wangdoc.com/javascript/) 阮一峰的JS教程
* [ES6教程](http://es6.ruanyifeng.com/) 阮一峰的ES6教程
* [Bash 脚本教程](https://wangdoc.com/bash/) 阮一峰编写
* [ECMA](https://www.ecma-international.org/) ECMA官网
* [菜鸟教程](https://www.runoob.com/) 涵盖多种语言的初级教程
## 社区
* [Github](https://github.com/) 程序员同性交友社区
* [掘金](https://juejin.im/) 一个帮助开发者成长的社区
* [简书](https://www.jianshu.com/) 有很多频道的创作社区
* [思否](https://segmentfault.com/) 解决技术问题的社区
* [stack overflow](https://stackoverflow.com/) 同上,外网的
* [InfoQ](https://www.infoq.cn/topic/Front-end)
* [V2EX](https://www.v2ex.com/)
* [鱼塘热榜](https://mo.fish/main/home/hot) 划水网站,收集了很多网站,当天热门文章
## 博客
* [阮一峰的网络日志](http://www.ruanyifeng.com/blog/)
* [css-tricks](https://css-tricks.com/) css技巧文章
## 文章
* [灵活运用CSS开发技巧](https://juejin.im/post/5d4d0ec651882549594e7293)
## 视频
* [慕课网](https://www.imooc.com/) 实战视频教程
* [妙味课堂](https://www.miaov.com/) 比较系统的前端入门视频教程
* [中国大学MOOC](https://www.icourse163.org/) 涵盖计算机、外语、心理学等专业免费课程
* [bilibili](https://www.bilibili.com/) B站上面也有一些可供学习的免费视频
* [egghead](http://egghead.io) 质量还不错的短视频教程,外网
## Github
* [github 短域名服务](https://git.io/)
* [shields](https://shields.io/) 徽章图标
## 在线工具
### 开发
* [Can I use](https://caniuse.com/) 查看属性和方法的兼容性
* [30 seconds of code](https://30secondsofcode.org/) 收集了许多有用的代码小片段
### 代码编辑
* [codepen](https://codepen.io) 在线代码编辑与演示
* [codesandbox](https://codesandbox.io) 内嵌VSCode的在线IDE
### UI
* [iconfont](https://www.iconfont.cn/) 阿里巴巴矢量图标库
* [undraw](https://undraw.co/illustrations) 免费的矢量插画
* [icomoon](https://icomoon.io/) 矢量图标库
* [cssicon](http://cssicon.space/#/) 所有的 icon 都是纯 css 画的 缺点icon 不够多
* [CSS triangle generator](http://apps.eky.hk/css-triangle-generator/) 帮你快速用 css 做出三角形
* [clippy](http://bennettfeely.com/clippy/) 在线帮你使用 css clip-path 做出各种形状的图形
* [Lorem Picsum](https://picsum.photos/) 提供免费的占位图
### Emoji表情
* [emoji表情](https://emojipedia.org/)
* [emoji表情备忘录](https://www.webfx.com/tools/emoji-cheat-sheet)
* [gitmoji](https://github.com/carloscuesta/gitmoji) 通过 emoji 表达 git 的操作内容
> windows系统下按<kbd>Win</kbd>+<kbd>.</kbd>快速打开表情选择框
### 图片压缩
* [tinypng图片压缩](https://tinypng.com) 压缩png很有用
* [Squoosh](https://squoosh.app/) 谷歌出品在线免费图片压缩工具
### 作图
* [processon在线作图](https://www.processon.com/) 流程图、思维导图、原型图等
* [百度脑图](https://naotu.baidu.com) 思维导图
### CSS相关
* [CSS生成器](https://neumorphism.io/)
* [CSS渐变生成器](https://www.colorzilla.com/gradient-editor/)
* [CSS3-Box Shadow(阴影)](https://www.html.cn/tool/css3Preview/Box-Shadow.html)
* [贝塞尔曲线生成器 ](https://cubic-bezier.com)
### CDN加速
* [jsDelivr](http://www.jsdelivr.com/) 国外的一家优秀的公共 CDN 服务提供商
* [unpkg](https://unpkg.com/) cdn 服务
### 正则
* [正则可视化](https://regex101.com/)
### 其他
* [Linux命令手册](https://ipcmen.com/)
## 设计
- [uimovement](https://uimovement.com/) 能从这个网站找到不少动画交互的灵感
- [awwwards](https://www.awwwards.com/)是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站
- [dribbble](https://dribbble.com/) 经常能在上面找到很多有创意好看的 gif 或者图片,基本上我所有的图都是上面招的
- [Bēhance](https://www.behance.net/) dribbble 是设计师的微博Bēhance 是设计师的博客
- [Logojoy](https://logojoy.com/) 使用 ai 做 logo 的网站,做出来的 logo 质量还不错。
- [brandmark](http://brandmark.io/) 另一个在线制作 logo 网站
- [instant](https://instantlogodesign.com/) 又一个 logo 制作网站
- [logo-maker](https://www.designevo.com/logo-maker/) 又一个 logo 制作网站 这个更简单点 就是选模板之后微调
- [coolors](https://coolors.co/) 帮你在线配色的网站 你能找到不少配色灵感
- [colorhunt](http://colorhunt.co/) 另一个配色网站
- [uigradients](https://uigradients.com/#SummerDog) 渐变色网站
- [designcap](https://www.designcap.com/) 在线海报设计
- [Flat UI 色表](https://flatuicolors.com/) Flat UI 色表
- [0to255](https://www.0to255.com/) 颜色梯度
- [Ikonate](https://github.com/mikolajdobrucki/ikonate) 提供免费的图标 icons
- [remixicon](https://remixicon.com/) 又一个提供免费图标 icons
- [feather](https://github.com/feathericons/feather) 免费的 icons
- [nord ](https://github.com/arcticicestudio/nord) 北欧性冷淡风主题配色
- [Unsplash](https://unsplash.com/) 提供免费的高清图片
- [colorkitty](https://colorkitty.com/) 从你的图片中提取配色
- [design.youzan](http://design.youzan.com/) 有赞设计原则
### 图库
- [uigradients](https://uigradients.com/) 渐变色生成工具
- [freepik](https://www.freepik.com/) banner 图库
- [觅元素](http://www.51yuansu.com/)一天免费下载十张 psd
- [搞定设计](https://www.gaoding.com/) 可以抠图
- [vectorizer](https://www.vectorizer.io/) 真正的 png 转 svg 神器
- [站酷](https://www.zcool.com.cn/)
- [花瓣](https://huaban.com/)
- [虎克](https://huke88.com/) Ps 学习教程
- [beTheme](https://themes.muffingroup.com/be/splash/)
- [UI 中国](https://www.ui.cn/)
## 有趣
- [帮你百度一下](http://www.baidu-x.com/) 可以 [点我测试一下](http://www.baidu-x.com/?q=和谐有爱富强)-
- [国际版](http://lmgtfy.com/) 同`帮我百度一下`-[点我测试一下](http://lmgtfy.com/?q=a)-
- [wallhaven](https://alpha.wallhaven.cc/) 壁纸网站-
- [URL 地址播放 Emojis 动画](http://matthewrayfield.com/articles/animating-urls-with-javascript-and-emojis/#🌖) 在地址栏里面播放 emoji
- [Can't Unsee](https://cantunsee.space/) 强烈建议前端、客户端、UI 开发的同学玩下,检查一下自己对设计稿的敏感度怎么样
- [ggtalk](https://talk.swift.gg/) 平时一直在听的一个技术博客
- [awesome-comment](https://github.com/Blankj/awesome-comment) 里面收集了很多有趣的代码注释
- [text-img](https://www.text-image.com/index.html) 都将图片转化为 ascii 用来写注释
- [weird-fonts](https://github.com/beizhedenglong/weird-fonts) 将普通字母转化为 特殊 unicode
- [snake](https://github.com/epidemian/snake) 在地址栏里面玩贪吃蛇
- [zero-width-lib](https://github.com/yuanfux/zero-width-lib) 利用零宽度字符实现 隐形水印、加密信息分享、逃脱词匹配,很有创意
- [abbreviations](https://www.abbreviations.com/) 查看一个简写是什么意思的网站
- [magi](https://magi.com/) ai 搜索神器,超屌
- [诺基亚短信图片生成器](https://zzkia.noddl.me:8020/)
## 交互
- [微交互](http://aliscued.lofter.com/) 里面收集了市面上很多很好的微交互例子 值得学习
- [Little Big Details](http://littlebigdetails.com/) 同上,一个国外微交互汇集网站
- [cruip](https://cruip.com/) 登录页的各种页面设计,可以免费下载模板
- [Comixify](https://comixify.ii.pw.edu.pl/) 一个波兰团队做了非常好玩的工具,可以把视频自动转成漫画,上图是他们提供的 demo效果很棒。
- [taiko-web](https://github.com/bui/taiko-web) 太鼓达人网页版 只能说很 6
## 教程
- [npx](https://egghead.io/courses/execute-npm-package-binaries-with-the-npx-package-runner) 教你怎么合理的使用 npx
- [hacksplaining](https://www.hacksplaining.com/lessons) 网络安全学习网站
- [mobile-web-best-practice](https://github.com/mcuking/mobile-web-best-practice) 移动 web 最佳实践
## 产品
- [产品大牛](http://www.pmdaniu.com/) 什么有很多完整的产品原型可以借鉴
- [磨刀](https://modao.cc/pricing) 快速出 ui 原型
## 实用
- [typeform](https://admin.typeform.com/signup) 一个国外的在线调查问卷网站
- [VideoFk](https://www.videofk.com/) VideoFk 视频在线解析下载
- [全历史](https://www.allhistory.com/) 历史内容聚合网站
- [UzerMe](https://www.uzer.me/) 云端办公工具
- [SoBooks](https://sobooks.cc/) 强大的电子书资源网站
- [稿定设计](https://www.gaoding.com/) 键式设计工具+智能抠图
- [大力盘](https://dalipan.com/) 百度网盘搜索
- [ENFI 下载器](https://www.macbl.com/app/internet/enfi) 不限速下载器
- [来画视频](https://www.laihua.com/) 像做 PPT 一样做短视频
- [Arkie 海报制作工具](https://www.arkie.cn/)
- [优品 PPT](http://www.ypppt.com/)
- [比格 PPT](http://www.tretars.com/)
- [高清免费图片](https://www.pexels.com/)
- [高清免费图片 2](https://unsplash.com/)
## Talk
- [peerigon-talks](https://github.com/peerigon/talks) 收集了不少有意思的 talks
## 算法
- [leetcode](https://github.com/azl397985856/leetcode) 用 js 刷 leetcode

View File

@ -1,94 +0,0 @@
---
title: 网站和工具
date: 2020-04-12 10:54:16
permalink: /bookmarks
article: false
---
# 个人收藏夹
[一位大佬的收藏夹](https://panjiachen.github.io/awesome-bookmarks/)
[码力全开资源库](https://maliquankai.com/designnav/) 很全很强大,独立开发者/设计干货/优质利器/工具资源...
<!-- more -->
## 网站
### 文档
* [MDN](https://developer.mozilla.org/zh-CN/docs/Web) Web技术权威文档
* [现代JavaScript教程](https://zh.javascript.info) 以最新标准为基准的JS教程
* [ES5教程](https://wangdoc.com/javascript/) 阮一峰的JS教程
* [ES6教程](http://es6.ruanyifeng.com/) 阮一峰的ES6教程
* [Bash 脚本教程](https://wangdoc.com/bash/) 阮一峰编写
* [ECMA](https://www.ecma-international.org/) ECMA官网
* [菜鸟教程](https://www.runoob.com/) 涵盖多种语言的初级教程
### 社区
* [Github](https://github.com/) 程序员同性交友社区
* [掘金](https://juejin.im/) 一个帮助开发者成长的社区
* [简书](https://www.jianshu.com/) 有很多频道的创作社区
* [思否](https://segmentfault.com/) 解决技术问题的社区
* [stack overflow](https://stackoverflow.com/) 同上,外网的
* [InfoQ](https://www.infoq.cn/topic/Front-end)
* [V2EX](https://www.v2ex.com/)
* [鱼塘热榜](https://mo.fish/main/home/hot) 划水网站,收集了很多网站,当天热门文章
### 博客
* [阮一峰的网络日志](http://www.ruanyifeng.com/blog/)
* [css-tricks](https://css-tricks.com/) css技巧文章
### 文章
* [灵活运用CSS开发技巧](https://juejin.im/post/5d4d0ec651882549594e7293)
### 视频
* [慕课网](https://www.imooc.com/) 实战视频教程
* [妙味课堂](https://www.miaov.com/) 比较系统的前端入门视频教程
* [中国大学MOOC](https://www.icourse163.org/) 涵盖计算机、外语、心理学等专业免费课程
* [bilibili](https://www.bilibili.com/) B站上面也有一些可供学习的免费视频
* [egghead](http://egghead.io) 质量还不错的短视频教程,外网
### Github
* [github 短域名服务](https://git.io/)
* [shields](https://shields.io/) 徽章图标
## 在线工具
### 开发
* [Can I use](https://caniuse.com/) 查看属性和方法的兼容性
### 代码编辑
* [codepen](https://codepen.io) 在线代码编辑与演示
* [codesandbox](https://codesandbox.io) 内嵌VSCode的在线IDE
### UI
* [iconfont](https://www.iconfont.cn/) 阿里巴巴矢量图标库
* [undraw](https://undraw.co/illustrations) 免费的矢量插画
* [icomoon](https://icomoon.io/) 矢量图标库
### Emoji表情
* [emoji表情](https://emojipedia.org/)
* [emoji表情备忘录](https://www.webfx.com/tools/emoji-cheat-sheet)
> windows系统下按<kbd>Win</kbd>+<kbd>.</kbd>快速打开表情选择框
### 图片压缩
* [tinypng图片压缩](https://tinypng.com) 压缩png很有用
* [Squoosh](https://squoosh.app/) 谷歌出品在线免费图片压缩工具
### 作图
* [processon在线作图](https://www.processon.com/) 流程图、思维导图、原型图等
* [百度脑图](https://naotu.baidu.com) 思维导图
### CSS相关
* [CSS生成器](https://neumorphism.io/)
* [CSS渐变生成器](https://www.colorzilla.com/gradient-editor/)
* [CSS3-Box Shadow(阴影)](https://www.html.cn/tool/css3Preview/Box-Shadow.html)
* [贝塞尔曲线生成器 ](https://cubic-bezier.com)
### CDN加速
* [jsDelivr](http://www.jsdelivr.com/) 国外的一家优秀的公共 CDN 服务提供商
### 正则
* [正则可视化](https://regex101.com/)
### 其他
* [Linux命令手册](https://ipcmen.com/)

View File

@ -14,23 +14,29 @@ article: false
> 待整理
## Vue
[Vuesax](https://lusaxweb.github.io/vuesax/) 一个优质的vue的组件库
- [Vuesax](https://lusaxweb.github.io/vuesax/) 一个优质的vue的组件库
## 移动端
[fastclick](https://github.com/ftlabs/fastclick) 解决移动端点击延迟300ms问题
[better-scroll](https://github.com/ustbhuangyi/better-scroll) 移动端滚动插件
- [fastclick](https://github.com/ftlabs/fastclick) 解决移动端点击延迟300ms问题
- [better-scroll](https://github.com/ustbhuangyi/better-scroll) 移动端滚动插件
## Node
[文章跟着老司机玩转Node命令行](https://blog.csdn.net/qq_41903941/article/details/90259369)
[commander](https://github.com/tj/commander.js) 提供了用户命令行输入和参数解析的强大功能
[inquirer](https://github.com/SBoudrias/Inquirer.js) 与命令行进行交互
[chalk](https://github.com/chalk/chalk) 美化命令行打印样式
- [commander](https://github.com/tj/commander.js) 提供了用户命令行输入和参数解析的强大功能
- [inquirer](https://github.com/SBoudrias/Inquirer.js) 与命令行进行交互
- [chalk](https://github.com/chalk/chalk) 美化命令行打印样式
**文章**
- [跟着老司机玩转Node命令行](https://blog.csdn.net/qq_41903941/article/details/90259369)
## 博客
#### 静态博客评论插件
[Gitalk](https://github.com/gitalk/gitalk) |
- [Gitalk](https://github.com/gitalk/gitalk) |
[Valine](https://github.com/xCss/Valine) |
[Vssue](https://github.com/meteorlxy/vssue)
[Vssue](https://github.com/meteorlxy/vssue) 静态博客评论插件
## vuepress插件
- [vuepress-plugin-flowchart](https://flowchart.vuepress.ulivz.com/) 流程图

File diff suppressed because it is too large Load Diff

View File

@ -2,12 +2,13 @@
"name": "vuepress-theme-vdoing",
"version": "1.0.0",
"scripts": {
"dev": "node utils/frontmatter.js && node utils/sidebar.js && vuepress dev docs",
"build": "node utils/frontmatter.js && node utils/sidebar.js && vuepress build docs",
"test":"vuepress dev docs",
"dev": "vuepress dev docs",
"build": "vuepress build docs",
"deploy": "bash deploy.sh",
"updateFm": "node utils/frontmatter.js -update",
"editFm": "node utils/editFrontmatter.js",
"baiduPush": "node utils/baiduPush.js https://xugaoyi.com && bash baiduPush.sh"
"updateFm": "node vdoing/utils/frontmatter.js -update",
"editFm": "node vdoing/utils/editFrontmatter.js",
"baiduPush": "node vdoing/utils/baiduPush.js https://xugaoyi.com && bash baiduPush.sh"
},
"license": "MIT",
"devDependencies": {

View File

@ -10,7 +10,8 @@
<span v-else>{{articleInfo.classify1}}</span>
</li>
<li v-if="articleInfo.classify2">
<span>{{articleInfo.classify2}}</span>
<router-link v-if="articleInfo.cataloguePermalink" :to="articleInfo.cataloguePermalink + '/#' + encodeAnchor(articleInfo.classify2)" :title="articleInfo.classify1+'#'+articleInfo.classify2">{{articleInfo.classify2}}</router-link>
<span v-else>{{articleInfo.classify2}}</span>
</li>
</ul>
<div class="info">
@ -27,7 +28,9 @@
</template>
<script>
import encodeMixin from '../mixins/encodeAnchor'
export default {
mixins: [encodeMixin],
data() {
return {
articleInfo: {}

View File

@ -7,7 +7,7 @@
<dd class="description" v-html="pageData.description"></dd>
</dl>
</div>
<div class="catalogue-wrapper">
<div class="catalogue-wrapper" v-if="isStructuring">
<div class="catalogue-title">目录</div>
<div class="catalogue-content">
<template v-for="(item, index) in getCatalogueList()">
@ -17,7 +17,10 @@
</dt>
</dl>
<dl v-else-if="type(item) === 'object'" :key="index">
<dt>{{`${index+1}. ${item.title}`}}</dt>
<dt :id="anchorText = encodeAnchor(item.title)">
<a :href="`#${anchorText}`" class="header-anchor">#</a>
{{`${index+1}. ${item.title}`}}
</dt>
<dd>
<router-link :to="s[2]" v-for="(s, i) in item.children" :key="i">
{{`${index+1}-${i+1}. ${s[1]}`}}
@ -31,14 +34,23 @@
</template>
<script>
import encodeMixin from '../mixins/encodeAnchor'
export default {
mixins: [encodeMixin],
data() {
return {
pageData: null
pageData: null,
isStructuring: true
}
},
created() {
this.getPageData()
const sidebar = this.$themeConfig.sidebar
if (!sidebar || sidebar === 'auto') {
this.isStructuring = false
console.error("目录页数据依赖于结构化的侧边栏数据,请在主题设置中将侧边栏字段设置为'structuring',否则无法获取目录数据。")
}
},
methods: {
getPageData() {
@ -110,11 +122,17 @@ dl,dd
width 100%
a
width 100%
&:not(.inline)
dt
margin-top -($navbarHeight)
padding-top $navbarHeight
dt
font-size 1.1rem
&:hover .header-anchor
opacity 1
dd
margin-top .7rem
a
a:not(.header-anchor)
margin-bottom .5rem
display inline-block
width 50%

View File

@ -116,6 +116,7 @@ export default {
created() {
this.updateBarConfig = this.$themeConfig.updateBar
this.social = this.$themeConfig.social
console.log(this)
},
beforeMount(){
this.isMQMobile = window.innerWidth < MOBILE_DESKTOP_BREAKPOINT ? true : false; // vupressbeforeCreate(),created()访apiwindow

View File

@ -0,0 +1,9 @@
export default ({
Vue, // VuePress 正在使用的 Vue 构造函数
options, // 附加到根实例的一些选项
router, // 当前应用的路由实例
siteData // 站点元数据
}) => {
// siteData.test = '123'
// console.log(siteData)
}

View File

Before

Width:  |  Height:  |  Size: 108 B

After

Width:  |  Height:  |  Size: 108 B

View File

@ -1,8 +1,31 @@
const path = require('path')
const setFrontmatter = require('./node_utils/setFrontmatter')
const getSidebarData = require('./node_utils/getSidebarData')
const chalk = require('chalk') // 命令行打印美化
const log = console.log
// Theme API.
module.exports = (options, ctx) => {
const { themeConfig, siteConfig } = ctx
const { sourceDir, themeConfig, siteConfig } = ctx
// 自动设置front matter
setFrontmatter(sourceDir)
// 自动生成结构化侧边栏
const sidebar = themeConfig.sidebar
if(sidebar === 'structuring' || sidebar && sidebar.mode === 'structuring') {
const collapsable = themeConfig.sidebar.collapsable === false ? false : true
const sidebarData = getSidebarData(sourceDir, collapsable)
if(sidebarData) {
themeConfig.sidebar = sidebarData
log(chalk.blue('tip ') + chalk.green('add sidebar data. 侧边栏数据成功生成。'))
} else {
themeConfig.sidebar = 'auto'
log(chalk.yellow('warning: fail to add sidebar data. 未能添加侧边栏数据将切换为“auto”。'))
}
}
// resolve algolia
const isAlgoliaSearch = (

View File

@ -0,0 +1,8 @@
export default {
methods: {
encodeAnchor(str) {
str = str.replace(/ |((?=[\x21-\x7e]+)[^A-Za-z0-9])/g, '-')
return str
},
}
}

View File

@ -6,7 +6,7 @@ const path = require('path');
const logger = require('tracer').colorConsole();
const matter = require('gray-matter'); // FrontMatter解析器 https://github.com/jonschlinkert/gray-matter
const readFileList = require('./modules/readFileList');
const urlsRoot = path.join(__dirname, '..', 'urls.txt'); // 百度链接推送文件
const urlsRoot = path.join(__dirname, '..', '..', 'urls.txt'); // 百度链接推送文件
const DOMAIN = process.argv.splice(2)[0]; // 获取命令行传入的参数
if (!DOMAIN) {

View File

@ -2,7 +2,8 @@
# 需要批量处理的路径docs文件夹内的文件夹 (数组。路径docs/arr[0]/arr[1] ... )
path:
- 06.收藏夹
- 03.技术
- 02.GitHub技巧
# 要删除的字段 (数组)
delete:
@ -11,4 +12,5 @@ delete:
# 要添加、修改front matter的数据 front matter中没有的数据则添加已有的数据则覆盖
data:
# article: false
# tags:
# - GitHub技巧

View File

@ -0,0 +1,101 @@
const fs = require('fs'); // 文件模块
const path = require('path'); // 路径模块
const chalk = require('chalk') // 命令行打印美化
const matter = require('gray-matter'); // front matter解析器
const log = console.log
let catalogueData = {}; // 目录页数据
/**
* 生成侧边栏数据
* @param {String} sourceDir .md文件所在源目录(一般是docs目录)
* @param {Boolean} collapsable 是否可折叠
*/
function createSidebarData(sourceDir, collapsable){
const sidebarData = {};
const tocs = readTocs(sourceDir);
tocs.forEach(toc => { // toc是每个目录的绝对路径
const sidebarObj = mapTocToSidebar(toc, collapsable);
if (!sidebarObj.sidebar.length) {
log(chalk.yellow(`warning: 该目录 "${toc}" 内部没有任何可用文件,将忽略生成对应侧边栏`))
return;
}
sidebarData[`/${path.basename(toc)}/`] = sidebarObj.sidebar
sidebarData.catalogue = sidebarObj.catalogueData
})
return sidebarData
}
module.exports = createSidebarData;
/**
* 读取指定目录下的文件绝对路径
* @param {String} root 指定的目录
*/
function readTocs(root){
const result = [];
const files = fs.readdirSync(root); // 读取目录,返回数组成员是root底下所有的目录名 (包含文件夹和文件)
files.forEach(name => {
const file = path.resolve(root, name); // 将路径或路径片段的序列解析为绝对路径
if (fs.statSync(file).isDirectory() && name !== '.vuepress') { // 是否为文件夹目录,并排除.vuepress文件夹
result.push(file);
}
})
return result;
}
/**
* 将目录映射为对应的侧边栏配置数据
* @param {String} root
* @param {Boolean} collapsable
* @param {String} prefix
*/
function mapTocToSidebar(root, collapsable, prefix){
prefix = prefix || '';
let sidebar = [];
const files = fs.readdirSync(root); // 读取目录(文件和文件夹),返回数组
files.forEach(filename => {
const file = path.resolve(root, filename); // 方法:将路径或路径片段的序列解析为绝对路径
const stat = fs.statSync(file); // 文件信息
let [order, title, type] = filename.split('.');
order = parseInt(order, 10);
if (isNaN(order) || order < 0) {
log(chalk.yellow(`warning: 该文件 "${file}" 序号出错请填写正确的序号序号约定请查看https://github.com/xugaoyi/vuepress-theme-vdoing/issues/113`))
return;
}
if (sidebar[order]) { // 判断序号是否已经存在
log(chalk.yellow(`warning: 该文件 "${file}" 的序号在同一级别中重复出现,将会被覆盖`))
}
if(stat.isDirectory()){ // 是文件夹目录
sidebar[order] = {
title,
collapsable, // 是否可折叠默认true
children: mapTocToSidebar(file, collapsable, prefix + filename + '/').sidebar // 子栏路径添加前缀
}
} else { // 是文件
if (type !== 'md') {
log(chalk.yellow(`warning: 该文件 "${file}" 非.md格式文件不支持该文件类型`))
return;
}
const contentStr = fs.readFileSync(file, 'utf8') // 读取md文件内容返回字符串
const { data } = matter(contentStr) // 解析出front matter数据
const permalink = data.permalink || ''
sidebar[order] = [prefix + filename, title, permalink ]; // [<路径>, <文件标题>, <永久链接>]
// 目录页和永久链接,用于给面包屑提供数据
const pageComponent = data.pageComponent
if (pageComponent && pageComponent.name && pageComponent.name === "Catalogue") {
catalogueData[title] = permalink
}
}
})
sidebar = sidebar.filter(item => item !== null && item !== undefined);
return {
sidebar,
catalogueData
};
}

View File

@ -0,0 +1,38 @@
/**
* 读取所有md文件数据
*/
const fs = require('fs'); // 文件模块
const path = require('path'); // 路径模块
const MD5 = require('md5.js');
// const docsRoot = path.join(__dirname, '..', '..', '..', 'docs'); // docs文件路径
const PREFIX = '/pages/'; // 链接前缀
function readFileList(dir, filesList = []) {
const files = fs.readdirSync(dir);
files.forEach( (item, index) => {
let filePath = path.join(dir, item);
const stat = fs.statSync(filePath);
if (stat.isDirectory() && item !== '.vuepress') {
readFileList(path.join(dir, item), filesList); //递归读取文件
} else {
if(path.basename(dir) !== 'docs'){ // 过滤docs目录级下的文件
let [order, name, type] = path.basename(filePath).split('.');
order = parseInt(order, 10);
if(type === 'md'){ // 过滤非md文件
filesList.push({
order,
name,
filePath,
permalink: PREFIX + new MD5().update(name).digest('hex').substring(0,16) // 永久链接
});
}
}
}
});
return filesList;
}
module.exports = readFileList;

View File

@ -0,0 +1,80 @@
const fs = require('fs'); // 文件模块
const matter = require('gray-matter'); // FrontMatter解析器 https://github.com/jonschlinkert/gray-matter
const jsonToYaml = require('json2yaml')
const chalk = require('chalk') // 命令行打印美化
const arg = process.argv.splice(2)[0]; // 获取命令行传入的参数
const readFileList = require('./modules/readFileList');
const { type, repairDate, dateFormat} = require('./modules/fn');
const log = console.log
/**
* .md文件设置frontmatter(标题日期永久链接)
*/
function setFrontmatter(sourceDir) {
const files = readFileList(sourceDir); // 读取所有md文件数据
files.forEach(file => {
let dataStr = fs.readFileSync(file.filePath, 'utf8');// 读取每个md文件内容
/**
* 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); // 写入
log(chalk.blue('tip ') + chalk.green(`write frontmatter(写入frontmatter)${file.filePath} `))
} else { // 已有FrontMatter
const matterData = fileMatterObj.data;
let mark = false;
// 已有FrontMatter但是没有title、date、permalink数据的
if (!matterData.hasOwnProperty('title')) {
matterData.title = file.name;
mark = true;
}
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) {
if(matterData.date && type(matterData.date) === 'date') {
matterData.date = repairDate(matterData.date) // 修复时间格式
}
const newData = jsonToYaml.stringify(matterData).replace(/\n\s{2}/g,"\n").replace(/"/g,"") + '---\r\n' + fileMatterObj.content;
fs.writeFileSync(file.filePath, newData); // 写入
log(chalk.blue('tip ') + chalk.green(`write frontmatter(写入frontmatter)${file.filePath} `))
}
// 更新title和permalink
if (arg === '-update' && matterData.title != file.name){ // 当title和文件名不一致时才更新
matterData.title = file.name;
if (/pages/.test(matterData.permalink)) {
matterData.permalink = file.permalink;
}
// 修复date时区和格式被修改的问题 (并非更新date的值)
matterData.date = repairDate(matterData.date);
const newData2 = jsonToYaml.stringify(JSON.parse(JSON.stringify(matterData))).replace(/\n\s{2}/g,"\n").replace(/"/g,"") + '---\r\n' + fileMatterObj.content;
fs.writeFileSync(file.filePath, newData2); // 写入
log(chalk.blue('tip ') + chalk.green(`update frontmatter title and permalink(更新frontmatter的标题和永久链接)${file.filePath} `))
}
}
})
}
module.exports = setFrontmatter;

35
vdoing/utils/baiduPush.js Normal file
View File

@ -0,0 +1,35 @@
/**
* 生成百度链接推送文件
*/
const fs = require('fs');
const path = require('path');
const logger = require('tracer').colorConsole();
const matter = require('gray-matter'); // FrontMatter解析器 https://github.com/jonschlinkert/gray-matter
const readFileList = require('./modules/readFileList');
const urlsRoot = path.join(__dirname, '..', '..', 'urls.txt'); // 百度链接推送文件
const DOMAIN = process.argv.splice(2)[0]; // 获取命令行传入的参数
if (!DOMAIN) {
logger.error('请在运行此文件时指定一个你要进行百度推送的域名参数node utils/baiduPush.js https://xugaoyi.com')
return
}
main();
/**
* 主体函数
*/
function main() {
fs.writeFileSync(urlsRoot, DOMAIN)
const files = readFileList(); // 读取所有md文件数据
files.forEach( file => {
const { data } = matter(fs.readFileSync(file.filePath, 'utf8'));
if (data.permalink) {
const link = `\r\n${DOMAIN}${data.permalink}/`;
console.log(link)
fs.appendFileSync(urlsRoot, link);
}
})
}

16
vdoing/utils/config.yml Normal file
View File

@ -0,0 +1,16 @@
#批量添加和修改、删除front matter配置文件
# 需要批量处理的路径docs文件夹内的文件夹 (数组。路径docs/arr[0]/arr[1] ... )
path:
- 03.技术
- 02.GitHub技巧
# 要删除的字段 (数组)
delete:
# - author
# - article
# 要添加、修改front matter的数据 front matter中没有的数据则添加已有的数据则覆盖
data:
# tags:
# - GitHub技巧

View File

@ -0,0 +1,85 @@
/**
* 批量添加和修改front matter 需要配置 ./config.yml 文件
*/
const fs = require('fs'); // 文件模块
const path = require('path'); // 路径模块
const matter = require('gray-matter'); // front matter解析器 https://github.com/jonschlinkert/gray-matter
const jsonToYaml = require('json2yaml')
const yamlToJs = require('yamljs')
const inquirer = require('inquirer') // 命令行操作
const chalk = require('chalk') // 命令行打印美化
const readFileList = require('./modules/readFileList');
const { type, repairDate} = require('./modules/fn');
const log = console.log
const configPath = path.join(__dirname, 'config.yml') // 配置文件的路径
main();
/**
* 主体函数
*/
async function main() {
const promptList = [{
type: "confirm",
message: "批量操作frontmatter有修改数据的风险确定要继续吗",
name: "edit",
}];
let edit = true;
await inquirer.prompt(promptList).then(answers => {
edit = answers.edit
})
if(!edit) { // 退出操作
return
}
const config = yamlToJs.load(configPath) // 解析配置文件的数据转为js对象
if (type(config.path) !== 'array') {
log(chalk.red('路径配置有误path字段应该是一个数组'))
return
}
const filePath = path.join(__dirname, '..', 'docs', ...config.path); // 要批量修改的文件路径
const files = readFileList(filePath); // 读取所有md文件数据
files.forEach(file => {
let dataStr = fs.readFileSync(file.filePath, 'utf8');// 读取每个md文件的内容
const fileMatterObj = matter(dataStr) // 解析md文件的front Matter。 fileMatterObj => {content:'剔除frontmatter后的文件内容字符串', data:{<frontmatter对象>}, ...}
let matterData = fileMatterObj.data; // 得到md文件的front Matter
let mark = false
// 删除操作
if (config.delete) {
if( type(config.delete) !== 'array' ) {
log(chalk.yellow('未能完成删除操作delete字段的值应该是一个数组'))
} else {
config.delete.forEach(item => {
delete matterData[item]
})
mark = true
}
}
// 添加、修改操作
if (type(config.data) === 'object') {
Object.assign(matterData, config.data) // 将配置数据合并到front Matter对象
mark = true
}
// 没有任何操作时跳出
if (!mark) {
return
}
if(matterData.date && type(matterData.date) === 'date') {
matterData.date = repairDate(matterData.date) // 修复时间格式
}
const newData = jsonToYaml.stringify(matterData).replace(/\n\s{2}/g,"\n").replace(/"/g,"") + '---\r\n' + fileMatterObj.content;
fs.writeFileSync(file.filePath, newData); // 写入
log(`update frontmatter${file.filePath} `)
})
}

View File

@ -0,0 +1,21 @@
// 类型判断
exports.type = function (o){
var s = Object.prototype.toString.call(o)
return s.match(/\[object (.*?)\]/)[1].toLowerCase()
}
// 修复date时区格式的问题
exports.repairDate = function (date) {
date = new Date(date);
return `${date.getUTCFullYear()}-${zero(date.getUTCMonth()+1)}-${zero(date.getUTCDate())} ${zero(date.getUTCHours())}:${zero(date.getUTCMinutes())}:${zero(date.getUTCSeconds())}`;
}
// 日期的格式
exports.dateFormat = function (date) {
return `${date.getFullYear()}-${zero(date.getMonth()+1)}-${zero(date.getDate())} ${zero(date.getHours())}:${zero(date.getMinutes())}:${zero(date.getSeconds())}`
}
// 小于10补0
function zero(d){
return d.toString().padStart(2,'0')
}

View File

@ -4,7 +4,7 @@
const fs = require('fs'); // 文件模块
const path = require('path'); // 路径模块
const MD5 = require('md5.js');
const docsRoot = path.join(__dirname, '..', '..', 'docs'); // docs文件路径
const docsRoot = path.join(__dirname, '..', '..', '..', 'docs'); // docs文件路径
const PREFIX = '/pages/'; // 链接前缀

View File

@ -8,8 +8,8 @@ const ejs = require('ejs'); // ejs模板引擎
const logger = require('tracer').colorConsole(); // 控制台工具(用于控制台打印信息包含时间、打印类型、文件及代码行号、对象、颜色)
const matter = require('gray-matter'); // FrontMatter解析器
const docsRoot = path.join(__dirname, '..', 'docs'); // docs文件路径
const sidebarPath = path.join(__dirname, '..', 'docs', '.vuepress', 'config', 'sidebar-auto.js'); // 侧边栏js文件要保存的路径
const docsRoot = path.join(__dirname, '..', '..', 'docs'); // docs文件路径
const sidebarPath = path.join(__dirname, '..', '..', 'docs', '.vuepress', 'config', 'sidebar-auto.js'); // 侧边栏js文件要保存的路径
const catalogueData = {}; // 目录页数据
// sidebar-auto.js代码模板