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

歡迎繼續關注我的博客