网站更新

更新

每次网站更新, 基本上都是脱胎换骨. 当然不变的是内容

从静态生成(hexo) => 动态网站(python) => 静态生成(hexo)

ps. 现在又换成了 hexo，也许是折腾的时间不多了吧

上一个博客网站是一个挂载在GitHub上的基于Hexo的静态网站，在服务器上也同步运行了一段时间，虽然上一次更新已经是2016-08-19，几乎大半年前了的样子。

当然主要是各种事情还是挺多的了，自己能够安排下来的完整时间越来越少，找不到想要写的东西也是一方面。还好难得在大学最后一个学期有相对较多的时间，于是用Rimworld作为奖励(虽然没有这个奖励网站也会很快完成的)，嗯，在完成网站升级之后就在steam上剁手，总结一下的话，更新 有以下部分

• 网站动态化
• 丰富动画效果
• 使用MVVC框架 VUE
• CSS样式自定义

网站开发大约经过了1个半月

网站动态化

原来的网站使用hexo在本地生成页面，然后用git同步到GitHub，然后服务器上再同步git，进而在hellflame.hellflame.net 以及 www.hellflame.net 就有需要的网站了，这其实并没有什么不好的

网站的动态化主要是为了给自己积累实践经验，比如接触有一段时间的Vue的前端框架，接触了比较久的Tornado，虽然用了很多，却都只停留在最基础的使用，想要找一个机会把以前看上去就很难的东西尝试一遍，比如pjax、animation、前端。看懂了和会用了基本上是两个概念，只有亲自动手才知道。。。。大多数的文档竟然这么难读懂

整个网站使用Vue作为前端框架，vue-router进行前端路由控制，{mode:histoy}让URL在变更的时候不会造成全局刷新，节约了在切换页面时带来的下载延时(虽然其实在服务器加速之后，TCP连接都已经很快了)，后端使用Tornado作为框架，成为网站的灵魂，Nginx进行反向代理，必要的时候可以利用负载均衡多开几个进程进行服务

当然网站整体的动态化可能带来的影响就是对于部分搜索引擎的不友好，因为他们还在那个用爬虫爬取页面数据的时代，我对于这部分搜索引擎的帮助仅仅在于将网站title和content description在直接访问时写进网站模版里，毕竟这只是自己的个人小站

动画

网站缺少了动画，总感觉变得低端了，，，所以也在新网站中加入了很多以前根本不会在意的动画，在Vue中调用组件以及切换页面的时候会比较注意渐变过程。

用CSS来控制的动画自然会比较简单，然而在页面数据加载完成之后的页面滚动效果却是用的js来实现的，一个模拟ease曲线的动画效果

但是发现页面在滚动的时候偶尔会出现卡顿的现象，可能是动画太多，也可能是监控事件太多的缘故，之后应该会做更多的测试

Vue

Vue 框架是从暑期实习开始使用的，那时候还是1.x版本，记得当时有人因为执行来npm update让整个项目都跑不起来的场景，现在在升级Vue的时候依然十分谨慎

之所以使用这个框架，也是因为当时接触这个框架的时候接触到的构建工具webpack。让我发现原来前端的代码其实也是可以很有条例，如此接近python的优雅，还可以在发布时将代码的压缩和优化都做好，完全颠覆了曾经看到的前端在页面中写着一个一个的function的场景，也让我发现了前端的强大。从那以后，自己起手的网站基本上都是Vue项目了，为了能让前端服务器和后端服务器同时起作用(因为对外的路由是由后端来完成的，dev模式下前端的js代码是动态生成的)，还特地为了前端服务器，在后端将部分链接进行重定向，最终让两者能够协同开发

样式自定义

不像以前的项目，大家都懒得去手写样式，然后都使用着别人已经写好的样式，比如bootstrap、UI-kit、Semantic-UI等。为了让页面加载的js文件尽量小，现在网站所有的样式基本上都是手写的，做到了尽量的小，不用为了等待几百k的样式数据让网页标签上的小圈圈不停的转了(虽然现在一个页面需要加载的js依然在100+k，但是pjax之后的页面所需js就只有10k不到的数据量了，再加上访问网站第一次的数据缓存，就基本上都没有问题了)

手写样式，，当然也是为了做一个更符合自己口味的网站，虽然这次开发让我发现了原来设计师的确不是随随便便就出来的。。。

由于是彻底的更新，所以以前的文章也就只能重新再发布一遍了=。=，具体发布时间就不想修改了

Bugs

六 7 29 09:00:48 CST 2017

不知道为什么，网站首页会在Retina MacBook Pro 中的chrome stable 和 Safari 里面表现出一定的动画卡顿 ，在升级Vue版本到现在的2.2.1之前，chrome的表现比safari更差一些。在 chrome canary 里面并没有观察到类似的现象，在独立安装的 windows 中，IE 和 chrome stable 也没有类似的现象发生，在parallel中安装的 windows 10 虚拟机中的 IE 中初始化动画存在卡顿，并且滚动过程会出现更乱的卡顿，出现背景图片震颤，在这个win10 中，chrome stable的表现和 rmbp 中问题表现差不多，只是更严重一点。

比较明显的问题其实出在网站背景图在视图中的时候(暂时忽略虚拟机中win10更糟糕的表现)，因为如果在自动上滚的动画结束之后，继续往下滚动的话，其实看不到什么卡顿，也就是说，这个问题的原因可能在于背景图片。

关于背景图片的话，除了使用了 background-size:cover 和 background:fixed 在移动端(无论ipad mini还是android 4.4) 会出现问题，另一个东西就是，背景图接下来的主体部分是用一个高度100%的空元素抵下去的。

• rmbp safari

• rmbp chrome stable

• 网站运行时状态记录