### * **使用Bootstrap實現靜態博客頁面** 1. 頁面布局設計 使用bootstrap以及Bootstrap的柵格系統 * 來自美國Twitter的前端框架 * 提供非常多的控件并附帶源碼 * 柵格系統把頁面均分為12等分 用[bootstrap]([http://www.bootcss.com/](http://www.bootcss.com/))實現了兩個靜態頁面 在templates文件夾下面 ### * **初識Django的模板系統** * 視圖文件不適合編碼html * 頁面設計改變需要修改python代碼 * 網頁邏輯和網頁視圖應該分開設計 * 模板系統的表現形式是文本 * 分離文檔的表現形式和表現內容 * 模板系統定義了特有的標簽占位符 1. 基本語法 * for 循環標簽 {%for x in list %},{%endfor%} ```html <ul> {%for item in list %} <li> {{item}}</li> {%endfor%} </ul ``` * if-else 分支標簽 {%if%}{%else}{%endif%} * **使用模板系統渲染博客頁面** ### * **實現文章詳情頁面跳轉** * 完善視圖邏輯 * * url路徑參數的獲取和傳遞 ``` #在urls.py文件中把detail路徑修改成功如下這樣 urlpatterns = [ path('detail:<int:article_id>', blog.views.get_detail_page), ] #再修改視圖路徑 views.py def get_detail_page(request, article_id): all_article = Article.objects.all() curr_article = None for article in all_article: if article.article_id == article_id: curr_article = article break section_list = curr_article.content.split('\n') return render(request, 'blog/detail.html', { 'curr_article' : curr_article, 'section_list' : section_list }) ``` ### * **實現上下篇文章跳轉** ### * **實現分頁功能**