第一篇博客
这是改版后的博客,暂且称为wenyuanblog_v2.0吧。回顾下1.0版本的个人博客。
技术组成
前端组件:bootstrap,bootstrap-table,layer,CKEditor,一些charts.js等
后端架构:Python,Django,MySQL
服务器:nginx,uwsgi,supervisor
效果概览
博客首页
左边是博客列表,右边是标签云和博客分类。搜索框可进行模糊搜索,本人比较屌丝,购买的是配置最差的那种服务器,所以未使用Lucene或Elasticsearch,而是直接对关系型数据库中的内容进行匹配查找。
作品展示页
贴了几个开源小项目,在我的GitHub上都能找到。
这里可通过点击每个卡片上悬浮的按钮选择预览效果页或者复制GitHub地址。后台登录页面
进入CMS(内容管理)系统的入口,这里我自己写了一套,没用Django自带的admin或者第三方xadmin。主要还是颜值,也喜欢自己折腾一下。
后台首页
和大部分CMS(内容管理)的主页一样,以图表形式展示一些概览信息。
新增文章页
新增和编辑文章页,除了传统表单,还有缩略图上传和富文本编辑器功能。
因为用的是bootstrap,原生组件对于缩略图上传后的页面回显功能,没有layUI和elementUI提供的那么好,所以自己定制了一下。
富文本编辑器用的是CKEditor,用过UEditor,觉得还是CK颜值高一些,也比wangEditor出名些。
Django生态圈似乎有人基于Django封装过富文本编辑器,可以直接以app的形式引入,不过我还是采用了原生的方式,自己实现下其实也不麻烦。
最后存了两份信息,一份带html标签的用于页面显示,一份纯文本用于搜索。文章列表页
对比jQuery DataTables,感觉wenzhixin封装的bootstrap-table颜值挺高的,也很好用(jQuery DataTables很强大,但毕竟难用,我以html单文件的形式整理过几个demo,点击查看)。
不过最后发现首列的多选框很难看,参照GitHub上作者对某issue的回复,我做了修改,最后效果如下图。个人觉得现在好看多了。
综述
第一版的博客花了点精力,主要是后端和CMS页面尽可能做成通用,这样以后好复制。顺便把用户注册和邮箱验证那一套也一起做了(虽然是个人博客,但先按多用户的模式起了个头)。
然后我比较喜欢折腾,所以又搞了第二版。