lisang
/
vuepress-theme-vdoing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善博客功能

This commit is contained in:
xugaoyi 2020-01-04 17:41:08 +08:00
parent eebbe04c6e
commit 4ce023e21c
21 changed files with 432 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
docs/.vuepress/config.js
View File

@ -5,11 +5,11 @@ const logger = require('tracer').colorConsole();
module.exports = {
title: 'Evan Blog', // 标题
description: 'web前端技术博客,基于vuepress构建,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 <meta> 标签渲染到当前页面的 HTML 中
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/logo2.png' }], //favicons，资源放在public文件夹
['meta', { name: 'keywords', content: '个人博客,技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown'}],
['meta', { name: 'keywords', content: '前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown'}],
['meta', { name: 'baidu-site-verification', content: '7F55weZDDc'}],
// ['script', { src: 'https://hm.baidu.com/hm.js?837775213e724293b4af2b9526e238b4'}]
],
@ -21,22 +21,36 @@ module.exports = {
sidebar, // 侧边栏 'auto' | 自定义
logo: '/img/logo2.png', // 导航栏logo
repo: 'xugaoyi/blog', // 导航栏右侧生成Github链接
lastUpdated: '上次更新', // 更新的时间，及前缀文字 string | boolean
// editLinks: true, // 编辑链接
// editLinkText: '在 Github 上编辑此页',
lastUpdated: '上次更新', // 更新的时间，及前缀文字 string | boolean (取值为git提交时间)
docsDir: 'docs', // 编辑的文件夹
editLinks: true, // 编辑链接
editLinkText: '在 Github 上编辑此页',
// displayAllHeaders: true, // 默认值：false
},
plugins: [ // 插件
require('./plugins/love_me'), // 鼠标点击爱心特效
'vuepress-plugin-baidu-autopush', // 百度自动推送，作用：加快将页面推送给百度搜索
'@vuepress/back-to-top', // 返回顶部
// [
// '@vuepress/medium-zoom', // 缩放图片
// {
// options: {
// background: 'rgba(0,0,0,0.8)'
// }
// }
// ],
[
'@vuepress/medium-zoom', // 缩放图片
{
options: {
background: 'rgba(0,0,0,0.8)'
}
}
],
'vuepress-plugin-zooming',
// {
// selector: '.my-wrapper .my-img',
// delay: 1000,
// options: {
// bgColor: 'black',
// zIndex: 10000,
// },
// },
],
[
'vuepress-plugin-baidu-tongji', // 百度统计，https://tongji.baidu.com
{
@ -62,6 +76,15 @@ module.exports = {
body:"页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname) %>" // GitHub issue 的内容
}
}
],
[
'@vuepress/last-updated', // "上次更新"时间格式
{
transformer: (timestamp, lang) => {
const moment = require('moment') // https://momentjs.com/
return moment(timestamp).format('YYYY/MM/DD, H:MM:SS');
}
}
]
],
// configureWebpack: {

1
docs/.vuepress/config/nav.js
View File

@ -8,6 +8,7 @@ module.exports = [
{text: '技术文档', link: '/pages/9a7ee40fc232253e/'},
{text: 'GitHub', link: '/pages/4c778760be26d8b3/'},
{text: 'Nodejs', link: '/pages/117708e0af7f0bd9/'},
{text: '代码段', link: '/pages/40f623be692cf8bc/'},
{text: '博客搭建', link: '/pages/41f87d890d0a02af/'},
]
},

4
docs/.vuepress/config/sidebar-auto.js
View File

