From 25c65332c480d4408a020a1ec17107c2dd80de17 Mon Sep 17 00:00:00 2001 From: haoyang gao Date: Fri, 1 Jul 2016 09:01:32 +0800 Subject: [PATCH 01/98] update about page --- page/4about.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/page/4about.md b/page/4about.md index e684863..9ae071f 100644 --- a/page/4about.md +++ b/page/4about.md @@ -10,7 +10,7 @@ icon: heart ## 关于我 -在校硕士研究生一枚，就读于西安交通大学软件工程专业，2016年毕业。即将入职阿里巴巴，前端开发工程师。 +就职于阿里巴巴集团天猫事业部，前端开发工程师，花名川轼。 主要兴趣集中在前端开发，大前端的概念深入我心。将更多的业务逻辑放在前端中，这很有趣。同时，将自己构想的内容实现出来，这种感觉很愉快。 @@ -20,6 +20,7 @@ icon: heart 还有，学习是一个非常愉快的过程。共同加油！ +* 2016.6.30 入职阿里巴巴天猫事业部 * 2016.6 毕业于西安交通大学 软件工程硕士 * 2015.12 获得2014-2015学年二等奖学金 * 2015.7-2015.8 联想服务，前端开发工程师（实习生） From d794d754770561a56a0fe3a160da10a21c2ab128 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Wed, 6 Jul 2016 15:18:41 +0800 Subject: [PATCH 02/98] collections --- README.md | 8 ++++++-- page/3collections.md | 12 ++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5b4d9bc..d9740d0 100644 --- a/README.md +++ b/README.md @@ -113,7 +113,7 @@ disqus_shortname: xxx ### Footer -**欢迎使用这个主题，使用时请保留 footer 上的模板主题来源。**Theme designed by [HyG](https://github.com/gaohaoyang). +**欢迎使用这个主题，使用时请保留 footer 上的模板主题来源。** Theme designed by [HyG](https://github.com/gaohaoyang). ![footer](http://ww3.sinaimg.cn/large/7011d6cfjw1f3bepd8002j20hl02ct95.jpg) 关于旧版博客，我不再维护，同时我把代码转移到了另一个仓库，见 [Gaohaoyang/old-blog](https://github.com/Gaohaoyang/old-blog)。 @@ -151,6 +151,10 @@ gem install jekyll 详情可以查看 jekyll 官网。[https://jekyllrb.com/](https://jekyllrb.com/) 或 中文翻译版 jekyll 官网[http://jekyllcn.com/](http://jekyllcn.com/) （中文文档翻译落后于英文官网，有兴趣有时间的小伙伴可以参与翻译，为开源世界贡献一份力哦~） +在 mac OS X El Capitan 系统下安装可能会出现问题，解决方案详情见 jekyll 官网: [ https://jekyllrb.com/docs/troubleshooting/#jekyll-amp-mac-os-x-1011]( https://jekyllrb.com/docs/troubleshooting/#jekyll-amp-mac-os-x-1011) + +对 jekyll 本身感兴趣的同学可以看看 jekyll 源码: [https://github.com/jekyll/jekyll](https://github.com/jekyll/jekyll) + ![jekyll logo](http://jekyllcn.com/img/logo-2x.png) ### 2. 复制博客主题代码 @@ -256,7 +260,7 @@ excerpt_separator: "\n\n\n\n" 使用 markdown 语法写文章。 -代码风格与 GitHub 上 README 或 issue 中的一致。使用3个```的方式。 +代码风格与 GitHub 上 README 或 issue 中的一致。使用3个\`\`\`的方式。 ### 5. 本地运行 diff --git a/page/3collections.md b/page/3collections.md index 646dbe6..971acca 100644 --- a/page/3collections.md +++ b/page/3collections.md @@ -35,6 +35,14 @@ icon: bookmark ## 编程语言 +### JavaScript + +* [You Don't Know JS (book series)](https://github.com/getify/You-Dont-Know-JS) + +* [JavaScript 秘密花园](http://bonsaiden.github.io/JavaScript-Garden/zh/) + +* [JavaScript 设计模式 系列 AlloyTeam](http://www.alloyteam.com/2012/10/common-javascript-design-patterns/) + ### ES2015 * [http://www.ecma-international.org/ecma-262/6.0/](http://www.ecma-international.org/ecma-262/6.0/) @@ -89,6 +97,10 @@ icon: bookmark * [深入理解 React -Thinking in React 中文版](http://reactjs.cn/react/docs/thinking-in-react.html) * [Thinking in React](http://facebook.github.io/react/docs/thinking-in-react.html) +### 测试 + +* [测试框架 Mocha 实例教程 阮一峰](http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html) + ## 类库与插件 * [Masonry](http://masonry.desandro.com/) From 4cbae722822ccfa2830593fecbc2084ad1455b58 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Wed, 6 Jul 2016 16:54:00 +0800 Subject: [PATCH 03/98] add --- page/3collections.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/page/3collections.md b/page/3collections.md index 971acca..9ba896f 100644 --- a/page/3collections.md +++ b/page/3collections.md @@ -181,6 +181,10 @@ Syntax Theme: Atom Dark or One Dark ## Other blogs +* [Jerry Qu](https://imququ.com/) + + JerryQu，奇虎 360，前端开发，前百度前端。 + * [码志 https://mazhuang.org/](https://mazhuang.org/) 我是马壮，码而生，码而立。就职sogou。 From 521e5ea91337035b88707f4ff2dd828e18f2b076 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Wed, 6 Jul 2016 17:41:20 +0800 Subject: [PATCH 04/98] update --- page/3collections.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/page/3collections.md b/page/3collections.md index 9ba896f..eb9ff5d 100644 --- a/page/3collections.md +++ b/page/3collections.md @@ -121,6 +121,8 @@ icon: bookmark * [后端程序员的 JavaScript 之旅 - 模块化（二）](http://lishaopeng.com/2016/02/11/js-module2/) * [后端程序员的 JavaScript 之旅 - 模块化（三）](http://lishaopeng.com/2016/02/19/js-module3/) +* [CommonJS 规范 -来自 阮一峰 JavaScript 标准参考教程(alpha)](http://javascript.ruanyifeng.com/nodejs/module.html) + ## 技巧 * [将footer固定在页面底部的实现方法](https://segmentfault.com/a/1190000004453249) From eeebc7048d2a4f4c18cbcfb0324ee17230e20c9c Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Thu, 7 Jul 2016 10:42:22 +0800 Subject: [PATCH 05/98] start commonjs learning --- _drafts/CommonJS.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 _drafts/CommonJS.md diff --git a/_drafts/CommonJS.md b/_drafts/CommonJS.md new file mode 100644 index 0000000..2e108ec --- /dev/null +++ b/_drafts/CommonJS.md @@ -0,0 +1,11 @@ +--- +layout: post +title: "CommonJS 规范的学习" +categories: JavaScript +tags: CommonJS 模块化 +--- + +* content +{:toc} + +CommonJS From f71ca899c73c756acd7fed6b8e605f77bcaf918d Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Thu, 7 Jul 2016 15:36:18 +0800 Subject: [PATCH 06/98] update --- _drafts/git-clone-not-master-branch.md | 65 ++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 _drafts/git-clone-not-master-branch.md diff --git a/_drafts/git-clone-not-master-branch.md b/_drafts/git-clone-not-master-branch.md new file mode 100644 index 0000000..1e58a45 --- /dev/null +++ b/_drafts/git-clone-not-master-branch.md @@ -0,0 +1,65 @@ + + + + + + + +## 问题描述 + +我们每次使用命令 + +``` +git clone git@gitlab.alibaba-inc.com:xxxxx.git +``` + +默认 clone 的是这个仓库的 master 分支。如果最新的代码不在 master 分支上，该如何拿到呢？如下图所示，最新的代码可能在`daily/1.4.1`分支上，我们希望拿到这个分支上的代码。 + + + + + +![_2016_07_07_15_13_13](http://img4.tbcdn.cn/L1/461/1/7f07c8f6deef169ef6be5103bbd3e932f8676bb1) + +## 解决方案 + +我们在本地先建立一个分支，建议名称和远程的想要同步的分支名称一样。 + +``` +git branch daily/1.4.1 +``` + +在切换到这个本地分支 + +``` +git checkout daily/1.4.1 +# Switched to branch 'daily/1.4.1' +``` + +接下来就可以去建立上游分支的关联了，但是这个命令比较长，不好记，我们可以直接先`pull`一下，git 会提示我们相应的操作和命令。 + +``` +git pull +There is no tracking information for the current branch. +Please specify which branch you want to merge with. +See git-pull(1) for details. + + git pull + +If you wish to set tracking information for this branch you can do so with: + + git branch --set-upstream-to=origin/ daily/1.4.1 +``` + +我们看到最后一行，执行这个命令，即可完成与上游分支的关联。 + +``` +git branch --set-upstream-to=origin/daily/1.4.1 daily/1.4.1 +# Branch daily/1.4.1 set up to track remote branch daily/1.4.1 from origin. +``` + +然后再`pull`一下就好了！ + +``` +git pull +``` From 81859f5a8289a671dac3b9e8eed4736e5fbd68c3 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Thu, 7 Jul 2016 16:37:53 +0800 Subject: [PATCH 07/98] up --- page/3collections.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/page/3collections.md b/page/3collections.md index eb9ff5d..45264fc 100644 --- a/page/3collections.md +++ b/page/3collections.md @@ -97,6 +97,12 @@ icon: bookmark * [深入理解 React -Thinking in React 中文版](http://reactjs.cn/react/docs/thinking-in-react.html) * [Thinking in React](http://facebook.github.io/react/docs/thinking-in-react.html) +### AngularJS + +* [AngularJS入门教程——AngularJS中文社区提供](https://github.com/zensh/AngularjsTutorial_cn) + +* [http://www.runoob.com/angularjs/angularjs-tutorial.html](http://www.runoob.com/angularjs/angularjs-tutorial.html) + ### 测试 * [测试框架 Mocha 实例教程 阮一峰](http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html) From 089c149ccd0f38b52a4da209436f4e0746e5ca98 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Thu, 7 Jul 2016 18:54:16 +0800 Subject: [PATCH 08/98] update readme & new post --- README.md | 1 + .../2016-07-07-git-clone-not-master-branch.md | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 8 deletions(-) rename _drafts/git-clone-not-master-branch.md => _posts/2016-07-07-git-clone-not-master-branch.md (83%) diff --git a/README.md b/README.md index d9740d0..9a36969 100644 --- a/README.md +++ b/README.md @@ -311,6 +311,7 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 感谢捐助的小伙伴！！！ +* 2016.07.07 收到 Klci ¥2.50 捐赠 * 2016.05.08 收到 1057 ¥10.57 捐赠 * 2016.05.07 收到 吴林 ¥2 捐赠 * 2016.04.29 收到 北归 ¥10 捐赠 diff --git a/_drafts/git-clone-not-master-branch.md b/_posts/2016-07-07-git-clone-not-master-branch.md similarity index 83% rename from _drafts/git-clone-not-master-branch.md rename to _posts/2016-07-07-git-clone-not-master-branch.md index 1e58a45..cebc98c 100644 --- a/_drafts/git-clone-not-master-branch.md +++ b/_posts/2016-07-07-git-clone-not-master-branch.md @@ -1,16 +1,19 @@ +--- +layout: post +title: "Git 如何 clone 非 master 分支的代码" +categories: GitHub +tags: Git GitHub 分支 +--- - - - - - +* content +{:toc} ## 问题描述 我们每次使用命令 ``` -git clone git@gitlab.alibaba-inc.com:xxxxx.git +git clone git@gitlab.xxx.com:xxxxx.git ``` 默认 clone 的是这个仓库的 master 分支。如果最新的代码不在 master 分支上，该如何拿到呢？如下图所示，最新的代码可能在`daily/1.4.1`分支上，我们希望拿到这个分支上的代码。 @@ -18,8 +21,7 @@ git clone git@gitlab.alibaba-inc.com:xxxxx.git - -![_2016_07_07_15_13_13](http://img4.tbcdn.cn/L1/461/1/7f07c8f6deef169ef6be5103bbd3e932f8676bb1) +![7f07c8f6deef169ef6be5103bbd3e932f8676bb1.png](https://ooo.0o0.ooo/2016/07/07/577e349ab42ed.png) ## 解决方案 From 905bf90370ac40f76b9a01c95ede8955885425ed Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Fri, 8 Jul 2016 17:12:08 +0800 Subject: [PATCH 09/98] update --- .../2016-07-07-git-clone-not-master-branch.md | 39 ++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/_posts/2016-07-07-git-clone-not-master-branch.md b/_posts/2016-07-07-git-clone-not-master-branch.md index cebc98c..20912ad 100644 --- a/_posts/2016-07-07-git-clone-not-master-branch.md +++ b/_posts/2016-07-07-git-clone-not-master-branch.md @@ -23,7 +23,44 @@ git clone git@gitlab.xxx.com:xxxxx.git ![7f07c8f6deef169ef6be5103bbd3e932f8676bb1.png](https://ooo.0o0.ooo/2016/07/07/577e349ab42ed.png) -## 解决方案 +## 解决方法 + +**刚刚开周会的时候，自己洋洋得意的分享我的解决方案，但是……经过与团队成员的的讨论，自己的方法弱爆了，现在把更优雅的方法写一下。原来写的方法并不太适合用在这个场景里。** + +直接使用命令 + +``` +git branch -r #查看远程分支 +``` +或 + +``` +git branch -a #查看所有分支 +``` + +会显示 + +``` +origin/HEAD -> origin/master +origin/daily/1.2.2 +origin/daily/1.3.0 +origin/daily/1.4.1 +origin/develop +origin/feature/daily-1.0.0 +origin/master +``` + +然后直接 + +``` +git checkout origin/daily/1.4.1 +``` + +就好了。。。 + +## 原来的解决方案 + +**其实我原来写的这个方法更多的是：设置已有的本地分支跟踪一个刚刚拉取下来的远程分支，或者想要修改正在跟踪的上游分支。** 我们在本地先建立一个分支，建议名称和远程的想要同步的分支名称一样。 From caa588e97a0fb2e5447ebdcf8a1bf78e071b56fd Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Fri, 8 Jul 2016 17:15:40 +0800 Subject: [PATCH 10/98] update --- _posts/2016-07-07-git-clone-not-master-branch.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2016-07-07-git-clone-not-master-branch.md b/_posts/2016-07-07-git-clone-not-master-branch.md index 20912ad..e263ab0 100644 --- a/_posts/2016-07-07-git-clone-not-master-branch.md +++ b/_posts/2016-07-07-git-clone-not-master-branch.md @@ -25,7 +25,7 @@ git clone git@gitlab.xxx.com:xxxxx.git ## 解决方法 -**刚刚开周会的时候，自己洋洋得意的分享我的解决方案，但是……经过与团队成员的的讨论，自己的方法弱爆了，现在把更优雅的方法写一下。原来写的方法并不太适合用在这个场景里。** +**刚刚开周会的时候，自己洋洋得意的分享我的解决方案，但是……经过与团队成员的的讨论，自己的方法弱爆了，现在把更优雅的方法写一下。原来写的方法并不太适合用在这个场景里。** 我之前写的方法在文章后面。 直接使用命令 From e33cef70c36f1718cfa735ea8888abe429084950 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Sat, 9 Jul 2016 15:21:36 +0800 Subject: [PATCH 11/98] update collections --- page/3collections.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/page/3collections.md b/page/3collections.md index 45264fc..4a5eb20 100644 --- a/page/3collections.md +++ b/page/3collections.md @@ -39,6 +39,10 @@ icon: bookmark * [You Don't Know JS (book series)](https://github.com/getify/You-Dont-Know-JS) +* [You Don't Need jQuery](https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README.zh-CN.md) + + 前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法，暂时只支持 IE10+ 以上浏览器。 + * [JavaScript 秘密花园](http://bonsaiden.github.io/JavaScript-Garden/zh/) * [JavaScript 设计模式 系列 AlloyTeam](http://www.alloyteam.com/2012/10/common-javascript-design-patterns/) From e2e49dba47038bc56fbc515a8ab70aa5cc7182ea Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Sat, 9 Jul 2016 15:26:01 +0800 Subject: [PATCH 12/98] update collection --- page/3collections.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/3collections.md b/page/3collections.md index 4a5eb20..a4347ad 100644 --- a/page/3collections.md +++ b/page/3collections.md @@ -105,7 +105,7 @@ icon: bookmark * [AngularJS入门教程——AngularJS中文社区提供](https://github.com/zensh/AngularjsTutorial_cn) -* [http://www.runoob.com/angularjs/angularjs-tutorial.html](http://www.runoob.com/angularjs/angularjs-tutorial.html) +* [AngularJS 教程 | 菜鸟教程](http://www.runoob.com/angularjs/angularjs-tutorial.html) ### 测试 From 23db9a51ac308a4156796a3e6d81240495ea269e Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Sat, 9 Jul 2016 15:28:23 +0800 Subject: [PATCH 13/98] update --- page/3collections.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/page/3collections.md b/page/3collections.md index a4347ad..caac55b 100644 --- a/page/3collections.md +++ b/page/3collections.md @@ -105,7 +105,9 @@ icon: bookmark * [AngularJS入门教程——AngularJS中文社区提供](https://github.com/zensh/AngularjsTutorial_cn) -* [AngularJS 教程 | 菜鸟教程](http://www.runoob.com/angularjs/angularjs-tutorial.html) +* [AngularJS 教程 \| 菜鸟教程](http://www.runoob.com/angularjs/angularjs-tutorial.html) + + 类似 w3school 的入门 AngularJS 教程。 ### 测试 From c92be13d7ddbee72d376452d21b202b3b15affc9 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Tue, 12 Jul 2016 16:24:44 +0800 Subject: [PATCH 14/98] donate --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 9a36969..abd3c6b 100644 --- a/README.md +++ b/README.md @@ -311,6 +311,7 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 感谢捐助的小伙伴！！！ +* 2016.07.11 收到 彦风 ¥6.66 捐赠 * 2016.07.07 收到 Klci ¥2.50 捐赠 * 2016.05.08 收到 1057 ¥10.57 捐赠 * 2016.05.07 收到 吴林 ¥2 捐赠 From fad56d63644bbc5f08e0d07a353ff2153fc4cb8f Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Tue, 12 Jul 2016 16:29:48 +0800 Subject: [PATCH 15/98] fix --- _posts/2015-04-22-baidu-ife-2-javascript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2015-04-22-baidu-ife-2-javascript.md b/_posts/2015-04-22-baidu-ife-2-javascript.md index f8ff8a5..4626902 100644 --- a/_posts/2015-04-22-baidu-ife-2-javascript.md +++ b/_posts/2015-04-22-baidu-ife-2-javascript.md @@ -1257,7 +1257,7 @@ function ajax(url, options) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // 发送请求 - oXhr.open(options.type, url, true); + xhr.open(options.type, url, true); if (options.type == 'GET') { oXhr.send(null); } else { From f00c5ef4918f57e3005f7eda4b2937d58a79c10a Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Thu, 14 Jul 2016 17:50:00 +0800 Subject: [PATCH 16/98] fix and update --- _posts/2015-04-22-baidu-ife-2-javascript.md | 6 +++--- page/3collections.md | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/_posts/2015-04-22-baidu-ife-2-javascript.md b/_posts/2015-04-22-baidu-ife-2-javascript.md index 4626902..5f50a98 100644 --- a/_posts/2015-04-22-baidu-ife-2-javascript.md +++ b/_posts/2015-04-22-baidu-ife-2-javascript.md @@ -1259,10 +1259,10 @@ function ajax(url, options) { // 发送请求 xhr.open(options.type, url, true); if (options.type == 'GET') { - oXhr.send(null); + xhr.send(null); } else { - oXhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); - oXhr.send(dataResult); + xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + xhr.send(dataResult); } // readyState diff --git a/page/3collections.md b/page/3collections.md index caac55b..9175ee1 100644 --- a/page/3collections.md +++ b/page/3collections.md @@ -32,6 +32,7 @@ icon: bookmark * [新浪微博图床 Chrome扩展](https://github.com/Suxiaogang/WeiboPicBed) +* [Unix 时间戳 Unix timestamp](http://tool.chinaz.com/Tools/unixtime.aspx) ## 编程语言 @@ -103,6 +104,8 @@ icon: bookmark ### AngularJS +* [AngularJS api 官网](https://docs.angularjs.org/api) + * [AngularJS入门教程——AngularJS中文社区提供](https://github.com/zensh/AngularjsTutorial_cn) * [AngularJS 教程 \| 菜鸟教程](http://www.runoob.com/angularjs/angularjs-tutorial.html) From fd113ac583eeb07428c441be9db8fd8ee9476184 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Fri, 15 Jul 2016 17:59:32 +0800 Subject: [PATCH 17/98] add ignore --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index f452166..be5059f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ _site .sass-cache .jekyll-metadata -.vscode \ No newline at end of file +.vscode +.idea From 491b3482aab4be2f35dcb1d3e16b150abc279c08 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Sun, 17 Jul 2016 15:59:25 +0800 Subject: [PATCH 18/98] update --- page/3collections.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/page/3collections.md b/page/3collections.md index 9175ee1..5edfbf8 100644 --- a/page/3collections.md +++ b/page/3collections.md @@ -198,6 +198,10 @@ Syntax Theme: Atom Dark or One Dark ## Other blogs +* [进击的马斯特 http://pinkyjie.com/](http://pinkyjie.com/) + + 马斯特，87年生人，爱溜冰的码农。技术： Javascript、Python、Mac、iOS + * [Jerry Qu](https://imququ.com/) JerryQu，奇虎 360，前端开发，前百度前端。 From 6bb234bae8f4fd61de84faa3125f41ba6b5fd725 Mon Sep 17 00:00:00 2001 From: Hao WEI Date: Sun, 24 Jul 2016 17:17:16 +0800 Subject: [PATCH 19/98] fix the issue: in first post page, div tag isn't closed --- _includes/previousAndNext.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/_includes/previousAndNext.html b/_includes/previousAndNext.html index f92350d..0847c96 100644 --- a/_includes/previousAndNext.html +++ b/_includes/previousAndNext.html @@ -1,7 +1,6 @@
- {% if page.previous %}
- + {% if page.previous %}

