前几天，即使工作很忙，也从鲁迅的海绵里挤出了点水，来给自己的博客小小的改造了一番。样式上没什么大的改动，主要的改动是集中在以下几点：

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 图片。

点击图片查看下效果：

总结： 自从有这个博客后，真正有价值的文章没发表多少，净瞎折腾这个博客了[手动捂脸哭]。