@ -6,9 +6,9 @@ module.exports = {
"/02.页面/": [{"title":"html-css","collapsable":false,"children":[["01.html-css/01.flex布局语法.md","flex布局语法"],["01.html-css/02.flex布局案例-基础.md","flex布局案例-基础"],["01.html-css/03.flex布局案例-骰子.md","flex布局案例-骰子"],["01.html-css/04.flex布局案例-圣杯布局.md","flex布局案例-圣杯布局"],["01.html-css/05.flex布局案例-网格布局.md","flex布局案例-网格布局"],["01.html-css/06.flex布局案例-输入框布局.md","flex布局案例-输入框布局"],["01.html-css/07.CSS3之transform过渡.md","CSS3之transform过渡"],["01.html-css/08.CSS3之animation动画.md","CSS3之animation动画"]]}],
"/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实现静态博客无后台评论系统"]]}],
"/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.判断是否为移动端浏览器.md","判断是否为移动端浏览器"]]},{"title":"博客搭建","collapsable":false,"children":[["05.博客搭建/01.解决百度无法收录搭建在GitHub上的个人博客的问题.md","解决百度无法收录搭建在GitHub上的个人博客的问题"],["05.博客搭建/02.使用Gitalk实现静态博客无后台评论系统.md","使用Gitalk实现静态博客无后台评论系统"],["05.博客搭建/03.GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床.md","GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床"]]}],
"/04.其他/": [{"title":"学习","collapsable":false,"children":[["01.学习/01.学习网站.md","学习网站"],["01.学习/02.学习效率低，忘性很大怎么办？.md","学习效率低，忘性很大怎么办？"]]},{"title":"笔记","collapsable":false,"children":[["02.笔记/01.小程序笔记.md","小程序笔记"]]},{"title":"面试","collapsable":false,"children":[["03.面试/01.面试问题集锦.md","面试问题集锦"]]},["04.在线工具.md","在线工具"],["05.友情链接.md","友情链接"]],
"/04.其他/": [{"title":"学习","collapsable":false,"children":[["01.学习/01.学习网站.md","学习网站"],["01.学习/02.提高学习效率的策略.md","提高学习效率的策略"],["01.学习/03.提高记忆的技巧.md","提高记忆的技巧"],["01.学习/04.自律小建议.md","自律小建议"],["01.学习/05.处理问题的思路.md","处理问题的思路"]]},{"title":"笔记","collapsable":false,"children":[["02.笔记/01.小程序笔记.md","小程序笔记"]]},{"title":"面试","collapsable":false,"children":[["03.面试/01.面试问题集锦.md","面试问题集锦"]]},["04.在线工具.md","在线工具"],["05.友情链接.md","友情链接"]],
"/05.博主/": [["01.博主.md","博主"]],

7
docs/.vuepress/plugins/love_me/index.js Normal file
View File

@ -0,0 +1,7 @@
const path= require('path')
module.exports = {
enhanceAppFiles: [
path.resolve(__dirname, 'love_me.js')
]
}

51
docs/.vuepress/plugins/love_me/love_me.js Normal file
View File

