### * **使用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 }) ``` ### * **实现上下篇文章跳转** ### * **实现分页功能**