博客,就是一个折腾

蚊子前端博客
发布于 2018-11-19 00:23
前几天,即使工作很忙,也从鲁迅的海绵里挤出了点水,来给自己的博客小小的改造了一番

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

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

点击图片查看下效果:

博客,就是一个折腾 -蚊子的前端博客

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

标签:
阅读(579) 评论(7)

公众号:

qrcode

微信公众号:前端小茶馆