正式编写template

在template文件夹下增加base.html, 并在其中增加如下代码

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="description" content="A layout example that shows off a blog page with a list of posts.">
  8.     <title>Andrew Liu Blog</title>
  9.     <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
  10.     <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
  11.     <link rel="stylesheet" href="http://picturebag.qiniudn.com/blog.css">
  12. </head>
  13. <body>
  14. <div id="layout" class="pure-g">
  15.     <div class="sidebar pure-u-1 pure-u-md-1-4">
  16.         <div class="header">
  17.             <h1 class="brand-title">Andrew Liu Blog</h1>
  18.             <h2 class="brand-tagline">雪忆 - Snow Memory</h2>
  19.             <nav class="nav">
  20.                 <ul class="nav-list">
  21.                     <li class="nav-item">
  22.                         <a class="pure-button" href="https://github.com/Andrew-liu">Github</a>
  23.                     </li>
  24.                     <li class="nav-item">
  25.                         <a class="pure-button" href="http://weibo.com/dinosaurliu">Weibo</a>
  26.                     </li>
  27.                 </ul>
  28.             </nav>
  29.         </div>
  30.     </div>
  31.     <div class="content pure-u-1 pure-u-md-3-4">
  32.         <div>
  35.             <div class="footer">
  36.                 <div class="pure-menu pure-menu-horizontal pure-menu-open">
  37.                     <ul>
  38.                         <li>a href="http://andrewliu.tk/about/">About Me</a></li>
  39.                         <li>a href="http://twitter.com/yuilibrary/">Twitter</a></li>
  40.                         <li>a href="http://github.com/yahoo/pure/">GitHub</a></li>
  41.                     </ul>
  42.                 </div>
  43.             </div>
  44.         </div>
  45.     </div>
  46. </div>
  47. </body>
  48. </html>

其中

  • {% for in list> %}与{% endfor %}成对存在, 这是template中提供的for循环tag
  • {% if %} {% else %} {% endif %}是template中提供的if语句tag
  • template中还提供了一些过滤器然后修改my_blog/article/view.py, 并删除test.html
  1. # -*- coding: utf-8 -*-
  2. from django.shortcuts import render
  3. from django.http import HttpResponse
  4. from article.models import Article
  5. from datetime import datetime
  7. # Create your views here.
  8. def home(request):
  9.     post_list = Article.objects.all()  #获取全部的Article对象
  10.     return render(request, 'home.html', {'post_list' : post_list})

修改my_blog/my_blog/urls.py

  1. from django.conf.urls import patterns, include, url
  2. from django.contrib import admin
  4. urlpatterns = patterns('',
  5.     # Examples:
  6.     # url(r'^$', 'my_blog.views.home', name='home'),
  7.     # url(r'^blog/', include('blog.urls')),
  9.     url(r'^admin/', include(admin.site.urls)),
  10.     url(r'^$', 'article.views.home'),
  11. )

现在重新打开http://127.0.0.1:8000/, 发现Blog的整理框架已经基本完成, 到现在我们已经了解了一些Django的基本知识, 搭建了简单的Blog框架, 剩下的就是给Blog添加功能。

d9

查看当前整个程序的目录结构：

  2. my_blog
  3. ├── article
  4. │   ├── __init__.py
  5. │   ├── __pycache__
  6. │   │   ├── __init__.cpython-34.pyc
  7. │   │   ├── admin.cpython-34.pyc
  8. │   │   ├── models.cpython-34.pyc
  9. │   │   └── views.cpython-34.pyc
  10. │   ├── admin.py
  11. │   ├── migrations
  12. │   │   ├── 0001_initial.py
  13. │   │   ├── __init__.py
  14. │   │   └── __pycache__
  15. │   │       ├── 0001_initial.cpython-34.pyc
  16. │   │       └── __init__.cpython-34.pyc
  17. │   ├── models.py
  18. │   ├── tests.py
  19. │   └── views.py
  20. ├── db.sqlite3
  21. ├── manage.py
  22. ├── my_blog
  23. │   ├── __init__.py
  24. │   ├── __pycache__
  25. │   │   ├── __init__.cpython-34.pyc
  26. │   │   ├── settings.cpython-34.pyc
  27. │   │   ├── urls.cpython-34.pyc
  28. │   │   └── wsgi.cpython-34.pyc
  29. │   ├── settings.py
  30. │   ├── urls.py
  31. │   └── wsgi.py
  32. └── templates
  33.     ├── base.html
  34.     └── home.html