网站维护日志
2014年11月22日 · 4769 字 · 阅读
2020-04-19
看了些前端性能优化相关的文章，于是就测试了下 blog.lc-soft.io 的性能，结果发现页面加载很慢，长时间卡在 main.css 的请求上，这个 main.css 有 139KB 大小，居然没经 gzip 压缩，记得之前看 nginx 配置里有 gzip on; 配置项的。在参考了相关文章后，给 nginx 配置加上了 gzip_types 配置项，顺便给 blog.lc-soft.io 开启了 http2 协议。
2019-11-15
参考 InfoQ 的页面风格对博客页面样式做了些调整。
2019-10-22
更新了网站：
- 移除无用 css
- 移除第三方 js 文件，改成从 CDN 引入
- 将 www 和 blog 的 bootstrap 升级至 4.x 版本
- 移除 bootstrap 的 css 资源，改成从 node_modules/bootstrap 中引入，然后由 sass 处理器编译
- 重构博客页面和样式，增加分类、归档和目录
- 将需要编译的 js 和 css 源码移入到 app 目录中
2019-08-29
更新了个人主页：
- 将 vue 从 1.0.26 升级至 2.6.10
- 将 webpack 从 1.13.1 升级至 4.39.2
- 移除 bootstrap.min.js
- 从 CDN 引入 vue
- 重构部分 scss 代码
- 格式化 user-events.vue 和 user-followers.vue 的代码
2017-12-25
文章的摘要效果不理想，如果标题与内容之间有空行，摘要内容就会到空行处截止，代码块、列表都不能显示在摘要里，需要想办法改进。
2017-04-30
之前多说发通知说将要关闭评论服务，嘛，懒得改用其它评论系统，反正大部分日志都是与项目相关的，访客的评论内容也都是项目相关的问题，那么就用项目 issues 列表作为文章评论列表，有什么问题可以直接提交 issue。
2017-04-09
新增了 LC’s Finder 项目主页，最近也对 LCUI 主页的内容做了些补充，这两个页面的内容及样式主要参考了 stripe.com、ionicframework.com 以及 atom.io。
2017-03-05
之前看到知乎个人主页改版后觉得那个“个人成就”板块不错，一直想在个人主页上添加类似板块，主要展示 GitHub 上的项目星星数、排名、issues 数、pr 数以及排名信息，刚好最近有了点时间就开始弄这个了。
查阅了 GitHub API 文档，issues 和 pr 数量可以靠它的 search 接口直接获取，至于排名信息则需要从其它网站去获取，找了些统计 GitHub 用户排名信息的网站，貌似都不提供能直接获取信息的接口，于是就用 python 写了个页面内容抓取脚本，然而页面源代码中除去基本的 div、a之类的基础元素以及布局 class 外，就没有什么其它辨识度高特征了，感觉这页面的语义化做好点的话抓起来也更方便些。
GitHub 接口响应时间比较长，不适合在前端用 javascript 调用，于是改用 python 脚本来获取。jekyll 支持从 _data 目录下的 YAML、JSON 和 CSV 文件载入数据，在页面中可以通过 site.data 访问它们，那么可以把 python 脚本取到的数据都存到 json 数据文件里，每次网站仓库有更新时执行一次脚本，就能更新数据。
这两个脚本分别是 github.py 和 awards.py，可以在这里找到：https://github.com/lc-soft/lc-soft.io/tree/master/api ，以下是主页上的数据展示效果，计划以后再添加代码量展示。
2016-11-05
更新了主页，设计参考自 Dribbble，效果如下图所示，展示的内容还很少，以后会考虑以合适的效果加入其它内容。接下来将重新调整博客页面。
已经将本站迁移到美国西雅图节点。日本节点的VPS访问很慢，请求个文件都要等很久，但 ssh 连接却没这么慢，有时响应还比较快。
2016-06-19
页面有很多图片的话载入会很慢，而国内CDN需要备案后才能用，备案又需要自己的网站托管在国内主机提供商的主机里，真麻烦。
2016-06-08
微软 Surface 产品页面里的这个效果蛮不错的，可以应用在 LCUI 的主页上，图文并茂效果更好些。旋转木马插件用的是 slick，后来发现微软的这个旋转木马效果也是用 slick 实现的。参考 slick 官方文档加了些配置，然后补充一些 CSS 样式，又截了几张用于展示的图片，下面这张图是现在的效果，没有采用和微软那个页面一样的全宽度的效果，因为感觉风格有些不一致。本打算在两边加上白色渐变效果的，这样可以弱化两边的分界线，但懒得再弄了，以后真的需要的话再继续弄。
2016-04-20
新建了个仓库，用来放自己写的 Github 相关 jQuery 插件，比如现在主页上用到的用户近期动态列表。之前在上一版本的主页里写了个仿 Github Contributions 的贡献日历，但这个日历的实现代码早就被我连同代码库删除了，现在觉得有些浪费，以后要用的话又要重写，真麻烦。
2016-04-15
在 Conoha 上的 VPS 居然无法访问，上管理页面查看后发现CPU和传送量莫名飙满，难不成是遭受DDOS攻击了？现在连新建个服务器也不行，看上去是整个账号都被 conoha 封掉了，还有 1000 多日元没用呢，算了，改用 vultr。
2016-03-02
宿舍的移动宽带总访问不了本网站，看上去墙得很厉害，连 Github 有时都无法访问，而手机的移动和联通网络却可以访问，已经改用 Conoha 的VPS。准备用 GitHub 的 webhook 来实现网站的自动更新，每当向网站的 GitHub 代码库推送提交，这边服务器就自动从 GitHub 同步代码库。
2016-01-31
添加了网站主页和博客页，之前的 LCUI 项目的主页已经转移至 lcui.c-soft.io 域名下。主页是蓝色调，LCUI主页是绿色调。之前写的开发日志整理起来很麻烦，需要按时间拆分成多个文档以方便控制日志的排列顺序，现在打算让正在更新的日志按时间递减排序，而已经更新完的日志则按时间递增排序。
2016-01-23
在 DigitalOcean 上弄了个VPS，5美元一个月还算便宜。apt-get 安装好 nginx，改改配置，网站的文件不用从本地上传，直接用git从github仓库里下载，弄完后把 lc-soft.io 这个域名绑定到VPS的IP上。还弄了个SSL证书，现在，网站已经支持以HTTPS方式访问了，地址栏带绿色 https 看起来蛮有B格的。多说评论框依赖的头像及相关资源不支持HTTPS访问，参考相关文档在VPS上做了反向代理后解决头像问题。
2016-01-20
在 gandi.net 上买了个 lc-soft.io 域名，才注意到可以用来做邮箱域名，以后可以用 leader@lc-soft.io、lc-soft@lc-soft.io、tech@lc-soft.io、boss@lc-soft.io 做邮箱地址。
2015-10-30
距离上次网站改动已经快1年了，卧槽，时间过得也太快了吧？现在准备修改首页，取消之前采用的<iframe>方式载入页面，日志改成用 markdown 语法写，日志的HTML页面交给 jekyll 生成，这样省的自己写HTML代码了。之前写的HTML版的日志，等以后有空再转成markdown版。
2014-12-12
像Google+、微博这样的网站，页面内容都是动态生成的，我还在用iframe实现无页面跳转的局部内容更新，与他们比起来稍显屌丝了。嘛，感觉他们的网页更像是应用程序，而不是普通页面。
2014-12-06
原来 compass 处理带中文字符的路径下的文件会出问题。在无中文字符的路径下创建了个软链接，这样就可以正常的使用compass watch了。
2014-11-30
每次测试时都会自动播放背景音乐，总是那么几首，播多了也会烦躁的，需要用到cookie，当浏览者手动暂停音乐播放时，在cookies中添加记录，以后再浏览时，就不会再自动播放背景音乐了，这种状态一直会持续到浏览者自己手动播放，或者cookie被清除。
文件的URL一直用相对路径有些麻烦，直接用绝对路径好些，但本地测试直接拖浏览器里打开的话，根目录不是网站的文件存放的目录，文件定位会出问题，最后决定装个Apache，配置一下就OK了。
css文件是用compass工具生成的，在windows上装了Ruby，然后用gem装了sass和compass，但compass总是有些小问题，蛋疼。
页面在<iframe>中显示的话，需要对页面中原本的链接进行调整，都改为 !#/url 形式，并绑定click事件，在链接被点击时做些处理，这主要针对要在当前页面打开链接的<a>元素。
网站在GitHub.com上有时访问速度慢，影响背景音乐的播放，还好在GitCafe.com也弄了个网站副本，毕竟服务器是在国内，访问速度比GitHub快点。
点击浏览器的后退按钮，<iframe>中的页面虽然返回到上个页面了，但#!/后面的内容没变化，这个需要做些处理。
2014-11-22
没事换换口味，想重做项目页面，以前整的页面有些马虎，毕竟那时对html、css、javascript比较生疏。
新首页得有内容，那就把项目动态搬上去，感觉GitHub上那个日历图不错，要模拟实现也不难，生成7行52列正方形，根据数据为各个正方形填充相应的颜色，而数据可以用GitHub给的API来获取，日历上的月份和周几还是用英文的好些，用一月、二月、周一、周二这样的字样感觉有些奇怪。GitHub的API只提供项目在近52周的活动情况，少了一周，在日历中不能看到去年的今天。
现在有个需求：能播放背景音乐，并且在在浏览其它页面时不会被终止，要实现这个功能就得让播放器所在页面不变，其它页面则在<iframe>中打开。音乐播放可以用audioJS实现，看它项目主页提供的示例页面的代码就知道大致怎么用了。
但有个问题，在F5刷新当前页面后，<iframe>中的网页会还原为首页，得需要一个记录，能够定位iframe中要打开的网页，直接修改 location.href 记录的地址的话，会导致当前页面被刷新。可以用 #，当链接是 #url 这样的格式时，虽然地址栏的内容变了，但当前页面不会刷新。
查找了相关内容，感觉用 #!/ 这样更好些，例如：www.test.com/#!/help.html，index.html在地址中可以省去。
功能实现上，用JavaScript只需要读取 #!/ 后面的路径，并在<iframe>中打开，顶部导航栏中的链接需要改成 /#!/url 形式。
为了让<iframe>的高度和它里面的页面一样，需要在每次页面切换时同步页面高度，用Chrome浏览器测试会有跨域问题，改用了FireFox浏览器，但在找不到页面、浏览文件列表时还是有跨域问题，因为这两个页面是浏览器内部提供的，没权限访问。
index.html 中已经显示了页首（顶部导航栏）和页尾，<iframe>中的页面不需要重复显示，需要让这些页面能够判断自己是否显示在<iframe>中。
考虑到有些人在使用搜索引擎时，会搜索到项目网站中的某个页面并直接访问，由于不是从主页中访问的，因此这些页面的页首和页尾需要显示，但背景音乐可不用支持页面切换无中断，因为直接访问这个页面的人很少会继续浏览其它页面，就算要访问其它页面，也会有概率先点导航栏链接。
考虑到浏览器兼容问题（IE9以下），为了保证页面具有一定可读性，有内容显示，需要改为静态模式，不使用<iframe>，这样就和浏览普通的网页一样，虽然背景音乐的存在感降低了。
文章版权归作者所有，未经许可不得转载。