一直准备使用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是
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’,否则会出错。
数据库使用的底层接口django都已经为我们提供了,所以我们只需要配置好就可以。
mysql的配置方法可以参考《 Django使用MySQL数据库 》( http://blog.csdn.net/hawk0930/article/details/10070513 )。
需要注意的是,在使用数据库之前需要先创建数据库文件,数据库文件的默认存储位置是在/var/lib/mysql目录下。
在首页的博客列表中,我们不需要每篇博客都显示全部内容,否则会导致首页过长。显示内容略缩略的方法很简单,在显示内容的部分加上truncatechars描述就可以,例如:
这样,每篇博客只显示200个字符,后面的内容会以“...”的方式提示省略,可以点击阅读全文进入查看。
这个功能时使用了一个小的js程序实现:
对应的css样式:
这样,在博客列表的低端,就出现一个回到顶部的图标,鼠标悬停会反色,点击回到顶端。
翻页使用的是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中的代码:
----------------------------------------------------------------
欢迎大家转载我的文章。
转载请注明:转自 古-月
欢迎继续关注我的博客