@ -0,0 +1,51 @@
export default () => {
if (typeof window !== "undefined") {
(function(e, t, a) {
function r() {
for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
requestAnimationFrame(r)
}
function n() {
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function(e) {
t && t(),
o(e)
}
}
function o(e) {
var a = t.createElement("div");
a.className = "heart",
s.push({
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: c()
}),
t.body.appendChild(a)
}
function i(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch(t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName("head")[0].appendChild(a)
}
function c() {
return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"
}
var s = [];
e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
function(e) {
setTimeout(e, 1e3 / 60)
},
i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
n(),
r()
})(window, document)
}
}

33
docs/.vuepress/styles/index.styl
View File

@ -1,3 +1,13 @@
// 表格宽度
table
width: 100%;
display: inline-table;
// 首页描述
.description
color: lighten($textColor, 20%)!important;
// 评论区样式
#vuepress-plugin-comment
max-width $contentWidth
margin 0 auto
@ -7,14 +17,10 @@
@media (max-width: $MQMobileNarrow)
padding 1.5rem
// 侧边栏高出评论区
.sidebar
z-index 11
// 首页描述
.description
color: lighten($textColor, 20%)!important;
// 评论区颜色重置
.gt-container
.gt-btn
@ -26,4 +32,19 @@
a
color $accentColor!important
.gt-svg svg
fill $accentColor!important
fill $accentColor!important
// qq徽章
.qq{position: relative;}
.qq::after{
content: "单身可撩";
background: $accentColor;
color:#fff;
padding: 0 5px;
border-radius: 10px;
font-size:12px;
position: absolute;
top: -4px;
right: -56px;
transform:scale(0.85);
}

4
docs/03.技术/02.GitHub/02.GitHub Actions 实现自动部署静态博客.md
View File

@ -25,7 +25,7 @@ coding pages在国内的访问速度比github pages要快很多，而且还可
然后，将这两个token同时储存到github仓库的`Settings/Secrets`里面。变量名可以随便取，但是注意要和后面的`ci.yml`文件内的变量名一致，这里取的是`ACCESS_TOKEN`和`CODING_TOKEN`。
![token设置](https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/token.jpg 'token设置')
![token设置](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103124812.jpg 'token设置')
GitHub Actions 的配置文件叫做 workflow 文件，存放在代码仓库的`.github/workflows`目录。
@ -129,7 +129,7 @@ rm -rf docs/.vuepress/dist
如下你想查看部署日志，你可以到github仓库的Actions这一项查看。
![部署日志](https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/20191227142128.png '部署日志')
![部署日志](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103124813.png '部署日志')

6
docs/03.技术/02.GitHub/03.GitHub Actions 定时运行代码：每天定时百度链接推送.md
View File

@ -7,7 +7,7 @@ permalink: /pages/f44d2f9ad04ab8d3
## 前言
最近有个想法💡，就是想让百度尽快收录我的博客页面，在百度推送工具当中除了有自动推送的代码嵌入网站之外，还有一个实时的主动推送更高效。
博客上线已经有些日子了，却发现百度迟迟没有收录我的博客页面，在百度推送工具当中除了有自动推送的代码嵌入网站之外，还有一个实时的主动推送更高效。
于是我想到了用GitHub Actions的定时运行代码功能来每天自动运行命令生成所有博客链接并进行一次性推送给百度。
@ -17,11 +17,11 @@ GitHub Actions 是一个 CI/CD（持续集成/持续部署）工具，但也可
链接主动推送在百度站长中有介绍，如图。
![主动提交](https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/20191230214947.png)
![主动提交](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103124306.png)
具体使用方法就是创建一个文件`urls.txt`，文件内每行一条链接的格式写入提交的多个链接，如图。
![urls.txt](https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/20191230214358.png)
![urls.txt](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103124305.png)
运行命令

16
docs/03.技术/04.代码段/01.判断是否为移动端浏览器.md Normal file
View File

@ -0,0 +1,16 @@
---
title: 判断是否为移动端浏览器
date: 2020-01-04
permalink: /pages/40f623be692cf8bc
---
# 判断是否为移动端浏览器
```js
const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
if(flag){
// 移动端
} else {
// PC端
}
```

2
docs/03.技术/04.博客搭建/01.解决百度无法收录搭建在GitHub上的个人博客的问题.md → docs/03.技术/05.博客搭建/01.解决百度无法收录搭建在GitHub上的个人博客的问题.md
View File

@ -21,7 +21,7 @@ permalink: /pages/41f87d890d0a02af
1、注册[coding](https://dev.tencent.com/)账号，创建仓库，把代码推送到coding仓库，并开启pages服务。
> git 操作部分和使用github的差不多，不了解git操作的可以看我的另一篇文章：[Git使用文档](./git.md)
> git 操作部分和使用github的差不多，不了解git操作的可以看我的另一篇文章：[Git使用手册](https://xugaoyi.com/pages/9a7ee40fc232253e/)
2、我的博客项目使用vuepress搭建的，使用的是如下自动部署脚本，同时将代码推送到github和conding。

0
docs/03.技术/04.博客搭建/02.使用Gitalk实现静态博客无后台评论系统.md → docs/03.技术/05.博客搭建/02.使用Gitalk实现静态博客无后台评论系统.md
View File

49
docs/03.技术/05.博客搭建/03.GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床.md Normal file
View File

@ -0,0 +1,49 @@
---
title: GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床
date: 2020-01-03
permalink: /pages/a5f73af5185fdf0a
---
# GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床
## 前言
**Q：为什么要使用图床呢？什么是图床？**
A：写博客文章时，图片的上传和存放是一个问题，有的朋友可能会把图片放到和博客同一个仓库当中，使用相对路径来引用，这样后期维护起来会比较麻烦。还有的朋友会在不同的平台发布同一篇文章，这样一来每个平台都要上传图片，为了解决这些问题，比较推荐的做法是把图片统一上传到一个在线的第三方静态资源库中，我们把这个资源库称为图床，其返回一个图片的URL，使用`markdown+图片url`的方式写作文章，一次编写，到处使用😙~
**Q：图床的选择**
A：推荐使用GitHub作为图床，特点是免费、稳定，有一个小缺点是国内访问速度慢，不过没关系，可以使用`jsDelivr`免费CDN加速。
**Q：jsDelivr是什么？**
A：`jsDelivr`是国外的一家优秀的公共 CDN 服务提供商，该平台是首个「打通中国大陆与海外的免费CDN服务」，无须担心中国防火墙问题而影响使用。官网：<http://www.jsdelivr.com/>
## 图床打造
1. 新建GitHub仓库，注意仓库要设置成**公开**
2. 参照 [官方文档](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line) 生成一个token密钥
3. 在 [这里](https://github.com/Molunerfinn/picgo/releases) 下载PicGo，安装完成后打开，`图床设置` 选 `GitHub图床`，并填写相应的信息
* 仓库名：前面新建的仓库，格式：`<用户名>/<仓库名>`
* 分支名：填写主分支`master`即可
* Token：前面生成的token密钥
* 存储路径：按你自己的需求填写
* 自定义域名：图片上传后，PicGo 会按照 `自定义域名+上传的图片名` 的方式生成访问链接，此处我们填写`jsDelivr`的CDN加速地址，格式：`https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>`
![](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103105720.png)
4. 使用<https://tinypng.cn/>压缩你要上传的图片（如图片已经很小或你有更好的压缩工具可省略这一步）
5. 在PigGo的`上传区`上传你的图片，到`相册`一键复制刚刚上传的图片URL，至此，你就可以在你的文章当中愉快的插入图片啦~， 更多功能自己去探索吧~~
![](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103121148.png)

156
docs/04.其他/01.学习/02.学习效率低，忘性很大怎么办？.md → docs/04.其他/01.学习/02.提高学习效率的策略.md
View File

@ -1,15 +1,13 @@
---
title: 学习效率低，忘性很大怎么办？
date: 2019-12-25
permalink: /pages/839158575e5c4866
title: 提高学习效率的策略
date: 2020-01-04
permalink: /pages/a8692ab3bdcb4588
---
# 学习效率低，忘性很大怎么办？
## 关于学习
# 提高学习效率的策略
推荐一本关于学习方法的书《认知天性》，里面有讲到有一些简单实用的学习策略，能让大家学的更好、记得更牢，而且这些策略人人可用，时时可用。这些方法包括各种形式的**检索练习**——例如小的测试和自测，**间隔练习**、**穿插**不同但相关科目或技能的练习（**多样化练习**），在别人教给你解决方案前自己先试着解决问题，从不同类型问题中提取基本原理和规则。由于学习是反复的过程，需要复习早先学过的东西，持续更新已知，并把它们和新知识联系起来。
#### 检索式学习
### 检索式学习
练习从记忆中检索新知识或新技能是有效的学习工具，也是保持长久记忆的有力武器。但凡需要大脑记忆、需要在将来回忆的东西，都可以用到它——对于事实、复杂的概念、解决问题的技巧、运动技能来说都适用。
@ -19,30 +17,30 @@ permalink: /pages/839158575e5c4866
反复检索不仅能让记忆更持久，还能让知识在更多变的环境中更容易被检索，而且可以解决更多的问题。
#### 频繁的集中练习只会产生短期记忆
### 频繁的集中练习只会产生短期记忆
人们顽固地相信，自己把心思放在一件事上，拼命重复就能学得更好，认为这些观点经受住了时间的考验，而且“练习，练习，再练习”的明显收效再次证明了这种方法的好处。但是，科学家们把习得技能阶段的这种成绩称为“暂时的优势”，并把它同“潜在的习惯优势”区分开来。形成习惯优势有种种技巧，例如有间隔的练习、有穿插内容的练习，以及多样化练习，这些技巧恰恰会放缓有明显成果的学习进程，它们不会在练习中提高我们的表现。我们从表面上看不到成绩提高，也就没有付出努力的动力（大多数人的学习心理就是这样，在看不到成果的时候容易失去动力）。填鸭式练习是集中练习的一种形式，它一直被比作贪食症——吃得不少，但没过多久基本上都吐出来了。
#### 间隔练习使知识存储更牢固
### 间隔练习使知识存储更牢固
把学习与练习间隔开来分期进行，让两者之间隔上一定时间，这样做就能让学习成果更加显著、记忆更加牢固，能有效地形成习惯优势。**间隔多长时间才够？答案很简单：从最低限度上说，间隔的时间足够出现一点儿遗忘就对了**。练习环节中间出现一点儿遗忘是好事，只要它能让人更加努力地练习就行。话说回来，你肯定不愿意忘掉太多东西，以至于检索最终变成了对资料的重新学习。间隔一段时间再练习能巩固记忆。睡眠似乎在巩固记忆的工作中扮演了重要角色，所以在两次练习间至少间隔一天应该是不错的做法。
要当心熟悉这个陷阱：你感觉自己明白了某样东西，觉得不再需要练习了。如果想走捷径，这种熟悉会让你在自测时受伤。道格拉斯·拉尔森说：“你必须自觉地说，好吧，我要强迫自己把这些全想起来，要是我想不起来，那我是忘掉了什么，我怎，么会不知道那个呢?’如果是教师出题测验，那就一下子变成你
#### 穿插练习有助于长期记忆
### 穿插练习有助于长期记忆
穿插练习两样或更多的内容同样也提供了一种间隔。穿插内容练习有助于发展人们辨识不同问题的能力，也是在培养人们从不断增加的解决方案中寻找合适工具的能力。进行穿插内容练习，不能是完成一个科目的全部练习再跳到下一个科目。你需要在每个科目的练习完成前就跳到下一个科目。我们的一个朋友这样描述自己的经历，“我去上了一堂冰球课，学习滑冰、控球、射门。滑冰练习还没进行多长时间，自己刚刚有点儿上手的感觉，教练就转到控球练习上了，这让我感到非常沮丧。灰心地到家后，我说，‘为什么教练不让我们一次把技能练好呢？”其实他是遇上了少有的好教练。这位教练懂得分散精力练习不同技能要比下力气一次掌握一件事更有效果。球员感到沮丧是因为并没有在短时间内看到成果，但到下一周，无论是滑冰、控球，还是其他内容，他都会获得全面进步，效果会好于每次只专心练习一项技能。
#### 多样化练习促进知识的活学活用
### 多样化练习促进知识的活学活用
与穿插内容练习一样，多样化练习有助于学习者树立更开阔的心理模式。这是一种能力，掌握它的人可以评估不断变化的条件，并调整应对方式进行适应。可以说，穿插内容练习与多样化练习有助于学习者超越暂时性记忆，步入更高层次的概念性学习，并把它们应用到实际情景中，从而获得更全面、更深刻、更持久的学习效果。这些学习成果在运动技能中就表现为潜在的习惯优势。
#### 小总结
### 小总结
有间隔、有内容穿插出现，以及内容多样化，其实就是我们生活的本来面貌。程序员每开发一个项目，都是一次测验，也是一次检索练习的锻炼。每次常规的拦车检查对于警察来说都是一次测验，而且每次检查都不一样，这会加强警察的外显记忆与内隐记忆。只要他上心，今后的工作就会更有效率。人们常说的一句话是“从经验中学习”。有些人似乎从来不学习，学与不学的一个区别可能就在于，人们是否培养了反思（总结）的习惯。反思（总结）是检索练习的一种形式（发生了什么？我是怎么做的？怎样才能有用？），而且辅以细化加强（下次我要采取别的什么方法？）
#### 知识的“滚雪球”效应
### 知识的“滚雪球”效应
学习的过程至少可以分成三步：最开始是对短期工作记忆中信息的**编码**。这时信息还没有被巩固成长期记忆中坚实的知识表征。**巩固**会辨识并稳定记忆线索，赋予其含义，把它们与过去的经验以及长期记忆中已经存储下来的其他知识联系起来。**检索**会更新所学的东西，并让你做到学以致用。
@ -66,134 +64,4 @@ permalink: /pages/839158575e5c4866
——以上内容摘自《认知天性》，结合本人的个人理解，更多内容请查看该书籍。
![认知天性](https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/rztx.png)
## 记忆技巧
1. **多个感官并用**
记忆时调用一切感官。没人的话可以大声阅读，有人的话可以默念，轻微摇晃手指等，有助于保持专注。
2. **重复记忆**
每天留出半个到一个小时，梳理总结今天所学的内容。每一章复习完成后做系统的知识整理。
3. **建立关联**
把你所学的新知识与已有的认知建立联系，对于记忆事半功倍。
4. **场景记忆**
把知识具象化为一个场景，想象自己在何时何地能用这些知识，与自身发生联系。
5. **提出问题**
每学习一个知识点，试着提问，然后给出答案。用了就记住了。
## 自律小建议
- 培养专注，练习冥想、瑜伽等
- 排除外界干扰，如: 图书馆学习
- 手机调到勿扰
* 规定学习时间
* [**番茄时间管理**](https://baike.baidu.com/item/%E7%95%AA%E8%8C%84%E5%B7%A5%E4%BD%9C%E6%B3%95/6353502?fr=aladdin)——使用番茄时间管理法，选择一个待完成的任务，将番茄时间设为25分钟，专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起，然后短暂休息一下（5分钟就行），每4个番茄时段多休息一会儿。
> 人的大脑在记忆一个东西的时候，有短期记忆和长期记忆之分。大脑编码内容进行长期记忆，需要一个过程的，可能是几个小时或几天，集中练习就给不了这个过程，所以集中练习带来的效果是短期记忆，而进行间隔练习，大脑则有时间进行充分的编码，学习到的知识就会储存为长期记忆。
>
>
>
> 推荐几种间歇锻炼方法：体能训练、课间操、眼保操、拉伸训练...
>
> 有好的身体可以使大脑更清醒哟~
>
* 限制娱乐时间
* 减少使用娱乐app的时间（苹果手机可设定屏幕使用时间）
* 推荐观看>[B站某位UP主的视频《每天只看半小时手机，坚持一周后我有哪些变化？》](https://www.bilibili.com/video/av47180907)
* 戒网瘾（特别是游戏）
* 除了手机、游戏以外，周围有很多美好的事物值得我们去关注。
* 设定目标，给自己压力
* 想要更好的薪水和职位？多花点时间在学习上吧~
* 潜意识暗示自己，建立信心，让自己变得更优秀，然后去挑战更高的目标
* **优秀的人仍在不断努力**——且看大神 [阮一峰github](https://github.com/ruanyf) 提交记录
## 工作中遇到问题？
遇到问题卡住了，可以先休息一会儿，调整一下状态，喝杯水走走放松放松，然后想想有没有遗漏的地方，或者其他的解决方案呢
## 这个问题我该怎么解决呢？
1. **学会搜索**
* 关键词
* 多关键词
* 加入时间
* 加入特定的社区
* site用法
2. **高阶搜索方法**
* 英文搜索（必应搜索、google搜索，很多英文文档或文章相对来说层数结构很清晰）
* 视频站搜索（<http://www.youtube.com/>、<http://egghead.io>）
* 百度盘搜索
* 指定文件后缀
3. **寻求帮助**
* 找同学
* 找同事
* 找朋友
* 找社区（<https://github.com/>、<https://stackoverflow.com/>、<https://segmentfault.com/>、<https://juejin.im/>>）
4. **开拓思路——发散性解决问题**
* 去问问原作者？
* 去发个邮件/twitter/facebook?
* 去找Boss要资源？
* 加入公共社区参与讨论?
* ...
![认知天性](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103144032.png '认知天性')

29
docs/04.其他/01.学习/03.提高记忆的技巧.md Normal file
View File

@ -0,0 +1,29 @@
---
title: 提高记忆的技巧
date: 2020-01-03
permalink: /pages/996822b2a2ca6e3b
---
# 提高记忆的技巧
1. **多个感官并用**
记忆时调用一切感官。没人的话可以大声阅读，有人的话可以默念，轻微摇晃手指等，有助于保持专注。
2. **重复记忆**
每天留出半个到一个小时，梳理总结今天所学的内容。每一章复习完成后做系统的知识整理。
3. **建立关联**
把你所学的新知识与已有的认知建立联系，对于记忆事半功倍。
4. **场景记忆**
把知识具象化为一个场景，想象自己在何时何地能用这些知识，与自身发生联系。
5. **提出问题**
每学习一个知识点，试着提问，然后给出答案。用了就记住了。

46
docs/04.其他/01.学习/04.自律小建议.md Normal file
View File

@ -0,0 +1,46 @@
---
title: 自律小建议
date: 2020-01-03
permalink: /pages/c3f302a03c8daf79
---
# 自律小建议
- **培养专注**
- 练习冥想、瑜伽等
- **排除外界干扰**
- 手机调到勿扰，在图书馆学习等
* **规定学习时间**
* [**番茄时间管理**](https://baike.baidu.com/item/%E7%95%AA%E8%8C%84%E5%B7%A5%E4%BD%9C%E6%B3%95/6353502?fr=aladdin)——使用番茄时间管理法，选择一个待完成的任务，将番茄时间设为25分钟，专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起，然后短暂休息一下（5分钟就行），每4个番茄时段多休息一会儿。
> 人的大脑在记忆一个东西的时候，有短期记忆和长期记忆之分。大脑编码内容进行长期记忆，需要一个过程的，可能是几个小时或几天，集中练习就给不了这个过程，所以集中练习带来的效果是短期记忆，而进行间隔练习，大脑则有时间进行充分的编码，学习到的知识就会储存为长期记忆。
>
>
>
> 推荐几种间歇锻炼方法：体能训练、课间操、眼保操、拉伸训练...
>
> 有好的身体可以使大脑更清醒哟~
>
* **限制娱乐时间**
* 减少使用娱乐app的时间（苹果手机可设定屏幕使用时间）
* 推荐观看>[B站某位UP主的视频《每天只看半小时手机，坚持一周后我有哪些变化？》](https://www.bilibili.com/video/av47180907)
* **戒网瘾（特别是游戏）**
* 除了手机、游戏以外，周围有很多美好的事物值得我们去关注。
* **设定目标**
* 想要更好的薪水和职位？多花点时间在学习上吧~
* 潜意识暗示自己，建立信心，让自己变得更优秀，然后去挑战更高的目标
* **优秀的人仍在不断努力**
* 且看大神 [阮一峰github](https://github.com/ruanyf) 提交记录

66
docs/04.其他/01.学习/05.处理问题的思路.md Normal file
View File

@ -0,0 +1,66 @@
---
title: 处理问题的思路
date: 2020-01-03
permalink: /pages/9ba2b8fb13de1957
---
# 处理问题的思路
## 工作中遇到问题？
遇到问题卡住了，可以先休息一会儿，调整一下状态，喝杯水走走放松放松，然后想想有没有遗漏的地方，或者其他的解决方案呢
## 这个问题我该怎么解决呢？
1. **学会搜索**
* 关键词
* 多关键词
* 加入时间
* 加入特定的社区
* site用法
2. **高阶搜索方法**
* 英文搜索（必应搜索、google搜索，很多英文文档或文章相对来说层数结构很清晰）
* 视频站搜索（<http://www.youtube.com/>、<http://egghead.io>）
* 百度盘搜索
* 指定文件后缀
3. **寻求帮助**
* 找同学
* 找同事
* 找朋友
* [找社区](https://xugaoyi.com/pages/2e9ba3fa6e1ed0e9/#社区类)
4. **开拓思路——发散性解决问题**
* 去问问原作者？
* 去发个邮件/twitter/facebook?
* 去找Boss要资源？
* 加入公共社区参与讨论?
* ...

44
docs/04.其他/04.在线工具.md
View File

@ -5,20 +5,34 @@ permalink: /pages/9c2232288caaa8ec
---
# 在线工具
## 代码编辑
| 名称 | 网址 | 描述 |
| ----------------- | ------------------------- | ------------------------------------------------------------ |
| codepen代码编辑器 | <https://codepen.io> | 在线代码编辑与演示 |
| codesandbox | <https://codesandbox.io/> | An instant IDE and prototyping tool for rapid web development. |
| 名称 | 网址 | 描述 |
| ----------------- | ------------------------------------------------------------ | -------------------------- |
| codepen代码编辑器 | <https://codepen.io> | 在线代码编辑与演示 |
| tinypng图片压缩 | <https://tinypng.com> | png 和 jpg 图片压缩 |
| emoji表情 | <https://emojipedia.org/><br /><https://www.webfx.com/tools/emoji-cheat-sheet> | |
| processon在线作图 | <https://www.ecma-international.org> | 流程图、思维导图、原型图等 |
| 百度脑图 | <https://naotu.baidu.com> | 思维导图 |
| Linux命令手册 | <https://ipcmen.com/> | 包含shell命令教程 |
## Emoji表情
| 名称 | 网址 | 描述 |
| --------------- | ----------------------------------------------- | ---- |
| emoji表情 | <https://emojipedia.org/> | |
| emoji表情备忘录 | <https://www.webfx.com/tools/emoji-cheat-sheet> | |
## 图片压缩
#### CSS相关
| 名称 | 网址 | 描述 |
| --------------- | -------------------- | ------------------- |
| tinypng图片压缩 | <https://tinypng.cn> | png 和 jpg 图片压缩 |
## 作图
| 名称 | 网址 | 描述 |
| ----------------- | ------------------------------------ | -------------------------- |
| processon在线作图 | <https://www.ecma-international.org> | 流程图、思维导图、原型图等 |
| 百度脑图 | <https://naotu.baidu.com> | 思维导图 |
## CSS相关
| 名称 | 网址 | 描述 |
| --------------------- | ------------------------------------------------------ | ---- |
@ -26,3 +40,15 @@ permalink: /pages/9c2232288caaa8ec
| CSS3-Box Shadow(阴影) | <https://www.html.cn/tool/css3Preview/Box-Shadow.html> | |
| 贝塞尔曲线生成器 | <https://cubic-bezier.com> | |
## CDN加速
| 名称 | 网址 | 描述 |
| -------- | -------------------------- | ----------------------------------- |
| jsDelivr | <http://www.jsdelivr.com/> | 国外的一家优秀的公共 CDN 服务提供商 |
## 其他
| 名称 | 网址 | 描述 |
| ------------- | --------------------- | ----------------- |
| Linux命令手册 | <https://ipcmen.com/> | 包含shell命令教程 |

21
docs/05.博主/01.博主.md
View File

@ -8,11 +8,26 @@ sidebar: false
web前端工程师，喜欢唱、跳、rap、篮球，写程序。 本人↓↓↓
<img src='https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/logo.jpg' width=300 alian=center alt='本人照片' >
<img src='https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg' width=300 alian=center alt='本人照片' >
## :email: 联系
- **Github**: <https://github.com/xugaoyi>
- **QQ**: <a :href="qqUrl" class='qq'>894072666</a>
- **Email**: <a href="mailto:894072666@qq.com">894072666@qq.com</a>
- **QQ**: <a>8940726696</a>
- **Github**: <https://github.com/xugaoyi>
<script>
export default {
data(){
return {
qqUrl: 'tencent://message/?uin=894072666&Site=&Menu=yes'
}
},
mounted(){
const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
if(flag){
this.qqUrl = 'mqqwpa://im/chat?chat_type=wpa&uin=894072666&version=1&src_type=web&web_src=oicqzone.com'
}
}
}
</script>

7
docs/06.最新/01.最新.md
View File

@ -74,9 +74,11 @@ export default {
return
}
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
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
@ -106,6 +108,7 @@ export default {
justify-content: space-between;
width: 100%;
position: relative;
margin: 3px 0px;
}
.page-guide-row::after {

29
docs/index.md
View File

@ -6,7 +6,7 @@ tagline: web前端技术博客，积跬步以至千里，致敬每个爱学习
features:
- title: 前端
details: JavaScript、ES6、vue框架等相关技术
details: JavaScript、ES6、vue框架等前端技术
url: /pages/d039d42572a97b66/
imgname: /img/web.png
- title: 页面
@ -54,13 +54,16 @@ footer: Copyright © 2019-present xugaoyi
* 博客搭建
* [解决百度无法收录搭建在GitHub上的静态博客的问题](/pages/41f87d890d0a02af/)
* [使用Gitalk实现静态博客无后台评论系统](/pages/1da0bf9a988eafe5/)
* [GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床](/pages/a5f73af5185fdf0a/)
* [博客源码](https://github.com/xugaoyi/blog)
## 👾其他
* 学习
* [学习网站分享](/pages/2e9ba3fa6e1ed0e9/)
* [学习效果低，忘性很大怎么办？](/pages/839158575e5c4866/)
* [提高学习效率的策略](/pages/a8692ab3bdcb4588/)
* [提高记忆的技巧](/pages/996822b2a2ca6e3b/)
* [自律小建议](/pages/c3f302a03c8daf79/)
* [更多... 👈](/pages/a8692ab3bdcb4588/)
* 面试
* [面试问题集锦](/pages/aea6571b7a8bae86/)
* 其他
@ -69,9 +72,25 @@ footer: Copyright © 2019-present xugaoyi
## :email: 联系
- **Github**: <https://github.com/xugaoyi>
- **QQ**: <a :href="qqUrl" class='qq'>894072666</a>
- **Email**: <a href="mailto:894072666@qq.com">894072666@qq.com</a>
- **QQ**: <a>8940726696</a>
- **Github**: <https://github.com/xugaoyi>
<script>
export default {
data(){
return {
qqUrl: 'tencent://message/?uin=894072666&Site=&Menu=yes'
}
},
mounted(){
const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
if(flag){
this.qqUrl = 'mqqwpa://im/chat?chat_type=wpa&uin=894072666&version=1&src_type=web&web_src=oicqzone.com'
}
}
}
</script>
<img src="/img/panda-waving.png" class="panda">
<style scoped lang="stylus" rel="stylesheet/stylus">

4
package.json
View File

@ -14,12 +14,14 @@
"@vuepress/plugin-medium-zoom": "^1.2.0",
"ejs": "^3.0.1",
"md5.js": "^1.3.5",
"moment": "^2.24.0",
"tracer": "^1.0.1",
"vuepress": "^1.1.0",
"vuepress-plugin-baidu-autopush": "^1.0.1",
"vuepress-plugin-baidu-tongji": "^1.0.1"
},
"dependencies": {
"vuepress-plugin-comment": "^0.7.2"
"vuepress-plugin-comment": "^0.7.2",
"vuepress-plugin-zooming": "^1.1.7"
}
}