IvanKao的部落格

※已完成架構與部份功能，還有許多細節沒有處理

一、開發環境

• 本專案使用 Ubuntu Linux 進行開發
• Python 版本為 3.6.5

二、Django設置

1. 創建一個 virtualenv 名為 mysiteenv
2. startproject 一個名為 mysite 的 project
3. 並 startapp 叫作 blog 的 app
4. mkdir templates目錄與static目錄
5. 配置 setting 檔案： 

• 加入 blog 至 App
• 添加templates路徑、STATICFILES_DIRS路徑
• 修改時區、語系 

三、模板設置

1. 創建基礎模板
   • 在templates目錄下添加<base.html>
   • 初步區分幾個 block 為 title、content、script
2. 導入bootstrap
   1. 從 bootstrap官網下載3.3.7版本
   2. 在header處加入裝置與css資訊
   3. 在末端處添加 jquery 與 bootstrap 檔案
3. 測試頁面
   1. 創建<home.html>頁面繼承基礎模板
   2. 在<urls.py>添加<home.html>路徑
   3. 在<views.py>添加 home 初步方法
   4. 在終端機虛擬環境輸入命令 python manage.py runserver 測試頁面
4. 添加導覽列
5. 佈局導覽頁面

四、模型設置

1. 開啟blog應用的<models.py>
2. 導入用戶模組
3. pip3 安裝 django-ckeditor、pillow
4. 在<settings.py>的 APP 導入 'ckeditor_uploader' 、 'ckeditor'
5. 在<models.py>引入富文本套件、<settings.py>、<urls.py>設置圖片上傳與路徑
6. 建立 model，部落格分類與部落格內容
7. 添加 model 內容
8. 將模型註冊至 admin

五、模板頁面

1. 創建 <blog_list.html> 模板頁面
   1. 在 <views.py> 添加 blog_list 方法，將資料傳入前端
   2. 在 <urls.py> 添加 blog_list 路徑
2. 使用分類區塊化文章
   1. 在 blog 應用添加模板標籤 templatetags 並進行配置
   2. 在 blog_list 模板取得分類
   3. 使用[:5]來取得前五項
   4. 使用模板標籤進行第二層的文章標題迴圈
   5. 添加 bootstrap panel 排版
3. 創建<blog_type.html>分類頁面繼承 <blog_list.html>
   1. 創建新的{% block blog %} 來編寫文章列表
      • 迴圈顯示文章、並添加超連結
      • 將富文本編輯轉譯、格式化去除css、擷取為100字符
      • 添加 bootstrap jumbotron 排版
   2. 在 <urls.py> 添加 blog_type 路徑，並將 type_pk 傳入後端處理
   3. 在 <views.py> 添加 blog_type 方法，將篩選後的資料傳入前端
4. 創建<blog_detail.html>文章詳細頁面繼承 <base.html>
   1.  在 <urls.py> 添加 blog_detail 路徑，並將 blog_pk 傳入後端處理
   2. 在 <views.py> 添加 blog_detail 方法，將篩選後的資料傳入前端
5. 整合方法
   1. 建立 common_blog 方法
   2. 將各方法同樣的內容移至 common_blog 中 
   3. 在blog_list 與 blog_type 方法中的context 傳入 common_blog 方法
   4. 在common_blog方法中創建context字典並且存入共用函數
6. 添加右側文章分類與計數
   1. 導入計數器 from django.db.models import Count
   2. 在 commen_blog 方法的分類中使用annotate添加計數
   3. ​​​​​​​在前端頁面增加右側分類欄位與計數

六、用戶系統

1. 登錄功能
   1. 創建用戶應用、註冊app
   2. 應用目錄創建<forms.py>
   3. 撰寫登錄表單
   4. 設置url路徑
   5. 初步撰寫登入方法、登入模板
   6. 基礎模板導覽列添加登入判斷
   7. <forms.py>表單進行登錄驗證
   8. 完善後端方法
   9. 使用reverse將登錄後轉回前一頁面（需將<login.html>的action路徑移除） 
2. 登出功能
   1. 在用戶應用<views.py>添加登出方法
   2. 設置url路徑
   3. 在導覽列添加登出選項
3. 註冊功能
   1. 在用戶表單初步撰寫註冊表單
   2. 初步撰寫註冊方法
   3. 設置url路徑
   4. 註冊表單驗證
      • 密碼驗證，須將"clean_變數"與cleandata最後的變數對應
   5. 完善註冊方法
      1. 儲存密碼時使用密文儲存
   6. 撰寫註冊模板

七、評論系統

1. 創建 comment 應用
2. 在 <settings.py> 註冊 APP
3. 創建應用模型
   1. 使用通用模型 ContentType
   2. 透過外鍵指向模型
   3. 紀錄對應模型的主鍵值
   4. 集合前兩項成一個通用外鍵
   5. 添加模型欄位
   6. 添加排序
4. 在 <admin.py> 註冊
5. 設置 <urls.py> 路徑
6. 初步撰寫提交評論方法
   1. 在 comment 應用 <views.py>撰寫 update_comment 方法 
   2. 使用referer返回前頁，若<base.html>設定為never需修改
   3. 取得用戶訊息
   4. 取得評論資料
   5. 取得模型與文章編號
   6. 創建評論物件、存入評論資料
   7. 評論後轉址回前頁面，若找不到頁面則跳轉至主頁
7. 初步建立前端評論區域
   1. 開啟 blog 應用的 <blog_detail.html> 頁面
   2. 驗證使用者是否登入，登入則顯示評論區域，未登入則顯示登入選項
8. 評論表單化
   1. 在comment應用 創建<forms.py>表單
   2. <forms.py>表單驗證使用者、評論對象內容
   3. 需要驗證用戶，所以需自訂user用法，再由update_comment傳入user參數來使用
   4. 在 blog 應用的 blog_detail 方法 添加 comment_form獲取評論的方法
   5. 修改 update_comment方法 ，將其改為接收form表單資料後，傳送資料至前端頁面 
   6. <blog_detail.html>前端頁面改為使用表單提交評論
9. 富文本提交評論
   1. 安裝 django-ckeditor
   2. 在 <forms.py>添加 django-ckeditor、在評論內容表單添加富文本
   3. 在<settings.py> 配置 django-ckeditor
   4. 在 <blog_detail.html> 添加 ckeditor 的 js 
   5. 在 <base.css> 添加 django-ckeditor 的寬度