django+bootstrap+xadmin搭建个人博客

前言

    该怎么说呢，现在在运行的博客已经是我第三个版本了，感觉后面应该不会再有大的变化了。后续如果有新的更新，应该都是局部更新了，第三版修改的时候，我已经尽可能保留了接口或者通过数据库动态配置解决的。下面就让我介绍下我的博客是怎么搭建的吧。

博客前端

    其实我在搭建这个博客的时候，后端我还是不怎么怕的，因为我就是搞后台的，倒是前端，如何进行页面布局以及样式修改我不怎么擅长,这里我的博客前端框架用了最新的bootstrap4.0。

• 页面布局参考了一个worldpress博客主题，分上(header)中(main)下(footer)，中间再分左(section,article)右(aside)两栏,之所以这样涉及优化后更利于搜索引擎和文章架构的层次表现。同时由于bootstrap支持响应式布局，所以本博客在pc端、手机端以及ipad均兼容显示。

       pc端

平板端：

 

• 博客导航条就属于纯搬bootstrap的导航条示例，只不过我觉得菜单下拉菜单小三角不好看，最好自己改成鼠标悬浮弹出。

• bootstrap组件的话用到最多的就是按钮(文章标签)，表单(登陆和注册页面，列表组(最新文章和最热文章)，模态框（打赏功能），弹出框（按钮悬浮提示等），分页。总之通过这次自己手写页面，我对boostrap不怎么陌生了，能用到的组件都用了。

• 引用了不少js插件，美化站点，毕竟搭这个站点时感觉像自己的孩子一样，别人网站有的我也得有。没有的话只能自己硬着头皮捣鼓

    虽然写页面的过程中遇到了很多问题，不过只要善于百度这个工具还是能一点一点解决的。比方说有些动画原来css就可以实现，还用个锤子js控制，比方说博客登陆页面那个滚动提示信息，一开始我准备用js写，后来百度了下发现css就能实现，这才发现自己前端真够菜的啊,好像css学的好，页面要多花里胡哨就多花里胡哨。

博客后端

    博客后端是基于django2.2搭建的，后台是采用开源的xadmin。不得不说django在搭建轻量博客的确很方便，针对博客文章分类聚合、站点缓存以及站点地图，django都提供了很好的接口来过滤文章、缓存数据和生成站点地图。下面说一下实现的功能吧

• 博客文章搜索接口则是利用django-haystack来完成站点文章全局搜索功能的。同时支持文章搜索关键词高亮显示。

• 博客的评论并没有引入开源的第三方评论系统如valine和gittalk，主要是自己觉得博客评论这块挺重要，涉及到的技术难点挺多，也想挑战下自己，所以本博客评论系统是基于自己摸索搭建出来的，支持评论回复邮件通知。可能会存在某些目前还未测试出来的bug。还请大家见谅。

• 站点注册的话目前博客只支持qq邮箱注册（其实这也是为了避免站点托管过多的头像图片,直接获取qq头像地址），不过本博客已经针对qq头像地址进行了加密处理，不会暴漏大家的邮箱。后续可能会加入第三方登陆。

• 博客集成了celery异步任务框架，通过异步发送邮件，这大大的降低了用户等待页面响应完毕的时间。

• 而且由于博主喜欢看书和看电影，博主实现通过celery的定时任务来定时执行scrapy+scrapyd对我的豆瓣个人影单以及书单进行增量爬取。中间为了实现这个功能，废了不少脑细胞，也走了不少弯路。同时基于django-celery-beat和django-celery-results实现后台部署计划任务以及查看任务执行结果。

 

• 博客后台也就是xadmin同时集成了markdown编辑器和富文本编辑器ueditor。markdown主要用来记录自己的编程学习笔记。富文本编辑器主要用来写一些影评或者书评乃至个人随笔。针对ueditor添加了秀米编辑器，虽然秀米编辑器是用来写微信文章，但是有些样式挺不错的，所以也就集成了。

• 博客针对文章实现了三种加密方式：①全文加密；②部分内容加密；③部分内容需要登陆及任意评论站点一条

• 博客解决了markdown和ueditor代码样式美化的问题，支持文章设置多种代码风格。

• 博客基于redis搭配django自带缓存接口，实现部分数据开启缓存

    总至还有一些细节问题就不一一赘述了，都是一点点敲出来的。

博客部署

    本博客通过nginx+uwsgi+redis完成站点部署，同时利用了supervisor来管理uwsgi、redis、celery、scrapyd等进程；这里极力推荐supervisor，太方便了，对每个进程可控实在是让人喜欢，尤其是站点需要更新功能的时候。

欢迎大家访问我的博客站点未雨晴空博客