django练习——博客系统优化

        一直准备使用Django搭建一个个人网站，最近终于开始动手，上周已经完成了基本博客功能的搭建（http://blog.csdn.net/hcx25909/article/details/24601331），不过代码基本是copy的，还是很想掌握具体的实现过程。于是，这几天在之前的基础上继续优化博客的功能和界面，将别人代码中比较好的部分移植到自己的博客当中。主要参考的个人博客系统是：http://hansonsblog.sinaapp.com/，源代码在github上可以下到，在此向Hanson致敬，如有雷同，纯属是我抄袭。

        代码托管github地址：https://github.com/huchunxu/dblog

一、概述

        之前实现的功能比较简单，界面也不是很美观，如下图所示，其中还有很多问题。

        在此基础上进行了很多优化：

（1）使用bootstrap对界面进一步美化，添加了背景图片，调整了整体布局

（2）评论使用了第三方多说评论系统插件，方便其他社交账号的集成

（3）修改博客的数据库位mysql

（4）删除前端添加博客的功能，只能通过后台站点管理添加博客

（5）首页博客内容缩略显示，添加翻页功能

（6）添加博客分类，回到顶部按键，调整侧边栏的显示

        先来上一张整体图片:

       主要使用的软件和插件版本

（1） Pycharm版本：3.1.2

（2） Django版本：1.4.10

（3） Python版本：2.7.6

（4） Bootstrap：3.0.1

（5） 多说：0.1

二、Bootstrap

        Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap是基于jQuery框架开发的，它在jQuery框架的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。具体的使用方法和案例在Bootstrap中文网（http://www.bootcss.com/）都有非常详细的说明。

        作为初学者，可以参考宁浩网站的视频教程《HTML5 与 Bootstrap 应用实例》（http://ninghao.net/video/665），部分内容是收费的，可以直接百度找到别人分享的资源，看完之后可以基本了解Bootstrap和CSS的使用方法。

三、多说评论

        一开始使用的是Django自带的评论系统，但是配置的比较麻烦，而且界面不是很好看，不方便集成其他的社交账号。从Hanson那里看到了多说，立刻觉得很高大上的感觉，尝试用起来。集成的方法很简单，可以参考多说的官方说明：http://dev.duoshuo.com/python-sdk，需要注意的是， 在settings中要设置宏如下：       

        如果没有在多说的官网上配置站点，这里就用默认的五个‘x’，否则会出错。

四、mysql

        数据库使用的底层接口django都已经为我们提供了，所以我们只需要配置好就可以。

        mysql的配置方法可以参考《Django使用MySQL数据库》（http://blog.csdn.net/hawk0930/article/details/10070513）。

        需要注意的是，在使用数据库之前需要先创建数据库文件，数据库文件的默认存储位置是在/var/lib/mysql目录下。

五、博客功能

1、博客列表内容缩略

         在首页的博客列表中，我们不需要每篇博客都显示全部内容，否则会导致首页过长。显示内容略缩略的方法很简单，在显示内容的部分加上truncatechars描述就可以，例如：

         这样，每篇博客只显示200个字符，后面的内容会以“...”的方式提示省略，可以点击阅读全文进入查看。

2、回到顶部功能

         这个功能时使用了一个小的js程序实现：

         对应的css样式：

        这样，在博客列表的低端，就出现一个回到顶部的图标，鼠标悬停会反色，点击回到顶端。

3、翻页

        翻页使用的是django自带的Paginator插件，参考下面两篇博客：

      （1）使用 Paginator 实现分页功能：http://mozillazg.com/2013/01/django-pagination-by-use-paginator.html

     （2）django智能分页函数：http://www.jovesky.com/post/214/django-pagination-11/

        在html中的代码：

         views.py中的代码：

 

----------------------------------------------------------------

欢迎大家转载我的文章。

转载请注明：转自古-月

http://blog.csdn.net/hcx25909

欢迎继续关注我的博客