上一篇 {{ page.previous.title }}

{% endif %}
From 6be7f976ca56293483ab9161976f24288ad9cc67 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Tue, 26 Jul 2016 11:51:02 +0800 Subject: [PATCH 20/98] update readme --- README.md | 1 + _drafts/angularJS-directive.md | 11 +++++++++++ 2 files changed, 12 insertions(+) create mode 100644 _drafts/angularJS-directive.md diff --git a/README.md b/README.md index abd3c6b..adb3967 100644 --- a/README.md +++ b/README.md @@ -311,6 +311,7 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 感谢捐助的小伙伴！！！ +* 2016.07.25 收到 邓炳初 ¥6.66 捐赠 * 2016.07.11 收到 彦风 ¥6.66 捐赠 * 2016.07.07 收到 Klci ¥2.50 捐赠 * 2016.05.08 收到 1057 ¥10.57 捐赠 diff --git a/_drafts/angularJS-directive.md b/_drafts/angularJS-directive.md new file mode 100644 index 0000000..fe29b65 --- /dev/null +++ b/_drafts/angularJS-directive.md @@ -0,0 +1,11 @@ +--- +layout: post +title: "AngularJS" +categories: JavaScript +tags: AngularJS +--- + +* content +{:toc} + +# directive From 9abbefe4a951dc6e251f12532e3db617edc58e92 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Tue, 26 Jul 2016 16:48:36 +0800 Subject: [PATCH 21/98] add paypal donate --- README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/README.md b/README.md index adb3967..dfc77c6 100644 --- a/README.md +++ b/README.md @@ -301,6 +301,15 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 您也可以捐助我喝杯咖啡！感谢！ +PayPal + +
+ + + + +

