第一篇博客

这是改版后的博客,暂且称为wenyuanblog_v2.0吧。回顾下1.0版本的个人博客。

技术组成

前端组件:bootstrap,bootstrap-table,layer,CKEditor,一些charts.js等
后端架构:Python,Django,MySQL
服务器:nginx,uwsgi,supervisor

效果概览

  • 博客首页

      左边是博客列表,右边是标签云和博客分类。搜索框可进行模糊搜索,本人比较屌丝,购买的是配置最差的那种服务器,所以未使用Lucene或Elasticsearch,而是直接对关系型数据库中的内容进行匹配查找。
    blog_index_page.png

  • 作品展示页

      贴了几个开源小项目,在我的GitHub上都能找到。
      这里可通过点击每个卡片上悬浮的按钮选择预览效果页或者复制GitHub地址。
    blog_show_page.png

  • 后台登录页面

      进入CMS(内容管理)系统的入口,这里我自己写了一套,没用Django自带的admin或者第三方xadmin。主要还是颜值,也喜欢自己折腾一下。
    blog_login_page.png

  • 后台首页

      和大部分CMS(内容管理)的主页一样,以图表形式展示一些概览信息。
    blog_cms_page.png

  • 新增文章页

      新增和编辑文章页,除了传统表单,还有缩略图上传和富文本编辑器功能。
      因为用的是bootstrap,原生组件对于缩略图上传后的页面回显功能,没有layUI和elementUI提供的那么好,所以自己定制了一下。
      富文本编辑器用的是CKEditor,用过UEditor,觉得还是CK颜值高一些,也比wangEditor出名些。
      Django生态圈似乎有人基于Django封装过富文本编辑器,可以直接以app的形式引入,不过我还是采用了原生的方式,自己实现下其实也不麻烦。
      最后存了两份信息,一份带html标签的用于页面显示,一份纯文本用于搜索。
    blog_add_page.png

  • 文章列表页

      对比jQuery DataTables,感觉wenzhixin封装的bootstrap-table颜值挺高的,也很好用(jQuery DataTables很强大,但毕竟难用,我以html单文件的形式整理过几个demo,点击查看)。
      不过最后发现首列的多选框很难看,参照GitHub上作者对某issue的回复,我做了修改,最后效果如下图。个人觉得现在好看多了。
    blog_list_page.png

综述

  第一版的博客花了点精力,主要是后端和CMS页面尽可能做成通用,这样以后好复制。顺便把用户注册和邮箱验证那一套也一起做了(虽然是个人博客,但先按多用户的模式起了个头)。
  然后我比较喜欢折腾,所以又搞了第二版。


  转载请注明: 文渊博客 第一篇博客