前几天，即使工作很忙，也从鲁迅的海绵里挤出了点水，来给自己的博客小小的改造了一番。样式上没什么大的改动，主要的改动是集中在以下几点：
1. 评论系统前端部分的改造
目前是去掉了每篇文章里的分页设置，毕竟，文章也没什么人评论，还要费劲设置个分页，没什么必要，也就给去掉了。
同时，对评论功能进行了组件化的开发，方便以后的开发和维护，按照功能拆分出了几个单独的组件： 发布组件、列表组件、按钮组件、Toast 提示组件、弹窗组件等等。以前没有拆分开的时候，这些功能全部都耦合在一起，有需要改动的时候，特别不方便；现在假如还有什么改动时，就方便多了。
再一个就是样式上的调整，把发表的时间和回复按钮放在了左侧。虽然评论列表里的右侧显得稍微有点空，不过按照大众习惯靠左侧浏览的习惯，就把发表的时间与回复按钮与用户的昵称放在了一起。
2. 去掉了 jQuery 类库
在改造的过程中才发现，在每个页面里都引用的 jQuery 库，原来只是在文章页的侧边导航里用到了，其他的地方都没有用到。如果这么小的一个功能，还要每次都要加载 jQuery，那确实是太不值当了。因此这里就彻底用原生的 ES6 重写了侧边导航，顺带还搭建一个基于 webpack 的脚手架，关于这个脚手架的搭建和使用，我会后面的文章里详细描述（虽然已经有很多人搭建过了）。
3. demo 页面
博客最开始是用 jekyll 生成的静态博客，那时候的 demo 页面都是直接写静态页面，然后git push就能直接发表了。后来博客改造成基于 php 的动态博客后，托管在服务器上，如果要上传文件的话，是需要使用 ftp 的，那么直接上传 demo 页面就不方便了。
于是就在管理员后台添加了一个直接上传 markdown 代码和 html 代码的管理页面，这样就实现了左侧代码、右侧功能的 demo 页面。
可以点击后面的链接查看下效果，不过样式确实有点辣眼睛： 测试 demo。
4. 文章页里图片大小的限制
之前插入在文章页里的图片，是只限制了图片的最大宽度不能超过文章页的宽度，高度并没有限制，那么如果有图片很高的话，就会占据很大的版面，图片很宽的话，就会压缩图片，导致无法看清图片上面的内容，于是这里就添加了一个点击图片放大的功能。
这里用到了一个小小的知识点： cursor。在 CSS3 里，cursor 的值为zoom-in时，鼠标就会变成+号，表示放大的意思；cursor 的值为zoom-out时，鼠标就会变成-号，表示缩小的意思，然后我们再添加上相关的事件即可；不用再像以前那样还得先生成两张放大和缩小的.cur图片了。比如目前网页版微博，考虑到浏览器的兼容性，依然还用的 cur 图片。
点击图片查看下效果：
总结： 自从有这个博客后，真正有价值的文章没发表多少，净瞎折腾这个博客了[手动捂脸哭]。