+ 支付宝 ![alipay](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bk8ikzoij20740743z5.jpg) @@ -309,6 +318,10 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml ![wechat](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bkdw3bslj206z06q3z6.jpg) + + + + 感谢捐助的小伙伴！！！ * 2016.07.25 收到 邓炳初 ¥6.66 捐赠 From 2848ce4869b0a4431f2c2ea3c9b293afb9f6110b Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Tue, 26 Jul 2016 16:53:20 +0800 Subject: [PATCH 22/98] paypal is not show on readme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index dfc77c6..c78b453 100644 --- a/README.md +++ b/README.md @@ -301,14 +301,14 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 您也可以捐助我喝杯咖啡！感谢！ -PayPal + 支付宝 From b20a066a391ba6b53e86cde993712d04cd4f43d4 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Wed, 27 Jul 2016 15:53:50 +0800 Subject: [PATCH 23/98] add friendly link --- page/4about.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/4about.md b/page/4about.md index 9ae071f..5f12d3a 100644 --- a/page/4about.md +++ b/page/4about.md @@ -87,7 +87,7 @@ icon: heart ## 友情链接 -[羡辙杂俎](http://zhangwenli.com/blog) \| [Anotherhome](https://www.anotherhome.net) \| [Reverland](http://reverland.org/) \| [ZhiLi](http://lizhipower.github.io/) \| [Simmer](http://simmer-jun.github.io/) \| [awthink](http://awthink.net/) \| [Aralic](http://aralic.github.io/) \| [zchen9](http://www.chen9.info/) \| [wuhuaji](http://wuhuaji.me/) \| [lisheng](http://www.lishengcn.cn/) \| [薛彬XueBin](http://axuebin.com/blog/) +[羡辙杂俎](http://zhangwenli.com/blog) \| [Anotherhome](https://www.anotherhome.net) \| [Reverland](http://reverland.org/) \| [ZhiLi](http://lizhipower.github.io/) \| [Simmer](http://simmer-jun.github.io/) \| [awthink](http://awthink.net/) \| [Aralic](http://aralic.github.io/) \| [zchen9](http://www.chen9.info/) \| [wuhuaji](http://wuhuaji.me/) \| [lisheng](http://www.lishengcn.cn/) \| [薛彬XueBin](http://axuebin.com/blog/) \| [TBOOX](http://www.tboox.org/cn/) ## Comments From 6ffdac590ec4aad15e73aac88583d5083df0ded3 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Wed, 27 Jul 2016 16:20:03 +0800 Subject: [PATCH 24/98] translate to english --- README.md | 2 +- README0.md | 377 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 378 insertions(+), 1 deletion(-) create mode 100644 README0.md diff --git a/README.md b/README.md index c78b453..bc7fb18 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# 关于这个博客主题 +# 关于这个简洁明快的博客主题 随着 jekyll 的版本升级，同时我也想重构我的旧版博客主题，因此在这个月对博客进行了重构加改版，这个仓库存放我的新博客，并且我也会一直使用这个主题。目前基本改版完成，后续可能还会有些细节上的修补。 diff --git a/README0.md b/README0.md new file mode 100644 index 0000000..1c10a73 --- /dev/null +++ b/README0.md @@ -0,0 +1,377 @@ +# About this cool concise blog theme + +随着 jekyll 的版本升级，同时我也想重构我的旧版博客主题，因此在这个月对博客进行了重构加改版，这个仓库存放我的新博客，并且我也会一直使用这个主题。目前基本改版完成，后续可能还会有些细节上的修补。 + +With the escalation of jekyll version, but I also want to reconstruct my older blog theme, + +**博客访问地址：[http://gaohaoyang.github.io/](http://gaohaoyang.github.io/)**。若您喜欢这个新的博客主题，请给我个star以示鼓励吧，欢迎大家使用。 + +## 目录 + +* [预览图](#预览图) +* [各部分详情](#各部分详情) + * [主页 Home](#主页-home) + * [归档页 Archives](#归档页-archives) + * [分类页 Categories](#分类页-categories) + * [标签页 Tags](#标签页-tags) + * [收藏页 Collections](#收藏页-collections) + * [展示页 Demo](#展示页-demo) + * [关于页 About](#关于页-about) + * [评论](#评论) + * [目录 Contents](#目录-contents) + * [代码高亮](#代码高亮) + * [灯泡效果](#灯泡效果) + * [移动端适配](#移动端适配) + * [Footer](#footer) + * [统计](#统计) +* [博客主题使用方法](#博客主题使用方法) + * [1. 安装 ruby 和 jekyll 环境](#1-安装-ruby-和-jekyll-环境) + * [2. 复制博客主题代码](#2-复制博客主题代码) + * [3. 修改参数](#3-修改参数) + * [基本信息](#基本信息) + * [链接信息](#链接信息) + * [评论信息](#评论信息) + * [统计信息](#统计信息) + * [4. 写文章](#4-写文章) + * [5. 本地运行](#5-本地运行) + * [6. 发布到 GitHub](#6-发布到-github) +* [捐助 donate](#捐助-donate) +* [Update Log](#update-log) +* [License](#license) + +## 预览图 + +先上预览图： + +主页 +![index](http://ww3.sinaimg.cn/large/7011d6cfjw1f3bdli86awj211k0oyqen.jpg) + +文章页 +![post](http://ww4.sinaimg.cn/large/7011d6cfjw1f3bdmzb9v6j210p0j7gwn.jpg) + +## 各部分详情 + +### 主页 Home + +主页默认展示5篇文章的摘要部分，用户点击标题或阅读全文后进入文章页。右侧为近期文章、分类和标签3块区域，用户可以继续在这部分添加区域，只需修改`index.html`即可。 + +### 归档页 Archives + +按照年份归档文章。 + +### 分类页 Categories + +按照文章的分类，显示文章。 + +### 标签页 Tags + +按照文章的标签显示文章。 + +### 收藏页 Collections + +本页是用`markdown`写的，用户可以收藏自己喜欢的文章链接。 + +### 展示页 Demo + +使用 [Masonry](http://masonry.desandro.com/) 重写了瀑布流布局，响应式布局，更好的交互体验。 + +### 关于页 About + +对个人和对本站的介绍，使用`markdown`写的。 + +### 评论 + +支持 [多说评论](http://duoshuo.com/) 和 [disqus](https://disqus.com/) 评论。 + +只需要在 `_config.yml` 修改相应的配置`short_name`即可，如下： + +```yml +# comments +# two ways to comment, only choose one, and use your own short name +# 两种评论插件，选一个就好了，使用自己的 short_name +duoshuo_shortname: #xxx +disqus_shortname: xxx +``` + +### 目录 Contents + +页面滚动时目录固定在屏幕右侧，若目录高度超出屏幕高度，目录产生滚动条。 + +### 代码高亮 + +随着 jekyll 的升级，目前代码高亮使用风格与 github 上的 markdown 写法一致。 + +### 灯泡效果 + +![light](http://ww3.sinaimg.cn/large/7011d6cfjw1f3be6y4vp3j209i02rweg.jpg) + +可以看到导航按钮高亮时，下面的阴影效果，我把这个称为灯泡效果。 + +### 移动端适配 + +完美适配移动端。 + +![mobile](http://ww4.sinaimg.cn/large/7011d6cfjw1f3bebnzxkpj20ah0fzgp4.jpg) + +### Footer + +**欢迎使用这个主题，使用时请保留 footer 上的模板主题来源。** Theme designed by [HyG](https://github.com/gaohaoyang). +![footer](http://ww3.sinaimg.cn/large/7011d6cfjw1f3bepd8002j20hl02ct95.jpg) + +关于旧版博客，我不再维护，同时我把代码转移到了另一个仓库，见 [Gaohaoyang/old-blog](https://github.com/Gaohaoyang/old-blog)。 + +### 统计 + +博客支持百度统计和 Google Analytics，只需在`_config.yml`中配置响应的id即可，代码如下。 + +```yml +# statistic analysis 统计代码 +# 百度统计 id，将统计代码替换为自己的百度统计id，即 +# hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx"; +# xxxxx字符串 +baidu_tongji_id: xxxxxxxxxxxx +google_analytics_id: UA-xxxxxxxx # google 分析追踪id +``` + +## 博客主题使用方法 + +欢迎使用这个主题，以下简单说一下使用方法。 + +### 1. 安装 ruby 和 jekyll 环境 + +这一步和第5步主要是为了让博客系统在本地跑起来，如果不想在本地运行，可以无视这两步，但我还是强烈建议试着先在本地跑起来，没有什么问题后再推送的 GitHub 上。 + +Windows 用户可以直接使用 [RubyInstaller](http://rubyinstaller.org/) 安装 ruby 环境。后续的操作中可能还会提示安装 DevKit，根据提示操作即可。 + +建议使用 [RubyGems 镜像- Ruby China](https://gems.ruby-china.org/) 安装 jekyll。 + +安装 jekyll 命令如下 + +``` +gem install jekyll +``` + +详情可以查看 jekyll 官网。[https://jekyllrb.com/](https://jekyllrb.com/) 或 中文翻译版 jekyll 官网[http://jekyllcn.com/](http://jekyllcn.com/) （中文文档翻译落后于英文官网，有兴趣有时间的小伙伴可以参与翻译，为开源世界贡献一份力哦~） + +在 mac OS X El Capitan 系统下安装可能会出现问题，解决方案详情见 jekyll 官网: [ https://jekyllrb.com/docs/troubleshooting/#jekyll-amp-mac-os-x-1011]( https://jekyllrb.com/docs/troubleshooting/#jekyll-amp-mac-os-x-1011) + +对 jekyll 本身感兴趣的同学可以看看 jekyll 源码: [https://github.com/jekyll/jekyll](https://github.com/jekyll/jekyll) + +![jekyll logo](http://jekyllcn.com/img/logo-2x.png) + +### 2. 复制博客主题代码 + +可以直接 clone 、下载 或 fork 这个仓库的代码即可 + +### 3. 修改参数 + +主要修改 `_config.yml` 中的参数和自己的网站小图`favicon.ico` + +`_config.yml`文件中 + +#### 基本信息 + +主要用于网站头部header。 + +```yml +# Site settings +title: HyG +brief-intro: Front-end Dev Engineer +baseurl: "" # the subpath of your site, e.g. /blog +url: "http://gaohaoyang.github.io" # the base hostname & protocol for your site +``` + +#### 链接信息 + +主要用于网站底部footer。 + +```yml +# other links +twitter_username: gaohaoyang126 +facebook_username: gaohaoyang.water +github_username: Gaohaoyang +email: gaohaoyang126@126.com +weibo_username: 3115521wh +zhihu_username: gaohaoyang + +description_footer: 本站记录我前端之旅的沿途风景！ +``` + +#### 评论信息 + +获取`short_name`的方法： + +访问 https://disqus.com/ 或 http://duoshuo.com/ 根据提示操作即可。 + +```yml +# comments +# two ways to comment, only choose one, and use your own short name +# 两种评论插件，选一个就好了，使用自己的 short_name +duoshuo_shortname: #hygblog +disqus_shortname: gaohaoyang +``` + +运行成功后，可以在 disqus 或 多说 的后台管理页看到相关信息。 + +#### 统计信息 + +获取 百度统计id 或 Google Analytics id 的方法： + +访问 http://tongji.baidu.com/ 或 https://www.google.com/analytics/ 根据提示操作即可。当然，如果不想添加统计信息，这两个参数可以不填。 + +```yml +# statistic analysis 统计代码 +# 百度统计 id，将统计代码替换为自己的百度统计id，即 +# hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx"; +# xxxxx字符串 +baidu_tongji_id: cf8506e0ef223e57ff6239944e5d46a4 +google_analytics_id: UA-72449510-4 # google 分析追踪id +``` + +成功后，进入自己的百度统计或 Google Analytics 后台管理，即可看到网站的访问量、访客等相关信息。 + +### 4. 写文章 + +`_posts`目录下存放文章信息，文章头部注明 layout(布局)、title、date、categories、tags、author(可选)，如下： + +``` +--- +layout: post +title: "对这个 jekyll 博客主题的改版和重构" +date: 2016-03-12 11:40:18 +0800 +categories: jekyll +tags: jekyll 端口 markdown Foxit RubyGems HTML CSS +author: Haoyang Gao +--- +``` + +下面这两行代码为产生目录时使用 +``` +* content +{:toc} +``` + +文章中存在的4次换行为摘要分割符，换行前的内容会以摘要的形式显示在主页Home上，进入文章页不影响。 + +换行符的设置见配置文件`_config.yml`的 excerpt，如下： + +```yml +# excerpt +excerpt_separator: "\n\n\n\n" +``` + +使用 markdown 语法写文章。 + +代码风格与 GitHub 上 README 或 issue 中的一致。使用3个\`\`\`的方式。 + +### 5. 本地运行 + +本地执行 + +``` +jekyll s +``` + +显示 + +``` +Configuration file: E:/GitWorkSpace/blog/_config.yml + Source: E:/GitWorkSpace/blog + Destination: E:/GitWorkSpace/blog/_site + Incremental build: disabled. Enable with --incremental + Generating... + done in 6.33 seconds. + Please add the following to your Gemfile to avoid polling for changes: + gem 'wdm', '>= 0.1.0' if Gem.win_platform? + Auto-regeneration: enabled for 'E:/GitWorkSpace/blog' +Configuration file: E:/GitWorkSpace/blog/_config.yml + Server address: http://127.0.0.1:4000/ + Server running... press ctrl-c to stop. +``` + +在本地访问 localhost:4000 即可看到博客主页。 + +若安装了 Foxit 福昕pdf阅读器可能会占用4000端口，关闭 Foxit服务 或切换 jekyll 端口即可解决。详情见文章：[对这个 jekyll 博客主题的改版和重构](http://gaohaoyang.github.io/2016/03/12/jekyll-theme-version-2.0/) + +若正在使用全局代理，可能会报错502，关闭全局代理即可。 + +### 6. 发布到 GitHub + +没什么问题，推送到自己的博客仓库即可。 + +## 捐助 donate + +您也可以捐助我喝杯咖啡！感谢！ + + + +支付宝 + +![alipay](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bk8ikzoij20740743z5.jpg) + +微信 + +![wechat](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bkdw3bslj206z06q3z6.jpg) + + + + + +感谢捐助的小伙伴！！！ + +* 2016.07.25 收到 邓炳初 ¥6.66 捐赠 +* 2016.07.11 收到 彦风 ¥6.66 捐赠 +* 2016.07.07 收到 Klci ¥2.50 捐赠 +* 2016.05.08 收到 1057 ¥10.57 捐赠 +* 2016.05.07 收到 吴林 ¥2 捐赠 +* 2016.04.29 收到 北归 ¥10 捐赠 +* 2016.04.28 收到 魏楚阳_Brian ¥2 捐赠 +* 2016.04.28 收到 薛彬 ¥8.8 捐赠 + + +## Update Log + +### 2016.6.20 + +* `[+]` 在文章页中添加上一篇和下一篇文章链接。 +* `[^]` 修改 font-family 顺序，避免微软雅黑将单引号解析为全角。 +* `[^]` 修复标签云算法中被除数为零的 bug。[#26](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/26), [#28](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/28), [#30](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/30) + +### 2016.5.11 v2.0.1 + +* `[^]` 优化代码，将页面中的大段评论相关代码抽离出来，放入`comments.html` +* `[+]` 添加百度统计和Google分析代码，在`_config.yml`中配置相关参数即可 +* `[+]` 更新文档，添加博客主题使用方法，便于上手 +* `[+]` 添加了`favicon.ico` +* `[^]` 修复 bug，目录太长时，滚动到最底部时隐藏到footer下面。修复后长目录在滚动到底部时使用`position:absolute` +* `[^]` 修改目录区的滚动条样式（仅针对`webkit`内核浏览器） +* `[^]` 修改 demo 页中 disqus 评论区 a 标签的颜色 bug，修改 blockqoute 中 p 标签的 margin +* `[+]` 添加不蒜子计数功能，在footer上显示访问量 +* `[+]` 添加回到顶部功能 + +### 2016.4.27 v2.0.0 + +* `[^]` 基于 jekyll 3.1.2 重构了所有代码 +* `[+]` 主页添加了摘要，在正文中使用4个换行符来分割，可在`_config.yml`中修改 +* `[+]` 主页添加了近期文章、分类列表和标签云 +* `[+]` 主页导航区做了视觉优化，阴影效果 +* `[+]` 增加了归档、标签和分类页面 +* `[+]` 增加了收藏页面 +* `[+]` 评论插件可以选择 disqus 或 多说，直接在`_config.yml`中修改 +* `[+]` 适配移动端 +* `[+]` 页面滚动时，文章目录固定在右侧 +* `[+]` 页面内容较少时，固定 footer 在页面底部 +* `[^]` 使用 GitHub 风格的代码高亮写法，即\`\`\`的写法，去除`highlight.js`代码高亮插件的使用 +* `[^]` 使用 Masonry 重写了 Demo 页中的瀑布流布局，响应式交互体验更好 +* `[-]` 去除了 jQuery 和 BootStrap，使得加载速度更快 + +## License + +[MIT License](https://github.com/Gaohaoyang/gaohaoyang.github.io/blob/master/LICENSE.md) From c35c1f2502b309df4ff1676cb7acad2e119c38f5 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Wed, 27 Jul 2016 17:42:23 +0800 Subject: [PATCH 25/98] translate and paypal --- README.md | 11 +++-------- README0.md | 8 +++----- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index bc7fb18..0c79fad 100644 --- a/README.md +++ b/README.md @@ -310,14 +310,9 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml
--> -支付宝 - -![alipay](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bk8ikzoij20740743z5.jpg) - -微信 - -![wechat](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bkdw3bslj206z06q3z6.jpg) - +支付宝 | 微信支付 | PayPal + :---: | :---: | :---: +![alipay](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bk8ikzoij20740743z5.jpg) | ![wechat](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bkdw3bslj206z06q3z6.jpg) | [![PayPal](https://www.paypalobjects.com/webstatic/paypalme/images/pp_logo_small.png) Donate via PayPal ](https://www.paypal.me/gaohaoyang) diff --git a/README0.md b/README0.md index 1c10a73..fdbe742 100644 --- a/README0.md +++ b/README0.md @@ -1,10 +1,8 @@ -# About this cool concise blog theme +# About this Cool Concise Jekyll Blog Theme -随着 jekyll 的版本升级，同时我也想重构我的旧版博客主题，因此在这个月对博客进行了重构加改版，这个仓库存放我的新博客，并且我也会一直使用这个主题。目前基本改版完成，后续可能还会有些细节上的修补。 +With the escalation of jekyll version, but I also want to reconstruct my older blog theme, so I did reconstruction and added some features recently. My new blog theme will still be stored in this repository. I will also use this theme in the future. Now I have done basically, then I will focus on issues that users opend to make theme better. -With the escalation of jekyll version, but I also want to reconstruct my older blog theme, - -**博客访问地址：[http://gaohaoyang.github.io/](http://gaohaoyang.github.io/)**。若您喜欢这个新的博客主题，请给我个star以示鼓励吧，欢迎大家使用。 +**My Blog Url: [http://gaohaoyang.github.io/](http://gaohaoyang.github.io/)**. If you like this theme, you can give me a star to encourage me. Welcome everyone to use it. ## 目录 From d195ffbba19539abb15897e9a569bab3a9e3d4e4 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Wed, 27 Jul 2016 17:44:02 +0800 Subject: [PATCH 26/98] fix \n --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0c79fad..05f397e 100644 --- a/README.md +++ b/README.md @@ -312,7 +312,7 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 支付宝 | 微信支付 | PayPal :---: | :---: | :---: -![alipay](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bk8ikzoij20740743z5.jpg) | ![wechat](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bkdw3bslj206z06q3z6.jpg) | [![PayPal](https://www.paypalobjects.com/webstatic/paypalme/images/pp_logo_small.png) Donate via PayPal ](https://www.paypal.me/gaohaoyang) +![alipay](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bk8ikzoij20740743z5.jpg) | ![wechat](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bkdw3bslj206z06q3z6.jpg) | [![PayPal](https://www.paypalobjects.com/webstatic/paypalme/images/pp_logo_small.png)
Donate via PayPal ](https://www.paypal.me/gaohaoyang) From a81866c9ff4dd32dc36e7326fad9aafd80a5829b Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Wed, 27 Jul 2016 20:33:02 +0800 Subject: [PATCH 27/98] translate continue --- README0.md | 50 ++++++++++++++++++++++---------------------------- 1 file changed, 22 insertions(+), 28 deletions(-) diff --git a/README0.md b/README0.md index fdbe742..14fdfd5 100644 --- a/README0.md +++ b/README0.md @@ -4,26 +4,26 @@ With the escalation of jekyll version, but I also want to reconstruct my older b **My Blog Url: [http://gaohaoyang.github.io/](http://gaohaoyang.github.io/)**. If you like this theme, you can give me a star to encourage me. Welcome everyone to use it. -## 目录 - -* [预览图](#预览图) -* [各部分详情](#各部分详情) - * [主页 Home](#主页-home) - * [归档页 Archives](#归档页-archives) - * [分类页 Categories](#分类页-categories) - * [标签页 Tags](#标签页-tags) - * [收藏页 Collections](#收藏页-collections) - * [展示页 Demo](#展示页-demo) - * [关于页 About](#关于页-about) - * [评论](#评论) - * [目录 Contents](#目录-contents) - * [代码高亮](#代码高亮) - * [灯泡效果](#灯泡效果) - * [移动端适配](#移动端适配) +## Content + +* [Preview](#preview) +* [Page Details](#details) + * [Home](#home) + * [Archives](#archives) + * [Categories](#categories) + * [Tags](#tags) + * [Collections](#collections) + * [Demo](#demo) + * [About](#about) + * [Comments](#comments) + * [Post Contents](#post-contents) + * [Code Highlight](#code-highlight) + * [Light Shadow](#light-shadow) + * [Mobile Adaptation](#mobile-adaptation) * [Footer](#footer) - * [统计](#统计) -* [博客主题使用方法](#博客主题使用方法) - * [1. 安装 ruby 和 jekyll 环境](#1-安装-ruby-和-jekyll-环境) + * [Statistical Analysis](#statistical-analysis) +* [Usage](#usage) + * [1. install ruby and jekyll environment](#1-install-ruby-and-jekyll-environment) * [2. 复制博客主题代码](#2-复制博客主题代码) * [3. 修改参数](#3-修改参数) * [基本信息](#基本信息) @@ -310,15 +310,9 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml
--> -支付宝 - -![alipay](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bk8ikzoij20740743z5.jpg) - -微信 - -![wechat](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bkdw3bslj206z06q3z6.jpg) - - +支付宝 | 微信支付 | PayPal + :---: | :---: | :---: +![alipay](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bk8ikzoij20740743z5.jpg) | ![wechat](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bkdw3bslj206z06q3z6.jpg) | [![PayPal](https://www.paypalobjects.com/webstatic/paypalme/images/pp_logo_small.png)
Donate via PayPal ](https://www.paypal.me/gaohaoyang) From 924dcc092efdc0edd18d1e401ccbc824923af81c Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Mon, 1 Aug 2016 20:30:47 +0800 Subject: [PATCH 28/98] translate continue --- README0.md | 48 ++++++++++++++++++++++++------------------------ 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/README0.md b/README0.md index 14fdfd5..370d9b3 100644 --- a/README0.md +++ b/README0.md @@ -7,7 +7,7 @@ With the escalation of jekyll version, but I also want to reconstruct my older b ## Content * [Preview](#preview) -* [Page Details](#details) +* [Page Details](#page-details) * [Home](#home) * [Archives](#archives) * [Categories](#categories) @@ -23,45 +23,45 @@ With the escalation of jekyll version, but I also want to reconstruct my older b * [Footer](#footer) * [Statistical Analysis](#statistical-analysis) * [Usage](#usage) - * [1. install ruby and jekyll environment](#1-install-ruby-and-jekyll-environment) - * [2. 复制博客主题代码](#2-复制博客主题代码) - * [3. 修改参数](#3-修改参数) - * [基本信息](#基本信息) - * [链接信息](#链接信息) - * [评论信息](#评论信息) - * [统计信息](#统计信息) - * [4. 写文章](#4-写文章) - * [5. 本地运行](#5-本地运行) - * [6. 发布到 GitHub](#6-发布到-github) -* [捐助 donate](#捐助-donate) + * [1. Install ruby and jekyll environment](#1-install-ruby-and-jekyll-environment) + * [2. Copy theme code](#2-copy-theme-code) + * [3. Change parameter](#3-change-parameter) + * [Basic info](#basic-info) + * [Link info](#link-info) + * [Comments info](#comments-info) + * [Statistical analysis info](#statistical-analysis-info) + * [4. Write post](#4-write-post) + * [5. Local launch](#5-local-launch) + * [6. Push to GitHub](#6-push-to-github) +* [Donate](#donate) * [Update Log](#update-log) * [License](#license) -## 预览图 +## Preview -先上预览图： +First of all, let's see previews. -主页 +Index Page ![index](http://ww3.sinaimg.cn/large/7011d6cfjw1f3bdli86awj211k0oyqen.jpg) -文章页 +Post Page ![post](http://ww4.sinaimg.cn/large/7011d6cfjw1f3bdmzb9v6j210p0j7gwn.jpg) -## 各部分详情 +## Page Details -### 主页 Home +### Home -主页默认展示5篇文章的摘要部分，用户点击标题或阅读全文后进入文章页。右侧为近期文章、分类和标签3块区域，用户可以继续在这部分添加区域，只需修改`index.html`即可。 +Index page show 5 posts excerpt as a default. Readers can click article title or read more button to see full post. There are recent posts area, categories area and tags area at the right part of the index page. You can also add an area at this part, if you change the file `index.html`. -### 归档页 Archives +### Archives -按照年份归档文章。 +Archive post according to the year. -### 分类页 Categories +### Categories -按照文章的分类，显示文章。 +Show posts according to the category. -### 标签页 Tags +### Tags 按照文章的标签显示文章。 From a19b41b9da25a578700ddaa20743d9b99375eae1 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Sun, 7 Aug 2016 17:20:23 +0800 Subject: [PATCH 29/98] con --- README0.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/README0.md b/README0.md index 370d9b3..ce1ef12 100644 --- a/README0.md +++ b/README0.md @@ -63,41 +63,41 @@ Show posts according to the category. ### Tags -按照文章的标签显示文章。 +Show posts according to the tags. -### 收藏页 Collections +### Collections -本页是用`markdown`写的，用户可以收藏自己喜欢的文章链接。 +The user can collect their favorite article links with `markdown` syntax. -### 展示页 Demo +### Demo -使用 [Masonry](http://masonry.desandro.com/) 重写了瀑布流布局，响应式布局，更好的交互体验。 +I use *[Masonry](http://masonry.desandro.com/)* to rewrite the waterfall responsive layout. Better interactive experience. -### 关于页 About +### About -对个人和对本站的介绍，使用`markdown`写的。 +The user can write some introduction about theirselves and their site with `markdown` syntax. -### 评论 +### Comments -支持 [多说评论](http://duoshuo.com/) 和 [disqus](https://disqus.com/) 评论。 +This theme supports both [disqus](https://disqus.com/) and [多说评论 duoshuo comments](http://duoshuo.com/). It's very easy to config your comments module. -只需要在 `_config.yml` 修改相应的配置`short_name`即可，如下： +The only thing you need do is to change the `short_name` in the file `_config.yml`. As follows. ```yml # comments # two ways to comment, only choose one, and use your own short name -# 两种评论插件，选一个就好了，使用自己的 short_name duoshuo_shortname: #xxx disqus_shortname: xxx ``` -### 目录 Contents +### Post Contents -页面滚动时目录固定在屏幕右侧，若目录高度超出屏幕高度，目录产生滚动条。 +The post contents is fixed at the right side while page is scrolling. There will be a scroll bar on contents while it is outside the window height. -### 代码高亮 +### Code Highlight -随着 jekyll 的升级，目前代码高亮使用风格与 github 上的 markdown 写法一致。 +While the jekyll is update to 3.x.x, you can use github flavored markdown to write code. +More info to see [syntax-highlighter-changed](https://jekyllrb.com/docs/upgrading/2-to-3/#syntax-highlighter-changed). ### 灯泡效果 From d37596bd80bdef82f4dccd394e41766da9477fbc Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Sun, 7 Aug 2016 21:31:36 +0800 Subject: [PATCH 30/98] traslate done --- README0.md => README-zh-cn.md | 131 +++++++------- README.md | 329 ++++++++++++++++------------------ 2 files changed, 225 insertions(+), 235 deletions(-) rename README0.md => README-zh-cn.md (76%) diff --git a/README0.md b/README-zh-cn.md similarity index 76% rename from README0.md rename to README-zh-cn.md index ce1ef12..6ead41f 100644 --- a/README0.md +++ b/README-zh-cn.md @@ -1,103 +1,103 @@ -# About this Cool Concise Jekyll Blog Theme - -With the escalation of jekyll version, but I also want to reconstruct my older blog theme, so I did reconstruction and added some features recently. My new blog theme will still be stored in this repository. I will also use this theme in the future. Now I have done basically, then I will focus on issues that users opend to make theme better. - -**My Blog Url: [http://gaohaoyang.github.io/](http://gaohaoyang.github.io/)**. If you like this theme, you can give me a star to encourage me. Welcome everyone to use it. - -## Content - -* [Preview](#preview) -* [Page Details](#page-details) - * [Home](#home) - * [Archives](#archives) - * [Categories](#categories) - * [Tags](#tags) - * [Collections](#collections) - * [Demo](#demo) - * [About](#about) - * [Comments](#comments) - * [Post Contents](#post-contents) - * [Code Highlight](#code-highlight) - * [Light Shadow](#light-shadow) - * [Mobile Adaptation](#mobile-adaptation) +# 关于这个简洁明快的博客主题 + +随着 jekyll 的版本升级，同时我也想重构我的旧版博客主题，因此在这个月对博客进行了重构加改版，这个仓库存放我的新博客，并且我也会一直使用这个主题。目前基本改版完成，后续可能还会有些细节上的修补。 + +**博客访问地址：[http://gaohaoyang.github.io/](http://gaohaoyang.github.io/)**。若您喜欢这个新的博客主题，请给我个star以示鼓励吧，欢迎大家使用。 + +## 目录 + +* [预览图](#预览图) +* [各部分详情](#各部分详情) + * [主页 Home](#主页-home) + * [归档页 Archives](#归档页-archives) + * [分类页 Categories](#分类页-categories) + * [标签页 Tags](#标签页-tags) + * [收藏页 Collections](#收藏页-collections) + * [展示页 Demo](#展示页-demo) + * [关于页 About](#关于页-about) + * [评论](#评论) + * [目录 Contents](#目录-contents) + * [代码高亮](#代码高亮) + * [灯泡效果](#灯泡效果) + * [移动端适配](#移动端适配) * [Footer](#footer) - * [Statistical Analysis](#statistical-analysis) -* [Usage](#usage) - * [1. Install ruby and jekyll environment](#1-install-ruby-and-jekyll-environment) - * [2. Copy theme code](#2-copy-theme-code) - * [3. Change parameter](#3-change-parameter) - * [Basic info](#basic-info) - * [Link info](#link-info) - * [Comments info](#comments-info) - * [Statistical analysis info](#statistical-analysis-info) - * [4. Write post](#4-write-post) - * [5. Local launch](#5-local-launch) - * [6. Push to GitHub](#6-push-to-github) -* [Donate](#donate) + * [统计](#统计) +* [博客主题使用方法](#博客主题使用方法) + * [1. 安装 ruby 和 jekyll 环境](#1-安装-ruby-和-jekyll-环境) + * [2. 复制博客主题代码](#2-复制博客主题代码) + * [3. 修改参数](#3-修改参数) + * [基本信息](#基本信息) + * [链接信息](#链接信息) + * [评论信息](#评论信息) + * [统计信息](#统计信息) + * [4. 写文章](#4-写文章) + * [5. 本地运行](#5-本地运行) + * [6. 发布到 GitHub](#6-发布到-github) +* [捐助 donate](#捐助-donate) * [Update Log](#update-log) * [License](#license) -## Preview +## 预览图 -First of all, let's see previews. +先上预览图： -Index Page +主页 ![index](http://ww3.sinaimg.cn/large/7011d6cfjw1f3bdli86awj211k0oyqen.jpg) -Post Page +文章页 ![post](http://ww4.sinaimg.cn/large/7011d6cfjw1f3bdmzb9v6j210p0j7gwn.jpg) -## Page Details +## 各部分详情 -### Home +### 主页 Home -Index page show 5 posts excerpt as a default. Readers can click article title or read more button to see full post. There are recent posts area, categories area and tags area at the right part of the index page. You can also add an area at this part, if you change the file `index.html`. +主页默认展示5篇文章的摘要部分，用户点击标题或阅读全文后进入文章页。右侧为近期文章、分类和标签3块区域，用户可以继续在这部分添加区域，只需修改`index.html`即可。 -### Archives +### 归档页 Archives -Archive post according to the year. +按照年份归档文章。 -### Categories +### 分类页 Categories -Show posts according to the category. +按照文章的分类，显示文章。 -### Tags +### 标签页 Tags -Show posts according to the tags. +按照文章的标签显示文章。 -### Collections +### 收藏页 Collections -The user can collect their favorite article links with `markdown` syntax. +本页是用`markdown`写的，用户可以收藏自己喜欢的文章链接。 -### Demo +### 展示页 Demo -I use *[Masonry](http://masonry.desandro.com/)* to rewrite the waterfall responsive layout. Better interactive experience. +使用 [Masonry](http://masonry.desandro.com/) 重写了瀑布流布局，响应式布局，更好的交互体验。 -### About +### 关于页 About -The user can write some introduction about theirselves and their site with `markdown` syntax. +对个人和对本站的介绍，使用`markdown`写的。 -### Comments +### 评论 -This theme supports both [disqus](https://disqus.com/) and [多说评论 duoshuo comments](http://duoshuo.com/). It's very easy to config your comments module. +支持 [多说评论](http://duoshuo.com/) 和 [disqus](https://disqus.com/) 评论。 -The only thing you need do is to change the `short_name` in the file `_config.yml`. As follows. +只需要在 `_config.yml` 修改相应的配置`short_name`即可，如下： ```yml # comments # two ways to comment, only choose one, and use your own short name +# 两种评论插件，选一个就好了，使用自己的 short_name duoshuo_shortname: #xxx disqus_shortname: xxx ``` -### Post Contents +### 目录 Contents -The post contents is fixed at the right side while page is scrolling. There will be a scroll bar on contents while it is outside the window height. +页面滚动时目录固定在屏幕右侧，若目录高度超出屏幕高度，目录产生滚动条。 -### Code Highlight +### 代码高亮 -While the jekyll is update to 3.x.x, you can use github flavored markdown to write code. -More info to see [syntax-highlighter-changed](https://jekyllrb.com/docs/upgrading/2-to-3/#syntax-highlighter-changed). +随着 jekyll 的升级，目前代码高亮使用风格与 github 上的 markdown 写法一致。 ### 灯泡效果 @@ -116,8 +116,6 @@ More info to see [syntax-highlighter-changed](https://jekyllrb.com/docs/upgradin **欢迎使用这个主题，使用时请保留 footer 上的模板主题来源。** Theme designed by [HyG](https://github.com/gaohaoyang). ![footer](http://ww3.sinaimg.cn/large/7011d6cfjw1f3bepd8002j20hl02ct95.jpg) -关于旧版博客，我不再维护，同时我把代码转移到了另一个仓库，见 [Gaohaoyang/old-blog](https://github.com/Gaohaoyang/old-blog)。 - ### 统计 博客支持百度统计和 Google Analytics，只需在`_config.yml`中配置响应的id即可，代码如下。 @@ -191,6 +189,8 @@ github_username: Gaohaoyang email: gaohaoyang126@126.com weibo_username: 3115521wh zhihu_username: gaohaoyang +linkedIn_username: gaohaoyang +dribbble_username: description_footer: 本站记录我前端之旅的沿途风景！ ``` @@ -316,6 +316,7 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml + 感谢捐助的小伙伴！！！ * 2016.07.25 收到 邓炳初 ¥6.66 捐赠 @@ -364,6 +365,8 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml * `[^]` 使用 Masonry 重写了 Demo 页中的瀑布流布局，响应式交互体验更好 * `[-]` 去除了 jQuery 和 BootStrap，使得加载速度更快 +关于旧版博客，我不再维护，同时我把代码转移到了另一个仓库，见 [Gaohaoyang/old-blog](https://github.com/Gaohaoyang/old-blog)。 + ## License [MIT License](https://github.com/Gaohaoyang/gaohaoyang.github.io/blob/master/LICENSE.md) diff --git a/README.md b/README.md index 05f397e..983a345 100644 --- a/README.md +++ b/README.md @@ -1,126 +1,128 @@ -# 关于这个简洁明快的博客主题 - -随着 jekyll 的版本升级，同时我也想重构我的旧版博客主题，因此在这个月对博客进行了重构加改版，这个仓库存放我的新博客，并且我也会一直使用这个主题。目前基本改版完成，后续可能还会有些细节上的修补。 - -**博客访问地址：[http://gaohaoyang.github.io/](http://gaohaoyang.github.io/)**。若您喜欢这个新的博客主题，请给我个star以示鼓励吧，欢迎大家使用。 - -## 目录 - -* [预览图](#预览图) -* [各部分详情](#各部分详情) - * [主页 Home](#主页-home) - * [归档页 Archives](#归档页-archives) - * [分类页 Categories](#分类页-categories) - * [标签页 Tags](#标签页-tags) - * [收藏页 Collections](#收藏页-collections) - * [展示页 Demo](#展示页-demo) - * [关于页 About](#关于页-about) - * [评论](#评论) - * [目录 Contents](#目录-contents) - * [代码高亮](#代码高亮) - * [灯泡效果](#灯泡效果) - * [移动端适配](#移动端适配) +# About this Cool Concise Jekyll Blog Theme + +[中文版 Chinese README 请点击这里 🇨🇳](https://github.com/Gaohaoyang/gaohaoyang.github.io/blob/master/README-zh-cn.md) + +With the escalation of jekyll version, but I also want to reconstruct my older blog theme, so I did reconstruction and added some features recently. My new blog theme will still be stored in this repository. I will also use this theme in the future. Now I have done basically, then I will focus on issues that users opend to make theme better. + +**My Blog Url: [http://gaohaoyang.github.io/](http://gaohaoyang.github.io/)**. If you like this theme, you can give me a star to encourage me. Welcome everyone to use it. + +## Content + +* [Preview](#preview) +* [Page Details](#page-details) + * [Home](#home) + * [Archives](#archives) + * [Categories](#categories) + * [Tags](#tags) + * [Collections](#collections) + * [Demo](#demo) + * [About](#about) + * [Comments](#comments) + * [Post Contents](#post-contents) + * [Code Highlight](#code-highlight) + * [Light Shadow](#light-shadow) + * [Mobile Adaptation](#mobile-adaptation) * [Footer](#footer) - * [统计](#统计) -* [博客主题使用方法](#博客主题使用方法) - * [1. 安装 ruby 和 jekyll 环境](#1-安装-ruby-和-jekyll-环境) - * [2. 复制博客主题代码](#2-复制博客主题代码) - * [3. 修改参数](#3-修改参数) - * [基本信息](#基本信息) - * [链接信息](#链接信息) - * [评论信息](#评论信息) - * [统计信息](#统计信息) - * [4. 写文章](#4-写文章) - * [5. 本地运行](#5-本地运行) - * [6. 发布到 GitHub](#6-发布到-github) -* [捐助 donate](#捐助-donate) + * [Statistical Analysis](#statistical-analysis) +* [Usage](#usage) + * [1. Install ruby and jekyll environment](#1-install-ruby-and-jekyll-environment) + * [2. Copy theme code](#2-copy-theme-code) + * [3. Change parameter](#3-change-parameter) + * [Basic info](#basic-info) + * [Link info](#link-info) + * [Comments info](#comments-info) + * [Statistical analysis info](#statistical-analysis-info) + * [4. Write post](#4-write-post) + * [5. Local launch](#5-local-launch) + * [6. Push to GitHub](#6-push-to-github) +* [Donate](#donate) * [Update Log](#update-log) * [License](#license) -## 预览图 +## Preview -先上预览图： +First of all, let's see previews. -主页 +Index Page ![index](http://ww3.sinaimg.cn/large/7011d6cfjw1f3bdli86awj211k0oyqen.jpg) -文章页 +Post Page ![post](http://ww4.sinaimg.cn/large/7011d6cfjw1f3bdmzb9v6j210p0j7gwn.jpg) -## 各部分详情 +## Page Details -### 主页 Home +### Home -主页默认展示5篇文章的摘要部分，用户点击标题或阅读全文后进入文章页。右侧为近期文章、分类和标签3块区域，用户可以继续在这部分添加区域，只需修改`index.html`即可。 +Index page show 5 posts excerpt as a default. Readers can click article title or read more button to see full post. There are recent posts area, categories area and tags area at the right part of the index page. You can also add an area at this part, if you change the file `index.html`. -### 归档页 Archives +### Archives -按照年份归档文章。 +Archive post according to the year. -### 分类页 Categories +### Categories -按照文章的分类，显示文章。 +Show posts according to the category. -### 标签页 Tags +### Tags -按照文章的标签显示文章。 +Show posts according to the tags. -### 收藏页 Collections +### Collections -本页是用`markdown`写的，用户可以收藏自己喜欢的文章链接。 +The user can collect their favorite article links with `markdown` syntax. -### 展示页 Demo +### Demo -使用 [Masonry](http://masonry.desandro.com/) 重写了瀑布流布局，响应式布局，更好的交互体验。 +I use *[Masonry](http://masonry.desandro.com/)* to rewrite the waterfall responsive layout. Better interactive experience. -### 关于页 About +### About -对个人和对本站的介绍，使用`markdown`写的。 +The user can write some introduction about theirselves and their site with `markdown` syntax. -### 评论 +### Comments -支持 [多说评论](http://duoshuo.com/) 和 [disqus](https://disqus.com/) 评论。 +This theme supports both [disqus](https://disqus.com/) and [多说评论 duoshuo comments](http://duoshuo.com/). It's very easy to config your comments module. -只需要在 `_config.yml` 修改相应的配置`short_name`即可，如下： +The only thing you need do is to change the `short_name` in the file `_config.yml`. As follows. ```yml # comments # two ways to comment, only choose one, and use your own short name -# 两种评论插件，选一个就好了，使用自己的 short_name duoshuo_shortname: #xxx disqus_shortname: xxx ``` -### 目录 Contents +### Post Contents -页面滚动时目录固定在屏幕右侧，若目录高度超出屏幕高度，目录产生滚动条。 +The post contents is fixed at the right side while page is scrolling. There will be a scroll bar on contents while it is outside the window height. -### 代码高亮 +### Code Highlight -随着 jekyll 的升级，目前代码高亮使用风格与 github 上的 markdown 写法一致。 +While the jekyll is update to 3.x.x, you can use github flavored markdown to write code. -### 灯泡效果 +More info to see [syntax-highlighter-changed](https://jekyllrb.com/docs/upgrading/2-to-3/#syntax-highlighter-changed). + +### Light Shadow ![light](http://ww3.sinaimg.cn/large/7011d6cfjw1f3be6y4vp3j209i02rweg.jpg) -可以看到导航按钮高亮时，下面的阴影效果，我把这个称为灯泡效果。 +You can see the white shadow on the current item in the navbar. I call this light shadow. -### 移动端适配 +### Mobile Adaptation -完美适配移动端。 +Of course, I have done a very good mobile adaptation. ![mobile](http://ww4.sinaimg.cn/large/7011d6cfjw1f3bebnzxkpj20ah0fzgp4.jpg) ### Footer -**欢迎使用这个主题，使用时请保留 footer 上的模板主题来源。** Theme designed by [HyG](https://github.com/gaohaoyang). -![footer](http://ww3.sinaimg.cn/large/7011d6cfjw1f3bepd8002j20hl02ct95.jpg) +**Welcome to use this blog theme, but please keep the theme author info at footer.** Theme designed by [HyG](https://github.com/gaohaoyang). -关于旧版博客，我不再维护，同时我把代码转移到了另一个仓库，见 [Gaohaoyang/old-blog](https://github.com/Gaohaoyang/old-blog)。 +![footer](http://ww3.sinaimg.cn/large/7011d6cfjw1f3bepd8002j20hl02ct95.jpg) -### 统计 +### Statistical Analysis -博客支持百度统计和 Google Analytics，只需在`_config.yml`中配置响应的id即可，代码如下。 +This theme supports Google Analytics and Baidu Statistics， you can just config the id in the file `_config.yml`, as follows. ```yml # statistic analysis 统计代码 @@ -131,45 +133,41 @@ baidu_tongji_id: xxxxxxxxxxxx google_analytics_id: UA-xxxxxxxx # google 分析追踪id ``` -## 博客主题使用方法 - -欢迎使用这个主题，以下简单说一下使用方法。 +## Usage -### 1. 安装 ruby 和 jekyll 环境 +Welcome everyone to use this theme, this part shows introduction to use. -这一步和第5步主要是为了让博客系统在本地跑起来，如果不想在本地运行，可以无视这两步，但我还是强烈建议试着先在本地跑起来，没有什么问题后再推送的 GitHub 上。 +### 1. Install ruby and jekyll environment -Windows 用户可以直接使用 [RubyInstaller](http://rubyinstaller.org/) 安装 ruby 环境。后续的操作中可能还会提示安装 DevKit，根据提示操作即可。 +This step and Step 5 mainly talk to you how to launch blog at local. If you don't want to launch at local, you can ignore these 2 steps. But I still strongly suggest to do this. Ensure there is nothing wrong before pushing to the github. -建议使用 [RubyGems 镜像- Ruby China](https://gems.ruby-china.org/) 安装 jekyll。 +The Windows users can directly use [RubyInstaller](http://rubyinstaller.org/) to install ruby environment. Follow the prompts while installing. -安装 jekyll 命令如下 +Install jekyll commands: ``` gem install jekyll ``` -详情可以查看 jekyll 官网。[https://jekyllrb.com/](https://jekyllrb.com/) 或 中文翻译版 jekyll 官网[http://jekyllcn.com/](http://jekyllcn.com/) （中文文档翻译落后于英文官网，有兴趣有时间的小伙伴可以参与翻译，为开源世界贡献一份力哦~） +For more details, you can view the jekyll official website. [https://jekyllrb.com/](https://jekyllrb.com/) -在 mac OS X El Capitan 系统下安装可能会出现问题，解决方案详情见 jekyll 官网: [ https://jekyllrb.com/docs/troubleshooting/#jekyll-amp-mac-os-x-1011]( https://jekyllrb.com/docs/troubleshooting/#jekyll-amp-mac-os-x-1011) +There may be something wrong at mac OS X El Capitan, you can see the solution at [https://jekyllrb.com/docs/troubleshooting/#jekyll-amp-mac-os-x-1011]( https://jekyllrb.com/docs/troubleshooting/#jekyll-amp-mac-os-x-1011). -对 jekyll 本身感兴趣的同学可以看看 jekyll 源码: [https://github.com/jekyll/jekyll](https://github.com/jekyll/jekyll) +If you are interesting in jekyll, you can see the jekyll source code at [https://github.com/jekyll/jekyll](https://github.com/jekyll/jekyll). ![jekyll logo](http://jekyllcn.com/img/logo-2x.png) -### 2. 复制博客主题代码 +### 2. Copy theme code -可以直接 clone 、下载 或 fork 这个仓库的代码即可 +You can clone, download or fork this repo. -### 3. 修改参数 +### 3. Change parameter -主要修改 `_config.yml` 中的参数和自己的网站小图`favicon.ico` +Mainly change the parameters at file `_config.yml` and use your own `favicon.ico`. -`_config.yml`文件中 +#### Basic info -#### 基本信息 - -主要用于网站头部header。 +Shows at site header part. ```yml # Site settings @@ -179,9 +177,9 @@ baseurl: "" # the subpath of your site, e.g. /blog url: "http://gaohaoyang.github.io" # the base hostname & protocol for your site ``` -#### 链接信息 +#### Link info -主要用于网站底部footer。 +Mainly shows at the footer of the site. ```yml # other links @@ -191,46 +189,49 @@ github_username: Gaohaoyang email: gaohaoyang126@126.com weibo_username: 3115521wh zhihu_username: gaohaoyang +linkedIn_username: gaohaoyang +dribbble_username: description_footer: 本站记录我前端之旅的沿途风景！ ``` -#### 评论信息 +#### Comments info -获取`short_name`的方法： +Get your own `short_name`: -访问 https://disqus.com/ 或 http://duoshuo.com/ 根据提示操作即可。 +Visit https://disqus.com/ or http://duoshuo.com/. And follow the prompts at the site. ```yml # comments # two ways to comment, only choose one, and use your own short name -# 两种评论插件，选一个就好了，使用自己的 short_name duoshuo_shortname: #hygblog -disqus_shortname: gaohaoyang +disqus_shortname: xxxx ``` -运行成功后，可以在 disqus 或 多说 的后台管理页看到相关信息。 +When you done, you can also see the comments info at disqus or duoshuo admin console. + +#### Statistical analysis info -#### 统计信息 +Get Google Analytics id or Baidu Statistics id： -获取 百度统计id 或 Google Analytics id 的方法： +Visit https://www.google.com/analytics/ or http://tongji.baidu.com/. And follow the prompts at the site. -访问 http://tongji.baidu.com/ 或 https://www.google.com/analytics/ 根据提示操作即可。当然，如果不想添加统计信息，这两个参数可以不填。 +Of course, if you don't want any statistical and analysis info, you can type nothing at id position. ```yml # statistic analysis 统计代码 # 百度统计 id，将统计代码替换为自己的百度统计id，即 # hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx"; # xxxxx字符串 -baidu_tongji_id: cf8506e0ef223e57ff6239944e5d46a4 -google_analytics_id: UA-72449510-4 # google 分析追踪id +baidu_tongji_id: cf850xxxxxxxxxxxxxxxx +google_analytics_id: UA-7xxxxxx-4 # google 分析追踪id ``` -成功后，进入自己的百度统计或 Google Analytics 后台管理，即可看到网站的访问量、访客等相关信息。 +When you done, you can see UV, PV, location etc. info at your own Google Analytics or Baidu Statistic console. -### 4. 写文章 +### 4. Write post -`_posts`目录下存放文章信息，文章头部注明 layout(布局)、title、date、categories、tags、author(可选)，如下： +You can write posts at folder `_posts`. At the beginning of the post, you should declare layout、title、date、categories、tags、author(optional) info. ``` --- @@ -243,34 +244,34 @@ author: Haoyang Gao --- ``` -下面这两行代码为产生目录时使用 +These follow code is for making contents. ``` * content {:toc} ``` -文章中存在的4次换行为摘要分割符，换行前的内容会以摘要的形式显示在主页Home上，进入文章页不影响。 +You can use 4 wraps as a excerpt separator. The words before separator as excerpt show in the index page. When you enter the post page, you can read full article. -换行符的设置见配置文件`_config.yml`的 excerpt，如下： +The wraps config is in the file `_config.yml`, as follows: ```yml # excerpt excerpt_separator: "\n\n\n\n" ``` -使用 markdown 语法写文章。 +You should use markdown syntax to write article, just like write readme in github. -代码风格与 GitHub 上 README 或 issue 中的一致。使用3个\`\`\`的方式。 +You can use 3 \`\`\` to write code block. -### 5. 本地运行 +### 5. Local launch -本地执行 +use command: ``` jekyll s ``` -显示 +Terminal shows: ``` Configuration file: E:/GitWorkSpace/blog/_config.yml @@ -287,83 +288,69 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml Server running... press ctrl-c to stop. ``` -在本地访问 localhost:4000 即可看到博客主页。 - -若安装了 Foxit 福昕pdf阅读器可能会占用4000端口，关闭 Foxit服务 或切换 jekyll 端口即可解决。详情见文章：[对这个 jekyll 博客主题的改版和重构](http://gaohaoyang.github.io/2016/03/12/jekyll-theme-version-2.0/) +Visit localhost:4000 to see your blog!!! -若正在使用全局代理，可能会报错502，关闭全局代理即可。 +### 6. Push to GitHub -### 6. 发布到 GitHub +If there is nothing wrong, push code to your github! -没什么问题，推送到自己的博客仓库即可。 +## Donate -## 捐助 donate +You can also donate me for a coffee, and I'll do better. Thanks. -您也可以捐助我喝杯咖啡！感谢！ - - - -支付宝 | 微信支付 | PayPal + PayPal| Wechat Pay | Alipay :---: | :---: | :---: -![alipay](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bk8ikzoij20740743z5.jpg) | ![wechat](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bkdw3bslj206z06q3z6.jpg) | [![PayPal](https://www.paypalobjects.com/webstatic/paypalme/images/pp_logo_small.png)
Donate via PayPal ](https://www.paypal.me/gaohaoyang) - - - + [![PayPal](https://www.paypalobjects.com/webstatic/paypalme/images/pp_logo_small.png)
Donate via PayPal ](https://www.paypal.me/gaohaoyang)| ![wechat](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bkdw3bslj206z06q3z6.jpg) | ![alipay](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bk8ikzoij20740743z5.jpg) -感谢捐助的小伙伴！！！ +Thanks these friends!!! -* 2016.07.25 收到 邓炳初 ¥6.66 捐赠 -* 2016.07.11 收到 彦风 ¥6.66 捐赠 -* 2016.07.07 收到 Klci ¥2.50 捐赠 -* 2016.05.08 收到 1057 ¥10.57 捐赠 -* 2016.05.07 收到 吴林 ¥2 捐赠 -* 2016.04.29 收到 北归 ¥10 捐赠 -* 2016.04.28 收到 魏楚阳_Brian ¥2 捐赠 -* 2016.04.28 收到 薛彬 ¥8.8 捐赠 +* 2016.07.25 received 邓炳初 ¥6.66 +* 2016.07.11 received 彦风 ¥6.66 +* 2016.07.07 received Klci ¥2.50 +* 2016.05.08 received 1057 ¥10.57 +* 2016.05.07 received 吴林 ¥2 +* 2016.04.29 received 北归 ¥10 +* 2016.04.28 received 魏楚阳_Brian ¥2 +* 2016.04.28 received 薛彬 ¥8.8 ## Update Log ### 2016.6.20 -* `[+]` 在文章页中添加上一篇和下一篇文章链接。 -* `[^]` 修改 font-family 顺序，避免微软雅黑将单引号解析为全角。 -* `[^]` 修复标签云算法中被除数为零的 bug。[#26](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/26), [#28](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/28), [#30](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/30) +* `[+]` Add next post and previous post link in post page. +* `[^]` Change the sort of font-family to avoid full-width half-width characters mistake. +* `[^]` Fix bug in tags cloud when division by zero. [#26](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/26), [#28](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/28), [#30](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/30) ### 2016.5.11 v2.0.1 -* `[^]` 优化代码，将页面中的大段评论相关代码抽离出来，放入`comments.html` -* `[+]` 添加百度统计和Google分析代码，在`_config.yml`中配置相关参数即可 -* `[+]` 更新文档，添加博客主题使用方法，便于上手 -* `[+]` 添加了`favicon.ico` -* `[^]` 修复 bug，目录太长时，滚动到最底部时隐藏到footer下面。修复后长目录在滚动到底部时使用`position:absolute` -* `[^]` 修改目录区的滚动条样式（仅针对`webkit`内核浏览器） -* `[^]` 修改 demo 页中 disqus 评论区 a 标签的颜色 bug，修改 blockqoute 中 p 标签的 margin -* `[+]` 添加不蒜子计数功能，在footer上显示访问量 -* `[+]` 添加回到顶部功能 +* `[^]` Optimized code, Extracting common code to `comments.html` +* `[+]` Add Google Analysis and Baidu Statistics +* `[+]` Update README, add usage +* `[+]` Add `favicon.ico` +* `[^]` Fix bug at contents +* `[^]` Change the content scroll bar CSS style（Only for `webkit` browser kernel） +* `[^]` Change tag a color at demo page +* `[+]` Add busuanzi counter, show the views count at footer +* `[+]` Add back to top button ### 2016.4.27 v2.0.0 -* `[^]` 基于 jekyll 3.1.2 重构了所有代码 -* `[+]` 主页添加了摘要，在正文中使用4个换行符来分割，可在`_config.yml`中修改 -* `[+]` 主页添加了近期文章、分类列表和标签云 -* `[+]` 主页导航区做了视觉优化，阴影效果 -* `[+]` 增加了归档、标签和分类页面 -* `[+]` 增加了收藏页面 -* `[+]` 评论插件可以选择 disqus 或 多说，直接在`_config.yml`中修改 -* `[+]` 适配移动端 -* `[+]` 页面滚动时，文章目录固定在右侧 -* `[+]` 页面内容较少时，固定 footer 在页面底部 -* `[^]` 使用 GitHub 风格的代码高亮写法，即\`\`\`的写法，去除`highlight.js`代码高亮插件的使用 -* `[^]` 使用 Masonry 重写了 Demo 页中的瀑布流布局，响应式交互体验更好 -* `[-]` 去除了 jQuery 和 BootStrap，使得加载速度更快 +* `[^]` Rewrite all codes based on jekyll 3.1.2 +* `[+]` Add excerpt at index page +* `[+]` Add recently post, categories and tags cloud at index page +* `[+]` Add light shadow at navbar +* `[+]` Add archives, categories, tags page +* `[+]` Add collections page +* `[+]` Add comments plugin with disqus or duoshuo +* `[+]` Mobile Adaptation +* `[+]` Fix post contents to the right side while scrolling page +* `[+]` Fix footer at the bottom when page height is smaller than window height +* `[^]` Use github flavored markdown to write code block(Fenced code blocks) +* `[^]` Rewrite the demo page with Masonry +* `[-]` Remove jQuery and BootStrap + +About my old blog theme, I won't maintain any more. And I put the code at [Gaohaoyang/old-blog](https://github.com/Gaohaoyang/old-blog). ## License From d7cd41684de794c807c6e7d800aa6cf2f360a0b3 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Sun, 7 Aug 2016 21:34:08 +0800 Subject: [PATCH 31/98] update --- README-zh-cn.md | 4 ++-- README.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README-zh-cn.md b/README-zh-cn.md index 6ead41f..ac38951 100644 --- a/README-zh-cn.md +++ b/README-zh-cn.md @@ -1,4 +1,4 @@ -# 关于这个简洁明快的博客主题 +# 关于这个简洁明快的博客主题 🤘🤘🤘 随着 jekyll 的版本升级，同时我也想重构我的旧版博客主题，因此在这个月对博客进行了重构加改版，这个仓库存放我的新博客，并且我也会一直使用这个主题。目前基本改版完成，后续可能还会有些细节上的修补。 @@ -190,7 +190,7 @@ email: gaohaoyang126@126.com weibo_username: 3115521wh zhihu_username: gaohaoyang linkedIn_username: gaohaoyang -dribbble_username: +dribbble_username: description_footer: 本站记录我前端之旅的沿途风景！ ``` diff --git a/README.md b/README.md index 983a345..5050fbc 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# About this Cool Concise Jekyll Blog Theme +# About this Cool Concise Jekyll Blog Theme 🤘🤘🤘 -[中文版 Chinese README 请点击这里 🇨🇳](https://github.com/Gaohaoyang/gaohaoyang.github.io/blob/master/README-zh-cn.md) +**[中文版 Chinese README 请点击这里 🇨🇳](https://github.com/Gaohaoyang/gaohaoyang.github.io/blob/master/README-zh-cn.md)** With the escalation of jekyll version, but I also want to reconstruct my older blog theme, so I did reconstruction and added some features recently. My new blog theme will still be stored in this repository. I will also use this theme in the future. Now I have done basically, then I will focus on issues that users opend to make theme better. From ad8b1bc1c60a2d587c319ae0ab7b36d0ca96f696 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Mon, 8 Aug 2016 21:20:36 +0800 Subject: [PATCH 32/98] update --- _config.yml | 4 ++-- _drafts/CommonJS.md | 2 +- _drafts/ES2015-note.md | 46 +++++++++++++++++++++++++++++++++++++++++- 3 files changed, 48 insertions(+), 4 deletions(-) diff --git a/_config.yml b/_config.yml index 568811a..785a542 100644 --- a/_config.yml +++ b/_config.yml @@ -21,7 +21,7 @@ email: gaohaoyang126@126.com weibo_username: 3115521wh zhihu_username: gaohaoyang linkedIn_username: gaohaoyang -dribbble_username: +dribbble_username: description_footer: 本站记录我前端之旅的沿途风景！ @@ -57,4 +57,4 @@ excerpt_separator: "\n\n\n\n" # paginate gems: [jekyll-paginate] -paginate: 5 +paginate: 6 diff --git a/_drafts/CommonJS.md b/_drafts/CommonJS.md index 2e108ec..c84558f 100644 --- a/_drafts/CommonJS.md +++ b/_drafts/CommonJS.md @@ -1,6 +1,6 @@ --- layout: post -title: "CommonJS 规范的学习" +title: "CommonJS 规范" categories: JavaScript tags: CommonJS 模块化 --- diff --git a/_drafts/ES2015-note.md b/_drafts/ES2015-note.md index ca72eef..0946b5a 100644 --- a/_drafts/ES2015-note.md +++ b/_drafts/ES2015-note.md @@ -255,6 +255,11 @@ baz // undefined var { foo: baz } = { foo: "aaa", bar: "bbb" }; baz // "aaa" +//转化为如下代码： +var _foo$bar2 = { foo: "aaa", bar: "bbb" }; +var baz = _foo$bar2.foo; + + let obj = { first: 'hello', last: 'world' }; let { first: f, last: l } = obj; f // 'hello' @@ -269,17 +274,56 @@ baz // "aaa" foo // error: foo is not defined ``` -对于let和const来说，变量不能重新声明，所以一旦赋值的变量以前声明过，就会报错。 +对于 let 和 const 来说，变量不能重新声明，所以一旦赋值的变量以前声明过，就会报错。 和数组一样，解构也可以用于嵌套结构的对象。 +对象的解构也可以指定默认值。默认值生效的条件是，对象的属性值严格等于`undefined`。 + +```js +var {x = 3} = {x: undefined}; +x // 3 + +var {x = 3} = {x: null}; +x // null +``` + +如果解构失败，变量的值等于`undefined`。 + +```js +var {foo} = {bar: 'baz'}; +foo // undefined +``` ### 字符串的解构赋值 +字符串也可以解构赋值。字符串被转换为一个类似数组的对象。 + +```js +const [a, b, c, d, e] = 'hello'; +a // "h" +b // "e" +c // "l" +d // "l" +e // "o" +``` + ### 数值和布尔值的解构赋值 +解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。 + ### 函数参数的解构赋值 +函数的参数也可以使用解构赋值。 + +```js +function add([x, y]){ + return x + y; +} + +add([1, 2]); // 3 +``` + ### 圆括号问题 ### 用途 From 0036967c7e6fc517a0cca658c4eb4347ecafa0bb Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Fri, 12 Aug 2016 16:47:25 +0800 Subject: [PATCH 33/98] update --- README-zh-cn.md | 1 + README.md | 1 + page/3collections.md | 2 ++ 3 files changed, 4 insertions(+) diff --git a/README-zh-cn.md b/README-zh-cn.md index ac38951..8b8b788 100644 --- a/README-zh-cn.md +++ b/README-zh-cn.md @@ -319,6 +319,7 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 感谢捐助的小伙伴！！！ +* 2016.08.10 收到 ¥4.40 捐赠 * 2016.07.25 收到 邓炳初 ¥6.66 捐赠 * 2016.07.11 收到 彦风 ¥6.66 捐赠 * 2016.07.07 收到 Klci ¥2.50 捐赠 diff --git a/README.md b/README.md index 5050fbc..f4ae232 100644 --- a/README.md +++ b/README.md @@ -304,6 +304,7 @@ You can also donate me for a coffee, and I'll do better. Thanks. Thanks these friends!!! +* 2016.08.10 received ¥4.40 * 2016.07.25 received 邓炳初 ¥6.66 * 2016.07.11 received 彦风 ¥6.66 * 2016.07.07 received Klci ¥2.50 diff --git a/page/3collections.md b/page/3collections.md index 5edfbf8..827e7d4 100644 --- a/page/3collections.md +++ b/page/3collections.md @@ -38,6 +38,8 @@ icon: bookmark ### JavaScript +* [JavaScript 标准参考教程（alpha） -阮一峰](http://javascript.ruanyifeng.com/) + * [You Don't Know JS (book series)](https://github.com/getify/You-Dont-Know-JS) * [You Don't Need jQuery](https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README.zh-CN.md) From 2ddf9cff33feea6a8e60ea49bea542b551d96846 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Fri, 12 Aug 2016 21:25:10 +0800 Subject: [PATCH 34/98] update --- page/3collections.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/page/3collections.md b/page/3collections.md index 827e7d4..e8d9881 100644 --- a/page/3collections.md +++ b/page/3collections.md @@ -40,6 +40,8 @@ icon: bookmark * [JavaScript 标准参考教程（alpha） -阮一峰](http://javascript.ruanyifeng.com/) +* [JavaScript Promise迷你书 -azu](http://liubin.org/promises-book/) + * [You Don't Know JS (book series)](https://github.com/getify/You-Dont-Know-JS) * [You Don't Need jQuery](https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README.zh-CN.md) From 9b5432475d002a69f79aaa50483769aaa905f8ea Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Fri, 26 Aug 2016 10:31:31 +0800 Subject: [PATCH 35/98] update donate --- README-zh-cn.md | 19 ++++++++++--------- _drafts/WebSocket.md | 15 +++++++++++++++ 2 files changed, 25 insertions(+), 9 deletions(-) create mode 100644 _drafts/WebSocket.md diff --git a/README-zh-cn.md b/README-zh-cn.md index 8b8b788..55f5d52 100644 --- a/README-zh-cn.md +++ b/README-zh-cn.md @@ -319,15 +319,16 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 感谢捐助的小伙伴！！！ -* 2016.08.10 收到 ¥4.40 捐赠 -* 2016.07.25 收到 邓炳初 ¥6.66 捐赠 -* 2016.07.11 收到 彦风 ¥6.66 捐赠 -* 2016.07.07 收到 Klci ¥2.50 捐赠 -* 2016.05.08 收到 1057 ¥10.57 捐赠 -* 2016.05.07 收到 吴林 ¥2 捐赠 -* 2016.04.29 收到 北归 ¥10 捐赠 -* 2016.04.28 收到 魏楚阳_Brian ¥2 捐赠 -* 2016.04.28 收到 薛彬 ¥8.8 捐赠 +* 2016.08.25 收到 Erlend Aakre $2.50 +* 2016.08.10 收到 ¥4.40 +* 2016.07.25 收到 邓炳初 ¥6.66 +* 2016.07.11 收到 彦风 ¥6.66 +* 2016.07.07 收到 Klci ¥2.50 +* 2016.05.08 收到 1057 ¥10.57 +* 2016.05.07 收到 吴林 ¥2 +* 2016.04.29 收到 北归 ¥10 +* 2016.04.28 收到 魏楚阳_Brian ¥2 +* 2016.04.28 收到 薛彬 ¥8.8 ## Update Log diff --git a/_drafts/WebSocket.md b/_drafts/WebSocket.md new file mode 100644 index 0000000..6ef52f1 --- /dev/null +++ b/_drafts/WebSocket.md @@ -0,0 +1,15 @@ +--- +layout: post +title: "WebSocket探究与应用" +categories: JavaScript +tags: WebSocket 通信 协议 +--- + +* content +{:toc} + +## WebSocket 适用场景 + +## WebSocket 原理 + +## WebSocket 浏览器兼容性 From 889cf7749d7a3fae62474c6a1a6c1ebae244d9e2 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Fri, 26 Aug 2016 10:32:15 +0800 Subject: [PATCH 36/98] update donate --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f4ae232..4dd1f16 100644 --- a/README.md +++ b/README.md @@ -304,7 +304,8 @@ You can also donate me for a coffee, and I'll do better. Thanks. Thanks these friends!!! -* 2016.08.10 received ¥4.40 +* 2016.08.25 received Erlend Aakre $2.50 +* 2016.08.10 received ¥4.40 * 2016.07.25 received 邓炳初 ¥6.66 * 2016.07.11 received 彦风 ¥6.66 * 2016.07.07 received Klci ¥2.50 From 0cc6bbb6f95d6ee14fe37cf4f1d86a9b66be1f43 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Thu, 1 Sep 2016 10:55:00 +0800 Subject: [PATCH 37/98] update collections --- page/3collections.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/page/3collections.md b/page/3collections.md index e8d9881..baec0d4 100644 --- a/page/3collections.md +++ b/page/3collections.md @@ -108,6 +108,10 @@ icon: bookmark ### AngularJS +- [学习AngularJS 1.x -Harry](https://hairui219.gitbooks.io/learning_angular/content/zh/index.html) + + 本书是作者 [Harry](https://github.com/hairui219) 在学习和应用AngularJS 1.x 的过程中的资料梳理。希望能对大家学习AngularJS有一定帮助…… + * [AngularJS api 官网](https://docs.angularjs.org/api) * [AngularJS入门教程——AngularJS中文社区提供](https://github.com/zensh/AngularjsTutorial_cn) From d00852f7add1b0d4aca4a4ed6856fc46f22bbc94 Mon Sep 17 00:00:00 2001 From: Chris Mungall Date: Wed, 7 Sep 2016 07:06:07 -0700 Subject: [PATCH 38/98] Fix to allow working with site.baseurl Removing leading spaces when prepending with baseurl --- _includes/head.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index 0d90eaa..acc8866 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -8,10 +8,10 @@ - - + + - + {% if site.baidu_tongji_id %} - + + + diff --git a/js/content.js b/js/content.js deleted file mode 100644 index 7f460b6..0000000 --- a/js/content.js +++ /dev/null @@ -1,73 +0,0 @@ -/* jshint asi:true */ -/////////////////////////content//////////////////////////// -generateContent() - -/** - * [generateContent description] - */ -function generateContent() { - var contentToc = document.querySelector('#markdown-toc') - - - if (contentToc === null) { - document.querySelector('#content').style.display = 'none' - } else { - //为了平滑滚动，使用了第三方库scroll.js - //要给每个a标签添加class=scroll - var aTags = contentToc.querySelectorAll('a') - for (var i = 0; i < aTags.length; i++) { - aTags[i].setAttribute('class', 'scroll') - } - - // 将内容转移 - var contentHtml = contentToc.innerHTML - var sideContentUl = document.querySelector('#content-side') - sideContentUl.innerHTML = contentHtml - } - - // 若无相似文章，隐藏这部分 - var relatedPost = document.querySelector('.related-post'); - if (relatedPost.innerHTML.trim() === '') { - relatedPost.style.display = 'none' - } -} - -fixSidebar() - -/** - * [fixSidebar description] - * 滚轮滚到一定位置时，将 sidebar-wrap 添加 fixed 样式 - * 反之，取消样式 - */ -function fixSidebar() { - var sidebarWrap = document.querySelector('.sidebar-wrap') - window.onscroll = function() { - var sidebarWrapTop = sidebarWrap.getBoundingClientRect().top - if (sidebarWrapTop < 21) { - sidebarWrap.classList.add('fixed') - } - var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop) - if (scrollTop < 78) { - sidebarWrap.classList.remove('fixed') - } - } -} - -controlHeight() - -/** - * [controlHeight description] - * 控制 sidebar 的高度 - */ -function controlHeight() { - //先获取similar posts 的高度 - //和用户浏览器窗口的高度 - //给content设置最大高度 - var similarDiv = document.querySelector('.related-post') - var contentUl = document.querySelector('.content-ul') - var similarDivHeight = similarDiv.offsetHeight - var windowHeight = window.innerHeight - var contentMaxHeight = windowHeight - similarDivHeight - 77 - 60 - - contentUl.style.maxHeight = contentMaxHeight + 'px' -} diff --git a/js/pageContent.js b/js/pageContent.js index 239ebb7..8543dfb 100644 --- a/js/pageContent.js +++ b/js/pageContent.js @@ -143,11 +143,16 @@ function moveTOC() { // console.log(this); // }) for (var i = 0; i < aTags.length; i++) { - if (!aTags[i].classList.contains('scroll')) { - aTags[i].classList.add('scroll') + // if (!aTags[i].classList.contains('scroll')) { + // aTags[i].classList.add('scroll') + // } + if (!aTags[i].hasAttribute('data-scroll')) { + aTags[i].setAttribute('data-scroll',''); } + } // } + } } diff --git a/js/scroll.js b/js/scroll.js deleted file mode 100644 index 52850cd..0000000 --- a/js/scroll.js +++ /dev/null @@ -1,65 +0,0 @@ -document.addEventListener("DOMContentLoaded", () => { - "use strict"; - - const root = (() => { - if ("scrollingElement" in document) return document.scrollingElement; - const html = document.documentElement; - const start = html.scrollTop; - html.scrollTop = start + 1; - const end = html.scrollTop; - html.scrollTop = start; - return end > start ? html : document.body; - })(); - - const ease = (duration, elapsed, start, end) => - Math.round(end * (-Math.pow(2, -10 * elapsed/duration) + 1) + start); - - const getCoordinates = hash => { - const start = root.scrollTop; - const delta = (() => { - if (hash.length < 2) return -start; - const target = document.querySelector(hash); - if (!target) return; - const top = target.getBoundingClientRect().top; - const max = root.scrollHeight - window.innerHeight; - return start + top < max ? top : max - start; - })(); - if (delta) return new Map([["start", start], ["delta", delta]]); - }; - - const scroll = link => { - const hash = link.getAttribute("href"); - const coordinates = getCoordinates(hash); - if (!coordinates) return; - - const tick = timestamp => { - progress.set("elapsed", timestamp - start); - root.scrollTop = ease(...progress.values(), ...coordinates.values()); - progress.get("elapsed") < progress.get("duration") - ? requestAnimationFrame(tick) - : complete(hash, coordinates); - }; - - const progress = new Map([["duration", 800]]); - const start = performance.now(); - requestAnimationFrame(tick); - }; - - const complete = (hash, coordinates) => { - history.pushState(null, null, hash); - root.scrollTop = coordinates.get("start") + coordinates.get("delta"); - }; - - const last = list => list.length - 1; - - const attachHandler = (links, index = last(links)) => { - const link = links.item(index); - link.addEventListener("click", event => { - event.preventDefault(); - scroll(link); - }); - if (index) return attachHandler(links, index - 1); - }; - - attachHandler(document.querySelectorAll("a.scroll")); -}); diff --git a/js/scroll.min.js b/js/scroll.min.js deleted file mode 100644 index 847cfb4..0000000 --- a/js/scroll.min.js +++ /dev/null @@ -1,3 +0,0 @@ -document.addEventListener("DOMContentLoaded",function(){var e=function(){if("scrollingElement"in document)return document.scrollingElement;var a=document.documentElement,b=a.scrollTop;a.scrollTop=b+1;var c=a.scrollTop;a.scrollTop=b;return c>b?a:document.body}(),g=function(a){var b=e.scrollTop;if(2>a.length)a=-b;else if(a=document.querySelector(a)){a=a.getBoundingClientRect().top;var c=e.scrollHeight-window.innerHeight;a=b+a=0&&t.item(n)!==this;);return n>-1});e&&e!==document;e=e.parentNode)if(e.matches(t))return e;return null},m=function(e){"#"===e.charAt(0)&&(e=e.substr(1));for(var t,n=String(e),o=n.length,r=-1,a="",c=n.charCodeAt(0);++r=1&&t<=31||127==t||0===r&&t>=48&&t<=57||1===r&&t>=48&&t<=57&&45===c?"\\"+t.toString(16)+" ":t>=128||45===t||95===t||t>=48&&t<=57||t>=65&&t<=90||t>=97&&t<=122?n.charAt(r):"\\"+n.charAt(r)}return"#"+a},p=function(e,t){var n;return"easeInQuad"===e&&(n=t*t),"easeOutQuad"===e&&(n=t*(2-t)),"easeInOutQuad"===e&&(n=t<.5?2*t*t:-1+(4-2*t)*t),"easeInCubic"===e&&(n=t*t*t),"easeOutCubic"===e&&(n=--t*t*t+1),"easeInOutCubic"===e&&(n=t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1),"easeInQuart"===e&&(n=t*t*t*t),"easeOutQuart"===e&&(n=1- --t*t*t*t),"easeInOutQuart"===e&&(n=t<.5?8*t*t*t*t:1-8*--t*t*t*t),"easeInQuint"===e&&(n=t*t*t*t*t),"easeOutQuint"===e&&(n=1+--t*t*t*t*t),"easeInOutQuint"===e&&(n=t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t),n||t},g=function(e,t,n){var o=0;if(e.offsetParent)do o+=e.offsetTop,e=e.offsetParent;while(e);return o=Math.max(o-t-n,0),Math.min(o,v()-b())},b=function(){return Math.max(document.documentElement.clientHeight,e.innerHeight||0)},v=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},y=function(e){return e&&"object"==typeof JSON&&"function"==typeof JSON.parse?JSON.parse(e):{}},O=function(e){return e?f(e)+e.offsetTop:0},S=function(t,n,o){o||(t.focus(),document.activeElement.id!==t.id&&(t.setAttribute("tabindex","-1"),t.focus(),t.style.outline="none"),e.scrollTo(0,n))};i.animateScroll=function(n,o,c){var i=y(o?o.getAttribute("data-options"):null),u=d(t||s,c||{},i),f="[object Number]"===Object.prototype.toString.call(n),h=f||!n.tagName?null:n;if(f||h){var m=e.pageYOffset;u.selectorHeader&&!r&&(r=document.querySelector(u.selectorHeader)),a||(a=O(r));var b,E,I=f?n:g(h,a,parseInt(u.offset,10)),H=I-m,A=v(),j=0,C=function(t,r,a){var c=e.pageYOffset;(t==r||c==r||e.innerHeight+c>=A)&&(clearInterval(a),S(n,r,f),u.callback(n,o))},M=function(){j+=16,b=j/parseInt(u.speed,10),b=b>1?1:b,E=m+H*p(u.easing,b),e.scrollTo(0,Math.floor(E)),C(E,I,l)},w=function(){clearInterval(l),l=setInterval(M,16)};0===e.pageYOffset&&e.scrollTo(0,0),w()}};var E=function(t){var r;try{r=m(decodeURIComponent(e.location.hash))}catch(t){r=m(e.location.hash)}n&&(n.id=n.getAttribute("data-scroll-id"),i.animateScroll(n,o),n=null,o=null)},I=function(r){if(0===r.button&&!r.metaKey&&!r.ctrlKey&&(o=h(r.target,t.selector),o&&"a"===o.tagName.toLowerCase()&&o.hostname===e.location.hostname&&o.pathname===e.location.pathname&&/#/.test(o.href))){var a;try{a=m(decodeURIComponent(o.hash))}catch(e){a=m(o.hash)}if("#"===a){r.preventDefault(),n=document.body;var c=n.id?n.id:"smooth-scroll-top";return n.setAttribute("data-scroll-id",c),n.id="",void(e.location.hash.substring(1)===c?E():e.location.hash=c)}n=document.querySelector(a),n&&(n.setAttribute("data-scroll-id",n.id),n.id="",o.hash===e.location.hash&&(r.preventDefault(),E()))}},H=function(e){c||(c=setTimeout((function(){c=null,a=O(r)}),66))};return i.destroy=function(){t&&(document.removeEventListener("click",I,!1),e.removeEventListener("resize",H,!1),t=null,n=null,o=null,r=null,a=null,c=null,l=null)},i.init=function(n){u&&(i.destroy(),t=d(s,n||{}),r=t.selectorHeader?document.querySelector(t.selectorHeader):null,a=O(r),document.addEventListener("click",I,!1),e.addEventListener("hashchange",E,!1),r&&e.addEventListener("resize",H,!1))},i})); diff --git a/page/0archives.html b/page/0archives.html index 3f4e15a..16cdf83 100644 --- a/page/0archives.html +++ b/page/0archives.html @@ -55,7 +55,7 @@

{{ post.date | date: '%Y' }}

{% assign prevyear = post.previous.date | date: "%Y" %} {% assign counter = counter | plus: 1 %} {% if thisyear != prevyear %} -
  • {{ thisyear }} ({{ counter }})
    • +
  • {{ thisyear }} ({{ counter }})
    • {% assign counter = 0 %} {% endif %} {% endfor %} diff --git a/page/1category.html b/page/1category.html index 7930048..554b2f1 100644 --- a/page/1category.html +++ b/page/1category.html @@ -44,7 +44,7 @@

    {{category | first}}

      {% for category in site.categories%}
    • - + {{ category | first }} ({{ category | last | size }})
      • diff --git a/page/2tags.html b/page/2tags.html index db32705..1cbf889 100644 --- a/page/2tags.html +++ b/page/2tags.html @@ -47,7 +47,7 @@

      {{ tag }}

        {% for tag in sortedtags %}
      • - + {{ tag }} ({{ site.tags[tag].size }})
        • From dc765a0426c2df2068b10bca1da9d5e814afccf1 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Tue, 28 Feb 2017 22:53:25 +0800 Subject: [PATCH 72/98] fix bug --- _sass/_page.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/_sass/_page.scss b/_sass/_page.scss index 3e412c5..b9651ec 100644 --- a/_sass/_page.scss +++ b/_sass/_page.scss @@ -222,9 +222,16 @@ transition: 0.2s cubic-bezier(0.5, 0.1, 0.51, 1.38); } .right-show { + z-index: 999; visibility: visible; opacity: 1; transform: scale(1); + .content-ul{ + margin-bottom: 0; + >li:last-of-type{ + margin-bottom: 16px; + } + } } } } From 95265b2da97edf8f6e8399914f695c5a8092621b Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Tue, 28 Feb 2017 22:54:12 +0800 Subject: [PATCH 73/98] fix back to top --- _includes/backToTop.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/backToTop.html b/_includes/backToTop.html index e98e001..68d69d4 100644 --- a/_includes/backToTop.html +++ b/_includes/backToTop.html @@ -1,5 +1,5 @@
        - +
        From 30c7d20ca53b90e5755f7000c8c92e8a18c89efd Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Tue, 28 Feb 2017 22:56:07 +0800 Subject: [PATCH 74/98] fix scroll speed --- _layouts/default.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_layouts/default.html b/_layouts/default.html index ec05ec3..35e318f 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -15,7 +15,7 @@ {% endif %} + +{% if page.mathjax %} + + +{% endif %} diff --git a/_posts/2015-02-10-welcome-to-jekyll.markdown b/_posts/2015-02-10-welcome-to-jekyll.markdown index 81a92aa..783692c 100644 --- a/_posts/2015-02-10-welcome-to-jekyll.markdown +++ b/_posts/2015-02-10-welcome-to-jekyll.markdown @@ -5,6 +5,7 @@ date: 2015-02-10 15:14:54 categories: jekyll tags: jekyll excerpt: 当年创建 jekyll 时默认的一篇文章，没什么意义，我也一直没删除，留个纪念吧。 +mathjax: true --- You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. @@ -26,3 +27,12 @@ Check out the [Jekyll docs][jekyll] for more info on how to get the most out of [jekyll]: http://jekyllrb.com [jekyll-gh]: https://github.com/jekyll/jekyll [jekyll-help]: https://github.com/jekyll/jekyll-help + +Block Mathjax + +$$ +f(x) = ax + b +$$ + +Inline Mathjax $a \neq b$ + From a0d920634e8decc4baddbda69c77134b11a48808 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Mon, 6 Mar 2017 10:22:47 +0800 Subject: [PATCH 79/98] up --- README-zh-cn.md | 1 + README.md | 1 + 2 files changed, 2 insertions(+) diff --git a/README-zh-cn.md b/README-zh-cn.md index 64bf9ca..c0fac00 100644 --- a/README-zh-cn.md +++ b/README-zh-cn.md @@ -322,6 +322,7 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 感谢捐赠的小伙伴！！！ +* 2017.03.04 收到 史莱姆 ¥9.90 * 2017.03.02 收到 梦想小熊 ¥6.66 * 2017.02.27 收到 夏友杰 ¥6.66 * 2017.02.26 收到 兰缘小妖 ¥10.00 diff --git a/README.md b/README.md index 1d32b19..69e57c2 100644 --- a/README.md +++ b/README.md @@ -311,6 +311,7 @@ You can also donate me for a coffee, and I'll do better. Thanks. Thanks these friends!!! +* 2017.03.04 received 史莱姆 ¥9.90 * 2017.03.02 received 梦想小熊 ¥6.66 * 2017.02.27 received 夏友杰 ¥6.66 * 2017.02.26 received 兰缘小妖 ¥10.00 From df27c082980557a05bfac346e4263438d3886b5c Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Mon, 13 Mar 2017 15:26:23 +0800 Subject: [PATCH 80/98] update --- README-zh-cn.md | 1 + README.md | 1 + 2 files changed, 2 insertions(+) diff --git a/README-zh-cn.md b/README-zh-cn.md index c0fac00..ef93cee 100644 --- a/README-zh-cn.md +++ b/README-zh-cn.md @@ -322,6 +322,7 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 感谢捐赠的小伙伴！！！ +* 2017.03.13 收到 微信用户 ¥6.66 * 2017.03.04 收到 史莱姆 ¥9.90 * 2017.03.02 收到 梦想小熊 ¥6.66 * 2017.02.27 收到 夏友杰 ¥6.66 diff --git a/README.md b/README.md index 69e57c2..518c2c6 100644 --- a/README.md +++ b/README.md @@ -311,6 +311,7 @@ You can also donate me for a coffee, and I'll do better. Thanks. Thanks these friends!!! +* 2017.03.13 received Wechat user ¥6.66 * 2017.03.04 received 史莱姆 ¥9.90 * 2017.03.02 received 梦想小熊 ¥6.66 * 2017.02.27 received 夏友杰 ¥6.66 From 446db188066926c16312fec8878691028a9f89f0 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Mon, 13 Mar 2017 15:30:45 +0800 Subject: [PATCH 81/98] update --- page/3collections.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/page/3collections.md b/page/3collections.md index eb49b36..c3da08a 100644 --- a/page/3collections.md +++ b/page/3collections.md @@ -170,11 +170,11 @@ type: page * [CommonJS 规范 -来自 阮一峰 JavaScript 标准参考教程(alpha)](http://javascript.ruanyifeng.com/nodejs/module.html) -## 技巧 +## other articles - [ Cheat Sheet](http://gethead.info/) * [将footer固定在页面底部的实现方法](https://segmentfault.com/a/1190000004453249) - +- [HTML5 视频 By Pete LePage](https://www.html5rocks.com/zh/tutorials/video/basics/) ## 编辑器 From 049895ce20c0cd364d627cdd2a2f536c00657412 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Tue, 14 Mar 2017 14:56:07 +0800 Subject: [PATCH 82/98] u --- page/3collections.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/page/3collections.md b/page/3collections.md index c3da08a..7346903 100644 --- a/page/3collections.md +++ b/page/3collections.md @@ -42,6 +42,8 @@ type: page - [在线正则表达式匹配](https://regex101.com/) - 这个功能更强大一点，能清楚的区分出贪婪和懒惰正则。 - [http://regexr.com/](http://regexr.com/) +- [google fonts](https://fonts.google.com/) + - [Google Fonts 加速代理](https://fengmk2.com/blog/2016/google-fonts-mirror) ## 编程语言 From 3d8b8fc46dd606a14eb72ee5336406602adb82dd Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Wed, 22 Mar 2017 10:17:28 +0800 Subject: [PATCH 83/98] change to disqus --- _config.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_config.yml b/_config.yml index 475a1c0..365d819 100644 --- a/_config.yml +++ b/_config.yml @@ -28,8 +28,8 @@ description_footer: 本站记录我前端之旅的沿途风景！ # comments # two ways to comment, only choose one, and use your own short name # 两种评论插件，选一个就好了，使用自己的 short_name -duoshuo_shortname: hygblog -disqus_shortname: #gaohaoyang +duoshuo_shortname: #hygblog +disqus_shortname: gaohaoyang # statistic analysis 统计代码 # 百度统计 id，将统计代码替换为自己的百度统计id，即 From 9b4b82cb7da7c24c9d8d1f8d7d69a5939b4ae16f Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Tue, 4 Apr 2017 21:39:44 +0800 Subject: [PATCH 84/98] u --- README-zh-cn.md | 1 + README.md | 1 + _drafts/CommonJS.md | 11 - _drafts/angularJS-directive.md | 19 -- _drafts/threeJS-light-shadow.md | 125 +++++++++++ _sass/_reset.scss | 26 ++- js/main.js | 75 ++++--- js/waterfall.js | 365 +++++++++++++++----------------- 8 files changed, 351 insertions(+), 272 deletions(-) delete mode 100644 _drafts/CommonJS.md delete mode 100644 _drafts/angularJS-directive.md create mode 100644 _drafts/threeJS-light-shadow.md diff --git a/README-zh-cn.md b/README-zh-cn.md index d0ff35d..c597816 100644 --- a/README-zh-cn.md +++ b/README-zh-cn.md @@ -323,6 +323,7 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 感谢捐赠的小伙伴！！！ +* 2017.04.01 收到 Elvin Zeng ¥6.66 * 2017.03.13 收到 微信用户 ¥6.66 * 2017.03.04 收到 史莱姆 ¥9.90 * 2017.03.02 收到 梦想小熊 ¥6.66 diff --git a/README.md b/README.md index d557ad6..9fd2087 100644 --- a/README.md +++ b/README.md @@ -312,6 +312,7 @@ You can also donate me for a coffee, and I'll do better. Thanks. Thanks these friends!!! +* 2017.04.01 received Elvin Zeng ¥6.66 * 2017.03.13 received Wechat user ¥6.66 * 2017.03.04 received 史莱姆 ¥9.90 * 2017.03.02 received 梦想小熊 ¥6.66 diff --git a/_drafts/CommonJS.md b/_drafts/CommonJS.md deleted file mode 100644 index c84558f..0000000 --- a/_drafts/CommonJS.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -layout: post -title: "CommonJS 规范" -categories: JavaScript -tags: CommonJS 模块化 ---- - -* content -{:toc} - -CommonJS diff --git a/_drafts/angularJS-directive.md b/_drafts/angularJS-directive.md deleted file mode 100644 index a22885c..0000000 --- a/_drafts/angularJS-directive.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: post -title: "AngularJS" -categories: JavaScript -tags: AngularJS ---- - -* content -{:toc} - -# directive - - -- [x] 洗牌算法 -- [ ] 倒计时代码 -- [ ] flexible 使用 兼容新 -- [ ] CSS3 动画 - -- [ ] z-index 效果工具 diff --git a/_drafts/threeJS-light-shadow.md b/_drafts/threeJS-light-shadow.md new file mode 100644 index 0000000..bd1c58e --- /dev/null +++ b/_drafts/threeJS-light-shadow.md @@ -0,0 +1,125 @@ +--- +layout: post +title: "three.js 中的光与影" +categories: JavaScript +tags: threeJS webGL +--- + +* content +{:toc} + +在了解了 three.js 中渲染器、场景、相机、几何体等基本知识后，我们来研究一下 three.js 中的光与影。 + + +本文是根据百度前端学院的任务安排进行探索和研究的。算是 [WebGL No. 2 - 光与影](http://ife.baidu.com/course/detail/id/28) 的学习笔记吧。 + +- 任务描述 + - 学习《Three.js 入门指南》第 8 章光与影； + - 理解不同类型灯光的区别和适用场景； + - 学会为场景添加合适的灯光； + - 思考灯光的位置对哪些类型的灯光是无所谓的，以及为什么； + - 思考为什么有些灯光无法形成阴影； + - 在第 1 题场景的基础上，增加光照效果； + - 如果你没做第 1 题，也可以随便在场景中创建一些物体； + - 为物体设置合适的材质（预习第 4 章），使得物体的亮度根据光照有所区别 + - 创建一个地板平面，并将小车投影到地板上 + - 尝试并思考，一个物体（比如甜甜圈）如何将阴影投射到自身（Self-Shadow，自阴影）； + - 实现软阴影的效果（即阴影的边缘有明暗的渐变）。 + +## 光 + +构造函数： + +```js +Light(color, intensity) +``` + +- 颜色 color - (optional) hexadecimal color of the light. Default is 0xffffff (white). +- 强度 intensity - (optional) numeric value of the light's strength/intensity. Default is 1. + +光的基类，被其他光类所继承。 + +### 环境光 + +AmbientLight ['æmbɪənt] 平均照亮场景中的所有物体。 + +无方向，不产生影子。 + +```js +var light = new THREE.AmbientLight(0x404040); // soft white light +scene.add(light); +``` + +### 点光源 + +PointLight 从一个孤立的点向各个方向发射。没有遮盖的灯泡就是一个典型的例子。 + +可以产生影子。 + +```js +var light = new THREE.PointLight(0xff0000, 1, 100); +light.position.set(50, 50, 50); +scene.add(light); +``` + +### 平行光 + +DirectionalLight 有特定方向的光。光线平行，无限远。用于模拟日光。太阳足够远，可以认为是无限远的，并且发射的光线是平行的。 + +可以产生影子。[平行光的影子 DirectionalLightShadow](https://threejs.org/docs/index.html#Reference/Lights.Shadows/DirectionalLightShadow)。 + +```js +// White directional light at half intensity shining from the top. +var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); +scene.add(directionalLight); +``` + +- 属性 + + - `.position` + + This is set equal to Object3D.DefaultUp (0, 1, 0), so that the light shines from the top down. + + 光线从平面 (0, 1, 0) 的法向射出。 + + +### 聚光灯 + +SpotLight 光从孤立点射出，沿着一个椎体向远处延伸。 + +可以产生影子。 + +```js +// white spotlight shining from the side, casting a shadow + +var spotLight = new THREE.SpotLight(0xffffff); +spotLight.position.set(100, 1000, 100); + +spotLight.castShadow = true; + +spotLight.shadow.mapSize.width = 1024; +spotLight.shadow.mapSize.height = 1024; + +spotLight.shadow.camera.near = 500; +spotLight.shadow.camera.far = 4000; +spotLight.shadow.camera.fov = 30; + +scene.add(spotLight); +``` + +### 半球光 + +HemisphereLight 光源位于场景上方，光线颜色从天空过度到地面。 + +不能产生影子。 + +```js +var light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1); +scene.add(light); +``` + +### 矩形光 + +RectAreaLight 从一个矩形面均匀发射的光。常被用于明亮的窗户， + +## 影子 diff --git a/_sass/_reset.scss b/_sass/_reset.scss index ef66fe6..b044b28 100644 --- a/_sass/_reset.scss +++ b/_sass/_reset.scss @@ -21,7 +21,7 @@ h3, h4, h5, h6 { - font-weight: normal; + font-weight: 400; } html { height: 100%; @@ -49,30 +49,28 @@ hr { /////////// h1 { - font-size: 36px; + font-size: 30px; } h2 { - font-size: 30px; + font-size: 26px; border-bottom: 1px solid #eee; + margin: 50px 0 25px; } h3 { - font-size: 26px; + font-size: 23px; + margin: 50px 0 20px; } h4 { - font-size: 22px; + font-size: 19px; + margin: 30px 0 10px; } h5 { - font-size: 20px; -} -h6 { - font-size: 18px; + font-size: 17px; + margin: 20px 0 10px; } -h2, -h3, -h4, -h5, h6 { - margin: 20px 0 10px; + font-size: 16px; + margin: 10px 0 5px; } blockquote { color: #444; diff --git a/js/main.js b/js/main.js index b6b6147..cb8adf1 100644 --- a/js/main.js +++ b/js/main.js @@ -8,53 +8,50 @@ * clickMenu */ (function() { - if (window.innerWidth <= 770) { - var menuBtn = document.querySelector('#headerMenu') - var nav = document.querySelector('#headerNav') - menuBtn.onclick = function(e) { - e.stopPropagation() - if (menuBtn.classList.contains('active')) { - menuBtn.classList.remove('active') - nav.classList.remove('nav-show') - } else { - nav.classList.add('nav-show') - menuBtn.classList.add('active') - } - } - document.querySelector('body').addEventListener('click', function() { - nav.classList.remove('nav-show') - menuBtn.classList.remove('active') - }) + if (window.innerWidth <= 770) { + var menuBtn = document.querySelector('#headerMenu') + var nav = document.querySelector('#headerNav') + menuBtn.onclick = function(e) { + e.stopPropagation() + if (menuBtn.classList.contains('active')) { + menuBtn.classList.remove('active') + nav.classList.remove('nav-show') + } else { + nav.classList.add('nav-show') + menuBtn.classList.add('active') + } } + document.querySelector('body').addEventListener('click', function() { + nav.classList.remove('nav-show') + menuBtn.classList.remove('active') + }) + } }()); - //////////////////////////back to top//////////////////////////// (function() { - var backToTop = document.querySelector('.back-to-top') - var backToTopA = document.querySelector('.back-to-top a') - // console.log(backToTop); - window.addEventListener('scroll',function () { - - - // 页面顶部滚进去的距离 - var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop) - - if (scrollTop > 200) { - backToTop.classList.add('back-to-top-show') - } else { - backToTop.classList.remove('back-to-top-show') - } - }) + var backToTop = document.querySelector('.back-to-top') + var backToTopA = document.querySelector('.back-to-top a') + // console.log(backToTop); + window.addEventListener('scroll', function() { + + // 页面顶部滚进去的距离 + var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + + if (scrollTop > 200) { + backToTop.classList.add('back-to-top-show') + } else { + backToTop.classList.remove('back-to-top-show') + } + }) - // backToTopA.addEventListener('click',function (e) { - // e.preventDefault() - // window.scrollTo(0,0) - // }) + // backToTopA.addEventListener('click',function (e) { + // e.preventDefault() + // window.scrollTo(0,0) + // }) }()); - //////////////////////////hover on demo////////////////////////////// (function() { - var demoItems = document.querySelectorAll('.grid-item') + var demoItems = document.querySelectorAll('.grid-item') }()); diff --git a/js/waterfall.js b/js/waterfall.js index 4e3071f..fe297a7 100644 --- a/js/waterfall.js +++ b/js/waterfall.js @@ -9,176 +9,163 @@ */ (function() { - /** + /** * 内容JSON */ - var demoContent = [ - { - demo_link: 'https://codepen.io/haoyang/pen/jrvrQq', - img_link: 'https://ooo.0o0.ooo/2016/11/24/5836d81f48cd2.png', - code_link: 'https://codepen.io/haoyang/pen/jrvrQq', - title: 'Fisher-Yates 洗牌算法动画', - core_tech: 'JavaScript', - description: 'Fisher-Yates 洗牌算法动画。算法详情见 这里。' - },{ - demo_link: 'http://gaohaoyang.github.io/test/headerTransition/', - img_link: 'https://ooo.0o0.ooo/2016/06/20/5768c1597d1fe.png', - code_link: 'https://github.com/Gaohaoyang/test/tree/master/headerTransition', - title: 'Header Transition 渐变动画', - core_tech: 'jQuery BootStrap CSS3', - description: '花费不到半小时帮师兄做了一个简单的 CSS3 动画效果，当页面滚动到指定距离时，header 区的背景色由透明变为蓝色。仿照了网站 https://quorrajs.org/ 的 Header 区动画效果。' - }, { - demo_link: 'http://gaohaoyang.github.io/mask-fade-out/', - img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/demo-fade-out.png', - code_link: 'https://github.com/Gaohaoyang/mask-fade-out', - title: '遮罩层按指定路径缩小消失', - core_tech: 'jQuery CSS', - description: '使用 animate 方法，做到兼容 IE8。曾在联想服务官网上线3个月。' - }, { - demo_link: 'http://gaohaoyang.github.io/ToDo-WebApp/', - img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/blog-todoWebApp.png', - code_link: 'https://github.com/Gaohaoyang/ToDo-WebApp', - title: '百度前端学院 task0004 ToDo 应用(移动端)', - core_tech: 'JavaScript LocalStorage requireJS Sass Gulp XSS', - description: '在任务三中，做了一个 PC 端的 ToDo 应用。任务四是将它优化，以适应移动端设备。' - }, { - demo_link: 'http://gaohaoyang.github.io/baidu-ife-practice/task0003/', - img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/demo-todo.png', - code_link: 'https://github.com/Gaohaoyang/baidu-ife-practice/tree/master/task0003', - title: '百度前端学院 task0003 ToDo 应用', - core_tech: 'JavaScript LocalStorage', - description: '任务三，ToDo 单页应用，主要使用了 LocalStorage 存储数据，使用 JSON 模拟了 3 张数据表。' - }, { - demo_link: 'http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_5.html', - img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/demo-drag.png', - code_link: 'https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang', - title: '拖拽交互', - core_tech: 'JavaScript', - description: '对鼠标事件应用，以及判断定位的方法等。' - }, { - demo_link: 'http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_4.html', - img_link: 'http://ww2.sinaimg.cn/large/7011d6cfjw1f3ba2krzs0j207005y0sv.jpg', - code_link: 'https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang', - title: '输入框即时提示', - core_tech: 'JavaScript', - description: '对input监听，使用正在表达式高亮匹配，实现输入联想效果。' - }, { - demo_link: 'http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_3.html', - img_link: 'http://ww2.sinaimg.cn/large/7011d6cfjw1f3ba04okoqj20eq093wh1.jpg', - code_link: 'https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang', - title: '轮播图', - core_tech: 'JavaScript', - description: '变速运动，运动终止条件的应用。' - }, { - demo_link: 'http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_2.html', - img_link: 'http://ww4.sinaimg.cn/large/7011d6cfjw1f3b9w6xpz5j20ae02pgm3.jpg', - code_link: 'https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang', - title: '倒计时', - core_tech: 'JavaScript', - description: 'setInterval()，Date 对象的学习和使用。' - }, { - demo_link: 'http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_1.html', - img_link: 'http://ww3.sinaimg.cn/large/7011d6cfjw1f3b9tmyuh2j20au0aaaar.jpg', - code_link: 'https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang', - title: '处理兴趣爱好列表', - core_tech: 'JavaScript', - description: '对JavaScript正则表达式和字符串的练习。' - }, { - demo_link: 'http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/index.html', - img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/demo-demo-index.png', - code_link: 'https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang', - title: '百度前端学院 task0002 展示主页', - core_tech: 'HTML CSS', - description: '任务二的展示主页，里面包含五个小 demo。还有一篇相关的日志。' - }, { - demo_link: 'http://gaohaoyang.github.io/ife/task/task0001/work/Gaohaoyang/index.html', - img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/Demo-blog-ife.jpg', - code_link: 'https://github.com/Gaohaoyang/ife/tree/master/task/task0001/work/Gaohaoyang', - title: '百度前端学院 task0001 个人博客', - core_tech: 'HTML CSS', - description: '完成百度前端学院的任务。深刻的理解了BFC、浮动、inline-block间距，多列布局等技术。还有一篇相关的日志。' - }, { - demo_link: 'http://gaohaoyang.github.io/ghost-button-css3/', - img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/DemoGhost-Button.png', - code_link: 'https://github.com/Gaohaoyang/ghost-button-css3', - title: 'Ghost Button 幽灵按钮', - core_tech: 'CSS3', - description: '使用 CSS3 中的旋转、缩放、过渡、动画等效果，制作出很酷的按钮效果。' - }, { - demo_link: 'http://gaohaoyang.github.io/shadow-demo-css3', - img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/Demoshadow.png', - code_link: 'https://github.com/Gaohaoyang/shadow-demo-css3', - title: 'CSS3 阴影特效', - core_tech: 'CSS3', - description: 'CSS3 中的阴影、旋转等效果，制作出曲边阴影和翘边阴影。' - }, { - demo_link: 'http://gaohaoyang.github.io/learning-AngularJS/2-3-bookstore-add-sth-by-myself/', - img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/DemoAngularJS.png', - code_link: 'https://github.com/Gaohaoyang/learning-AngularJS/tree/master/2-3-bookstore-add-sth-by-myself', - title: 'AngularJS 结合动画效果', - core_tech: 'AngularJS CSS3', - description: '使用 AngularJS 中的 ngAnimate 加 CSS3里面的一些旋转效果，做出页面切换的效果。' - }, { - demo_link: 'http://gaohaoyang.github.io/learning-AngularJS/2-4-UiRouterPractice', - img_link: 'http://ww2.sinaimg.cn/large/7011d6cfjw1f3b8zumfqij20q40nh76x.jpg', - code_link: 'https://github.com/Gaohaoyang/learning-AngularJS/tree/master/2-4-UiRouterPractice', - title: 'AngularJS UI-router 练习', - core_tech: 'AngularJS UI-router', - description: 'UI-router 作为 AngularJS 中路由的扩充，实现了多级路由的效果。使得前端界面跳转更加方便。' - }, { - demo_link: 'http://gaohaoyang.github.io/test/bootstrap-zhihu/', - img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/teach-girlfriend-html-CopyZhihu.jpg', - code_link: 'https://github.com/Gaohaoyang/test/tree/master/bootstrap-zhihu', - title: '仿知乎页面', - core_tech: 'HTML BootStrap', - description: '使用BootStrap仿照知乎做了一个静态页面。' - }]; + var demoContent = [ + { + demo_link: 'https://codepen.io/haoyang/pen/jrvrQq', + img_link: 'https://ooo.0o0.ooo/2016/11/24/5836d81f48cd2.png', + code_link: 'https://codepen.io/haoyang/pen/jrvrQq', + title: 'Fisher-Yates 洗牌算法动画', + core_tech: 'JavaScript', + description: 'Fisher-Yates 洗牌算法动画。算法详情见 这里。' + }, { + demo_link: 'http://gaohaoyang.github.io/test/headerTransition/', + img_link: 'https://ooo.0o0.ooo/2016/06/20/5768c1597d1fe.png', + code_link: 'https://github.com/Gaohaoyang/test/tree/master/headerTransition', + title: 'Header Transition 渐变动画', + core_tech: 'jQuery BootStrap CSS3', + description: '花费不到半小时帮师兄做了一个简单的 CSS3 动画效果，当页面滚动到指定距离时，header 区的背景色由透明变为蓝色。仿照了网站 https://quorrajs.org/ 的 Header 区动画效果。' + }, { + demo_link: 'http://gaohaoyang.github.io/mask-fade-out/', + img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/demo-fade-out.png', + code_link: 'https://github.com/Gaohaoyang/mask-fade-out', + title: '遮罩层按指定路径缩小消失', + core_tech: 'jQuery CSS', + description: '使用 animate 方法，做到兼容 IE8。曾在联想服务官网上线3个月。' + }, { + demo_link: 'http://gaohaoyang.github.io/ToDo-WebApp/', + img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/blog-todoWebApp.png', + code_link: 'https://github.com/Gaohaoyang/ToDo-WebApp', + title: '百度前端学院 task0004 ToDo 应用(移动端)', + core_tech: 'JavaScript LocalStorage requireJS Sass Gulp XSS', + description: '在任务三中，做了一个 PC 端的 ToDo 应用。任务四是将它优化，以适应移动端设备。' + }, { + demo_link: 'http://gaohaoyang.github.io/baidu-ife-practice/task0003/', + img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/demo-todo.png', + code_link: 'https://github.com/Gaohaoyang/baidu-ife-practice/tree/master/task0003', + title: '百度前端学院 task0003 ToDo 应用', + core_tech: 'JavaScript LocalStorage', + description: '任务三，ToDo 单页应用，主要使用了 LocalStorage 存储数据，使用 JSON 模拟了 3 张数据表。' + }, { + demo_link: 'http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_5.html', + img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/demo-drag.png', + code_link: 'https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang', + title: '拖拽交互', + core_tech: 'JavaScript', + description: '对鼠标事件应用，以及判断定位的方法等。' + }, { + demo_link: 'http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_4.html', + img_link: 'http://ww2.sinaimg.cn/large/7011d6cfjw1f3ba2krzs0j207005y0sv.jpg', + code_link: 'https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang', + title: '输入框即时提示', + core_tech: 'JavaScript', + description: '对input监听，使用正在表达式高亮匹配，实现输入联想效果。' + }, { + demo_link: 'http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_3.html', + img_link: 'http://ww2.sinaimg.cn/large/7011d6cfjw1f3ba04okoqj20eq093wh1.jpg', + code_link: 'https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang', + title: '轮播图', + core_tech: 'JavaScript', + description: '变速运动，运动终止条件的应用。' + }, { + demo_link: 'http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_2.html', + img_link: 'http://ww4.sinaimg.cn/large/7011d6cfjw1f3b9w6xpz5j20ae02pgm3.jpg', + code_link: 'https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang', + title: '倒计时', + core_tech: 'JavaScript', + description: 'setInterval()，Date 对象的学习和使用。' + }, { + demo_link: 'http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/task0002_1.html', + img_link: 'http://ww3.sinaimg.cn/large/7011d6cfjw1f3b9tmyuh2j20au0aaaar.jpg', + code_link: 'https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang', + title: '处理兴趣爱好列表', + core_tech: 'JavaScript', + description: '对JavaScript正则表达式和字符串的练习。' + }, { + demo_link: 'http://gaohaoyang.github.io/ife/task/task0002/work/Gaohaoyang/index.html', + img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/demo-demo-index.png', + code_link: 'https://github.com/Gaohaoyang/ife/tree/master/task/task0002/work/Gaohaoyang', + title: '百度前端学院 task0002 展示主页', + core_tech: 'HTML CSS', + description: '任务二的展示主页，里面包含五个小 demo。还有一篇相关的日志。' + }, { + demo_link: 'http://gaohaoyang.github.io/ife/task/task0001/work/Gaohaoyang/index.html', + img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/Demo-blog-ife.jpg', + code_link: 'https://github.com/Gaohaoyang/ife/tree/master/task/task0001/work/Gaohaoyang', + title: '百度前端学院 task0001 个人博客', + core_tech: 'HTML CSS', + description: '完成百度前端学院的任务。深刻的理解了BFC、浮动、inline-block间距，多列布局等技术。还有一篇相关的日志。' + }, { + demo_link: 'http://gaohaoyang.github.io/ghost-button-css3/', + img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/DemoGhost-Button.png', + code_link: 'https://github.com/Gaohaoyang/ghost-button-css3', + title: 'Ghost Button 幽灵按钮', + core_tech: 'CSS3', + description: '使用 CSS3 中的旋转、缩放、过渡、动画等效果，制作出很酷的按钮效果。' + }, { + demo_link: 'http://gaohaoyang.github.io/shadow-demo-css3', + img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/Demoshadow.png', + code_link: 'https://github.com/Gaohaoyang/shadow-demo-css3', + title: 'CSS3 阴影特效', + core_tech: 'CSS3', + description: 'CSS3 中的阴影、旋转等效果，制作出曲边阴影和翘边阴影。' + }, { + demo_link: 'http://gaohaoyang.github.io/learning-AngularJS/2-3-bookstore-add-sth-by-myself/', + img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/DemoAngularJS.png', + code_link: 'https://github.com/Gaohaoyang/learning-AngularJS/tree/master/2-3-bookstore-add-sth-by-myself', + title: 'AngularJS 结合动画效果', + core_tech: 'AngularJS CSS3', + description: '使用 AngularJS 中的 ngAnimate 加 CSS3里面的一些旋转效果，做出页面切换的效果。' + }, { + demo_link: 'http://gaohaoyang.github.io/learning-AngularJS/2-4-UiRouterPractice', + img_link: 'http://ww2.sinaimg.cn/large/7011d6cfjw1f3b8zumfqij20q40nh76x.jpg', + code_link: 'https://github.com/Gaohaoyang/learning-AngularJS/tree/master/2-4-UiRouterPractice', + title: 'AngularJS UI-router 练习', + core_tech: 'AngularJS UI-router', + description: 'UI-router 作为 AngularJS 中路由的扩充，实现了多级路由的效果。使得前端界面跳转更加方便。' + }, { + demo_link: 'http://gaohaoyang.github.io/test/bootstrap-zhihu/', + img_link: 'http://7q5cdt.com1.z0.glb.clouddn.com/teach-girlfriend-html-CopyZhihu.jpg', + code_link: 'https://github.com/Gaohaoyang/test/tree/master/bootstrap-zhihu', + title: '仿知乎页面', + core_tech: 'HTML BootStrap', + description: '使用BootStrap仿照知乎做了一个静态页面。' + } + ]; - contentInit(demoContent) //内容初始化 - waitImgsLoad() //等待图片加载，并执行布局初始化 + contentInit(demoContent) //内容初始化 + waitImgsLoad() //等待图片加载，并执行布局初始化 }()); - - /** * 内容初始化 * @return {[type]} [description] */ function contentInit(content) { - // var htmlArr = []; - // for (var i = 0; i < content.length; i++) { - // htmlArr.push('
        ') - // htmlArr.push('') - // htmlArr.push('') - // htmlArr.push('') - // htmlArr.push('

        ') - // htmlArr.push(''+content[i].title+'') - // htmlArr.push('

        ') - // htmlArr.push('

        主要技术：'+content[i].core_tech+'

        ') - // htmlArr.push('

        '+content[i].description) - // htmlArr.push('源代码 ') - // htmlArr.push('

        ') - // htmlArr.push('
        ') - // } - // var htmlStr = htmlArr.join('') - var htmlStr = '' - for (var i = 0; i < content.length; i++) { - htmlStr += - '
        ' + - ' ' + - ' ' + - ' ' + - '

        ' + - ' ' + content[i].title + '' + - '

        ' + - '

        主要技术：' + content[i].core_tech + '

        ' + - '

        ' + content[i].description + - ' 源代码 ' + - '

        ' + - '
        ' - } - var grid = document.querySelector('.grid') - grid.insertAdjacentHTML('afterbegin', htmlStr) + // var htmlArr = []; + // for (var i = 0; i < content.length; i++) { + // htmlArr.push('
        ') + // htmlArr.push('') + // htmlArr.push('') + // htmlArr.push('') + // htmlArr.push('

        ') + // htmlArr.push(''+content[i].title+'') + // htmlArr.push('

        ') + // htmlArr.push('

        主要技术：'+content[i].core_tech+'

        ') + // htmlArr.push('

        '+content[i].description) + // htmlArr.push('源代码 ') + // htmlArr.push('

        ') + // htmlArr.push('
        ') + // } + // var htmlStr = htmlArr.join('') + var htmlStr = '' + for (var i = 0; i < content.length; i++) { + htmlStr += '
        ' + ' ' + ' ' + ' ' + '

        ' + ' ' + content[i].title + '' + '

        ' + '

        主要技术：' + content[i].core_tech + '

        ' + '

        ' + content[i].description + ' 源代码 ' + '

        ' + '
        ' + } + var grid = document.querySelector('.grid') + grid.insertAdjacentHTML('afterbegin', htmlStr) } /** @@ -186,30 +173,30 @@ function contentInit(content) { * @return {[type]} [description] */ function waitImgsLoad() { - var imgs = document.querySelectorAll('.grid img') - var totalImgs = imgs.length - var count = 0 - //console.log(imgs) - for (var i = 0; i < totalImgs; i++) { - if (imgs[i].complete) { - //console.log('complete'); - count++ - } else { - imgs[i].onload = function() { - // alert('onload') - count++ - //console.log('onload' + count) - if (count == totalImgs) { - //console.log('onload---bbbbbbbb') - initGrid() - } - } + var imgs = document.querySelectorAll('.grid img') + var totalImgs = imgs.length + var count = 0 + //console.log(imgs) + for (var i = 0; i < totalImgs; i++) { + if (imgs[i].complete) { + //console.log('complete'); + count++ + } else { + imgs[i].onload = function() { + // alert('onload') + count++ + //console.log('onload' + count) + if (count == totalImgs) { + //console.log('onload---bbbbbbbb') + initGrid() } + } } - if (count == totalImgs) { - //console.log('---bbbbbbbb') - initGrid() - } + } + if (count == totalImgs) { + //console.log('---bbbbbbbb') + initGrid() + } } /** @@ -217,11 +204,11 @@ function waitImgsLoad() { * @return {[type]} [description] */ function initGrid() { - var msnry = new Masonry('.grid', { - // options - itemSelector: '.grid-item', - columnWidth: 250, - isFitWidth: true, - gutter: 20, - }) + var msnry = new Masonry('.grid', { + // options + itemSelector: '.grid-item', + columnWidth: 250, + isFitWidth: true, + gutter: 20 + }) } From 8834f1b15b39a33e8c603450aae0050c65e52423 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Tue, 11 Apr 2017 09:59:14 +0800 Subject: [PATCH 85/98] u --- README-zh-cn.md | 1 + README.md | 1 + 2 files changed, 2 insertions(+) diff --git a/README-zh-cn.md b/README-zh-cn.md index c597816..7ac8e97 100644 --- a/README-zh-cn.md +++ b/README-zh-cn.md @@ -323,6 +323,7 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 感谢捐赠的小伙伴！！！ +* 2017.04.11 收到 Wechat user ¥4.00 * 2017.04.01 收到 Elvin Zeng ¥6.66 * 2017.03.13 收到 微信用户 ¥6.66 * 2017.03.04 收到 史莱姆 ¥9.90 diff --git a/README.md b/README.md index 9fd2087..e9acb21 100644 --- a/README.md +++ b/README.md @@ -312,6 +312,7 @@ You can also donate me for a coffee, and I'll do better. Thanks. Thanks these friends!!! +* 2017.04.11 received Wechat user ¥4.00 * 2017.04.01 received Elvin Zeng ¥6.66 * 2017.03.13 received Wechat user ¥6.66 * 2017.03.04 received 史莱姆 ¥9.90 From ddcd01837f0d0c81439ec3ed6694991790a26cb6 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Thu, 13 Apr 2017 15:45:49 +0800 Subject: [PATCH 86/98] u --- README-zh-cn.md | 1 + README.md | 1 + 2 files changed, 2 insertions(+) diff --git a/README-zh-cn.md b/README-zh-cn.md index 7ac8e97..694a9e5 100644 --- a/README-zh-cn.md +++ b/README-zh-cn.md @@ -323,6 +323,7 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 感谢捐赠的小伙伴！！！ +* 2017.04.13 收到 Abraham Xiao ¥30.00 * 2017.04.11 收到 Wechat user ¥4.00 * 2017.04.01 收到 Elvin Zeng ¥6.66 * 2017.03.13 收到 微信用户 ¥6.66 diff --git a/README.md b/README.md index e9acb21..013f6c2 100644 --- a/README.md +++ b/README.md @@ -312,6 +312,7 @@ You can also donate me for a coffee, and I'll do better. Thanks. Thanks these friends!!! +* 2017.04.11 received Abraham Xiao ¥30.00 * 2017.04.11 received Wechat user ¥4.00 * 2017.04.01 received Elvin Zeng ¥6.66 * 2017.03.13 received Wechat user ¥6.66 From dfdf80547cbc23983913ecbf6075aca136f50be1 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Thu, 13 Apr 2017 15:50:49 +0800 Subject: [PATCH 87/98] u --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 013f6c2..c22ffca 100644 --- a/README.md +++ b/README.md @@ -312,7 +312,7 @@ You can also donate me for a coffee, and I'll do better. Thanks. Thanks these friends!!! -* 2017.04.11 received Abraham Xiao ¥30.00 +* 2017.04.13 received Abraham Xiao ¥30.00 * 2017.04.11 received Wechat user ¥4.00 * 2017.04.01 received Elvin Zeng ¥6.66 * 2017.03.13 received Wechat user ¥6.66 From 71bb6682555ae2271549a169ed151cba7def355a Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Wed, 3 May 2017 14:13:43 +0800 Subject: [PATCH 88/98] u --- README-zh-cn.md | 1 + README.md | 1 + 2 files changed, 2 insertions(+) diff --git a/README-zh-cn.md b/README-zh-cn.md index 694a9e5..9633c81 100644 --- a/README-zh-cn.md +++ b/README-zh-cn.md @@ -323,6 +323,7 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 感谢捐赠的小伙伴！！！ +* 2017.05.03 收到 希成 ¥6.66 * 2017.04.13 收到 Abraham Xiao ¥30.00 * 2017.04.11 收到 Wechat user ¥4.00 * 2017.04.01 收到 Elvin Zeng ¥6.66 diff --git a/README.md b/README.md index c22ffca..d2400f8 100644 --- a/README.md +++ b/README.md @@ -312,6 +312,7 @@ You can also donate me for a coffee, and I'll do better. Thanks. Thanks these friends!!! +* 2017.05.03 received 希成 ¥6.66 * 2017.04.13 received Abraham Xiao ¥30.00 * 2017.04.11 received Wechat user ¥4.00 * 2017.04.01 received Elvin Zeng ¥6.66 From 7871312ef00f7364d33b4bd821590c5a916cc9c8 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Sat, 6 May 2017 09:26:21 +0800 Subject: [PATCH 89/98] fix #65 #64 --- _sass/_page.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/_page.scss b/_sass/_page.scss index b9651ec..b1d8a88 100644 --- a/_sass/_page.scss +++ b/_sass/_page.scss @@ -110,7 +110,7 @@ -ms-word-break: break-all; word-break: break-all; /* Non standard for webkit */ - word-break: break-word; + // word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; From 71fe7348292137906c45dfaaa520e645e967d8d3 Mon Sep 17 00:00:00 2001 From: TangMingliang95 Date: Sun, 7 May 2017 11:35:11 +0800 Subject: [PATCH 90/98] similar posts and cdn of mathjax --- _includes/head.html | 2 +- _layouts/post.html | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/_includes/head.html b/_includes/head.html index c82f0ee..4bc58d5 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -50,7 +50,7 @@ }); {% endif %} diff --git a/_layouts/post.html b/_layouts/post.html index e633a80..ff4e893 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -79,7 +79,9 @@

        Comments

        Content
    From 3073721fb0eabc69c9052b46f792cc9a75a4c49a Mon Sep 17 00:00:00 2001 From: kaustubhhiware Date: Mon, 15 May 2017 02:31:09 +0530 Subject: [PATCH 91/98] Fix some redirect urls --- _layouts/post.html | 2 +- index.html | 6 +++--- page/1category.html | 2 +- page/2tags.html | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/_layouts/post.html b/_layouts/post.html index ff4e893..a8ea8f6 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -46,7 +46,7 @@

    Similar Posts

      {% endif %}
    • - {{ post.title }} + {{ post.title }} {% if post.series %} (Series: {{ post.series }}) {% endif %} diff --git a/index.html b/index.html index 568a54a..71de2c7 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,7 @@

      diff --git a/page/1category.html b/page/1category.html index 554b2f1..e7df3f0 100644 --- a/page/1category.html +++ b/page/1category.html @@ -21,7 +21,7 @@

      {{category | first}}

      - {{ post.title }} + {{ post.title }} {% include category.html %} {% include tag.html %} diff --git a/page/2tags.html b/page/2tags.html index 1cbf889..4eea93d 100644 --- a/page/2tags.html +++ b/page/2tags.html @@ -25,7 +25,7 @@

      {{ tag }}

      - {{ post.title }} + {{ post.title }} {% include category.html %} {% include tag.html %} From 1e0ad565d941e54469f9cc916bcc65dbae7a2d25 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Sat, 20 May 2017 21:37:27 +0800 Subject: [PATCH 92/98] u --- README-zh-cn.md | 3 +++ README.md | 3 +++ 2 files changed, 6 insertions(+) diff --git a/README-zh-cn.md b/README-zh-cn.md index 9633c81..d9e6766 100644 --- a/README-zh-cn.md +++ b/README-zh-cn.md @@ -323,7 +323,10 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 感谢捐赠的小伙伴！！！ +* 2017.05.19 收到 风之筝 ¥6.66 +* 2017.05.16 收到 张驰 ¥6.00 * 2017.05.03 收到 希成 ¥6.66 +* 2017.04.24 收到 deezer ¥10.00 * 2017.04.13 收到 Abraham Xiao ¥30.00 * 2017.04.11 收到 Wechat user ¥4.00 * 2017.04.01 收到 Elvin Zeng ¥6.66 diff --git a/README.md b/README.md index d2400f8..0162cc3 100644 --- a/README.md +++ b/README.md @@ -312,7 +312,10 @@ You can also donate me for a coffee, and I'll do better. Thanks. Thanks these friends!!! +* 2017.05.19 received 风之筝 ¥6.66 +* 2017.05.16 received 张驰 ¥6.00 * 2017.05.03 received 希成 ¥6.66 +* 2017.04.24 received deezer ¥10.00 * 2017.04.13 received Abraham Xiao ¥30.00 * 2017.04.11 received Wechat user ¥4.00 * 2017.04.01 received Elvin Zeng ¥6.66 From 92243fe732e8bb05a258aa3b979ccb8da41819f8 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Thu, 15 Jun 2017 23:13:42 +0800 Subject: [PATCH 93/98] u --- README-zh-cn.md | 3 ++- README.md | 3 ++- page/4about.md | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/README-zh-cn.md b/README-zh-cn.md index d9e6766..a6cb278 100644 --- a/README-zh-cn.md +++ b/README-zh-cn.md @@ -323,12 +323,13 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 感谢捐赠的小伙伴！！！ +* 2017.05.25 收到 微信用户 ¥1.00 * 2017.05.19 收到 风之筝 ¥6.66 * 2017.05.16 收到 张驰 ¥6.00 * 2017.05.03 收到 希成 ¥6.66 * 2017.04.24 收到 deezer ¥10.00 * 2017.04.13 收到 Abraham Xiao ¥30.00 -* 2017.04.11 收到 Wechat user ¥4.00 +* 2017.04.11 收到 微信用户 ¥4.00 * 2017.04.01 收到 Elvin Zeng ¥6.66 * 2017.03.13 收到 微信用户 ¥6.66 * 2017.03.04 收到 史莱姆 ¥9.90 diff --git a/README.md b/README.md index 0162cc3..3bb3b28 100644 --- a/README.md +++ b/README.md @@ -104,7 +104,7 @@ The post contents is fixed at the right side while page is scrolling. There will ### Code Highlight -While the jekyll is update to 3.x.x, you can use github flavored markdown to write code. +While the jekyll is update to 3.x.x, you can use github flavored markdown to write code. More info to see [syntax-highlighter-changed](https://jekyllrb.com/docs/upgrading/2-to-3/#syntax-highlighter-changed). @@ -312,6 +312,7 @@ You can also donate me for a coffee, and I'll do better. Thanks. Thanks these friends!!! +* 2017.05.25 received Wechat user ¥1.00 * 2017.05.19 received 风之筝 ¥6.66 * 2017.05.16 received 张驰 ¥6.00 * 2017.05.03 received 希成 ¥6.66 diff --git a/page/4about.md b/page/4about.md index 0d9b6c0..5b4c380 100644 --- a/page/4about.md +++ b/page/4about.md @@ -94,7 +94,7 @@ type: page ## 友情链接 -[羡辙杂俎](http://zhangwenli.com/blog) \| [Anotherhome](https://www.anotherhome.net) \| [Reverland](http://reverland.org/) \| [ZhiLi](http://lizhipower.github.io/) \| [Simmer](http://simmer-jun.github.io/) \| [awthink](http://awthink.net/) \| [Aralic](http://aralic.github.io/) \| [zchen9](http://www.chen9.info/) \| [wuhuaji](http://wuhuaji.me/) \| [lisheng](http://www.lishengcn.cn/) \| [薛彬XueBin](http://axuebin.com/blog/) \| [TBOOX](http://www.tboox.org/cn/) +[羡辙杂俎](http://zhangwenli.com/blog) \| [Anotherhome](https://www.anotherhome.net) \| [Reverland](http://reverland.org/) \| [ZhiLi](http://lizhipower.github.io/) \| [Simmer](http://simmer-jun.github.io/) \| [awthink](http://awthink.net/) \| [Aralic](http://aralic.github.io/) \| [zchen9](http://www.chen9.info/) \| [wuhuaji](http://wuhuaji.me/) \| [lisheng](http://www.lishengcn.cn/) \| [薛彬XueBin](http://axuebin.com/blog/) \| [TBOOX](http://www.tboox.org/cn/) \| [Ling](http://linglinyp.com/) ## Comments From 73eff0f733ce0f074a3c4a1daa0a03c0bdbb21b4 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Tue, 11 Jul 2017 19:47:42 +0800 Subject: [PATCH 94/98] update donate --- README-zh-cn.md | 3 +++ README.md | 3 +++ 2 files changed, 6 insertions(+) diff --git a/README-zh-cn.md b/README-zh-cn.md index a6cb278..dc90a5b 100644 --- a/README-zh-cn.md +++ b/README-zh-cn.md @@ -323,6 +323,9 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml 感谢捐赠的小伙伴！！！ +* 2017.07.02 收到 微信用户 ¥9.99 +* 2017.06.20 收到 微信用户 ¥2.22 +* 2017.06.19 收到 微信用户 ¥6.66 * 2017.05.25 收到 微信用户 ¥1.00 * 2017.05.19 收到 风之筝 ¥6.66 * 2017.05.16 收到 张驰 ¥6.00 diff --git a/README.md b/README.md index 3bb3b28..bf8fe50 100644 --- a/README.md +++ b/README.md @@ -312,6 +312,9 @@ You can also donate me for a coffee, and I'll do better. Thanks. Thanks these friends!!! +* 2017.07.02 received Wechat user ¥9.99 +* 2017.06.20 received Wechat user ¥2.22 +* 2017.06.19 received Wechat user ¥6.66 * 2017.05.25 received Wechat user ¥1.00 * 2017.05.19 received 风之筝 ¥6.66 * 2017.05.16 received 张驰 ¥6.00 From df7c5a76cbdc39a3190de5317fff79b1e693f809 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Tue, 29 May 2018 19:36:36 +0800 Subject: [PATCH 95/98] change bg pic domain --- _sass/_reset.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/_reset.scss b/_sass/_reset.scss index b044b28..1579966 100644 --- a/_sass/_reset.scss +++ b/_sass/_reset.scss @@ -29,7 +29,7 @@ html { body { font-family: 'Helvetica Neue',Helvetica,Arial,'Microsoft YaHei',sans-serif; color: #333; - background-image: url(https://ooo.0o0.ooo/2016/06/20/5768c606cf9cb.jpg); + background-image: url(https://gw.alicdn.com/tfs/TB1xzbUumBYBeNjy0FeXXbnmFXa-125-121.png); position: relative; min-height: 100%; padding-bottom: 190px; From e4bc128abe515eb2b51343f8120b2a0460f0f065 Mon Sep 17 00:00:00 2001 From: "chuan shi(haoyang gao)" Date: Sat, 2 Jun 2018 23:51:16 +0800 Subject: [PATCH 96/98] p --- _posts/2018-06-01-animation.md | 142 +++++++++++++++++++++++++++++++++ _sass/_reset.scss | 2 +- 2 files changed, 143 insertions(+), 1 deletion(-) create mode 100644 _posts/2018-06-01-animation.md diff --git a/_posts/2018-06-01-animation.md b/_posts/2018-06-01-animation.md new file mode 100644 index 0000000..c742e4f --- /dev/null +++ b/_posts/2018-06-01-animation.md @@ -0,0 +1,142 @@ +--- +layout: post +title: "提升用户体验的前端动画" +categories: JavaScript +tags: 动画 手势 +author: HyG +--- + +* content +{:toc} + +与其他开发人员不同的是，前端开发都是在端上游走舞者，直接与用户交流沟通，这就需要前端开发具有更敏锐的交互体验思考，或者能更精准地理解设计师们意图，将最佳的用户体验带给用户。优质的交互体验对于用户来说学习成本应该是极低的，都是非常自然的操作，却可以让用户感到畅快愉悦，甚至惊喜。本文将通过一个看似简单的 poplayer 来分析我在这其中通过思考做的体验优化，获得类似 native 的体验感。 + +![](https://ws1.sinaimg.cn/large/7011d6cfgy1frx9jv0kpfj208w0fracu.jpg) + + + + +> 关于 poplayer 是什么，详见 [POPLAYER起来HIGH~~](https://github.com/amfe/article/issues/18) + +简单的说下需求，这个弹层希望可以像 native 在商品详情页的弹层一样，从下向上滑出，点击遮罩或按钮时关闭。为了给用户带来更好的体验，我在这个基础上又增加了一些手势和过渡的动画效果，如下图。下面简单的拆分一下动画细节： + +- 页面载入，卡片向上滑入 +- 增加 pan 的手势，卡片跟随手指滑动 +- 随着手指滑动，增加遮罩透明度与卡片阴影变化 +- 增加向上和向下的边界条件的处理 + +## 动画与手势的运用 + +这些动画利用 CSS 3 的一些属性再加上手势操作即可完成，这里手势操作我选择了老牌的 [HammerJS](https://hammerjs.github.io/)。 + +点击超级会员专享，折上95折 banner，卡片向上滑入 + + + +这里直接使用 `transition` 控制过渡。发生样式变化的有 3 个地方： + +- 卡片位置，使用 `transform: translateY` 控制纵向位置 +- 遮罩透明度，随着卡片上滑，背景遮罩由透明变为半透明 +- 卡片的阴影，注意仔细观察，随着卡片的上滑，为了凸显出弹层是悬浮在底层的视觉效果，其阴影的 `blur`,`spread`,`color` 也跟随变重 + +下面再加入 pan 手势，即拖拽或平移，这里我们使用这个手势实现弹层的拖拽和相关动画。手指不离开屏幕进行滑动操作，如下图： + + + +我们把最外层容器节点作为参数，实例化 hammer 对象，默认 pan 手势只有横向操作，这里设置为所有方向。在监听 pandown panup 时，根据手指移动的差值控制卡片位置、背景遮罩透明度、卡片阴影的样式。代码如下： + +```js +const hammer = new Hammer(containerEl) +hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL }) +hammer.on('pandown panup', panDownUp) + +const panDownUp = (ev) => { + const opacity = 0.7 - ev.deltaY / 1024 + coverEle.style.opacity = opacity + + const boxShadowBlur = 12 - ev.deltaY / 46 + const boxShadowSpread = 3 - ev.deltaY / 180 + const boxShadowColorAlpha = '' + popWrapEle.style.boxShadow = `0 0 ${boxShadowBlur}px ${boxShadowSpread}px rgba(0,0,0,${opacity})` + + const scrollY = ev.deltaY * 1.2 + popWrapEle.style.transform = `translateY(${scrollY}px)` +} +``` + +对于各个样式属性的值，通过乘系数等方式得到需要的值。 + +这里要注意，pan 的操作中是不需要原有的 transition 过渡的，因为滑动操作时，希望让动画非常跟手，而 transition 是一个消耗时间的过渡，而且多次触发 transition 也会导致性能问题，我们要在 panstart 将其移除，panend 再加回来，添加如下代码： + +```js +hammer.on('panstart', () => { + popWrapEle.classList.remove('pop-wrap-transition') + coverEle.classList.remove('cover-transition') +}) +hammer.on('panend', (ev) => { + popWrapEle.classList.add('pop-wrap-transition') + coverEle.classList.add('cover-transition') +}) +``` + +## 向下滑出的处理 + +用户在向下滑动松手时的距离，如果大于某个值，让卡片滑出，关闭 poplayer，小于某个值，则回弹到原位。 + +这比较符合用户体验、防止误关闭，同时滑出的关闭方式也给了用户一种流畅感。经过本人多次测试，最终选择的下滑临界值为 180。效果如下图： + + + +在 panend 事件中加入这个逻辑判断 + +```js +hammer.on('panend', (ev) => { + if (ev.deltaY > 180) { + closePoplayer() + } else { + popWrapEle.style.transform = 'translateY(0)' + popWrapEle.style.boxShadow = '0 0 12px 3px rgba(0,0,0,.74)' + coverEle.style.opacity = '0.7' + } + // ... +}) +``` + +## 向上滑动的溢出感 + +这个卡片本身是无法再向上滑动的，但是如果用户想继续滑呢？为了让这个弹层增添一些活力，我在这个操作中让卡片微微膨胀，增添亲和力，仿佛用户想滑动它，但是它又存在着一股粘滞力无法大距离的移动，甚至满足了用户心中的小小控制欲。 + +效果如下： + + + +在向上滑动事件中加入如下代码： + +```js +const panDownUp = (ev) => { + if (ev.deltaY < 0) { + console.log(ev.deltaY) + const scrollUpY = ev.deltaY / 80 + const scaleX = -ev.deltaY / 20000 + 1 + popWrapEle.style.transform = `scale(${scaleX}) translateY(${scrollUpY}px)` + return + } + // ... +} +``` + +## 其他小坑 + +webkit 前缀。ios 8 下部分 CSS 3 属性需要添加 `-webkit-` 前缀。参考[flexbox布局的兼容性](http://www.ayqy.net/blog/flexbox%E5%B8%83%E5%B1%80%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7/)。 + +覆盖 status bar。iOS 11 起，需要在 meta 标签中添加 `viewport-fit=cover`，才能使得 webView 覆盖到顶部的 status bar，meta 标签最终可以写为： + +``` html + +``` + +## 总结 + +交互体验体现在各个细节之中，没有大而全的规则，但整体方向就是让用户在使用软件的时候感到更加的自然畅快。而动画只是交互体验中的一小部分。 + +我认为前端的本质，就是将最优质的用户体验带给用户，我也在为之不断努力，欢迎交流。 diff --git a/_sass/_reset.scss b/_sass/_reset.scss index 1579966..933d173 100644 --- a/_sass/_reset.scss +++ b/_sass/_reset.scss @@ -112,7 +112,7 @@ table { } } p { - margin: 0 0 10px; + margin: 0 0 14px; } img { max-width: 100%; From 3359377ea281fd66a6dd50e0ca3b962220b6aa99 Mon Sep 17 00:00:00 2001 From: haroldphp Date: Thu, 19 Jul 2018 09:55:18 +0800 Subject: [PATCH 97/98] Set theme jekyll-theme-cayman --- _config.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/_config.yml b/_config.yml index 365d819..f9ed8e0 100644 --- a/_config.yml +++ b/_config.yml @@ -58,3 +58,5 @@ excerpt_separator: "\n\n\n\n" # paginate gems: [jekyll-paginate] paginate: 6 + +theme: jekyll-theme-cayman \ No newline at end of file From 67c46ed6da93ac73c1fa56734013e4d86a642b59 Mon Sep 17 00:00:00 2001 From: haroldphp Date: Thu, 19 Jul 2018 09:56:29 +0800 Subject: [PATCH 98/98] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 71de2c7..36267b2 100644 --- a/index.html +++ b/index.html @@ -63,7 +63,7 @@

      {% endif %} - +