手把手教你用django搭建博客(二）

接上一篇，上篇我们已经创建了项目和应用，并且可以登录后台，添加文章了，不妨自己先添加几篇文章，待会我们用得到，这篇我们主要讲模板和视图函数的使用，为什么需要模板和视图呢，为方便后续的操作大家理解起来容易些，我现在在这里讲些基本的理论，为我们后续的操作做个铺垫：

在我们的文章在后台添加完毕后，我们要需要在前台页面把它展示出来，这样别人才能看到，所以前台展示的页面我们需要用模板来呈现，那模板的数据从哪里来的，我们猜也应该猜到了，是视图，没错，这部分工作是由视图函数来完成的，最后设置urls就可以访问我们的blog首页了，基本原理就介绍到这里，接下来我们来看看究竟怎么完成一个模板的撰写：

首先在blog目录下建立一个目录templates，在这个文件夹下建立2个html文件，一个叫base.html,一个是index.html，base.html这个网站放置我们页面布局中不变的内容，具体的数据内容放到我们index.html页面中，打开base.html文件，写入如下代码，然后保存：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>Starter Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    </style>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">mindg.cn博客</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="用户名" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="密码" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">登录</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

    <div class="jumbotron">
     <div class="container">
         {% block content %}
        {% endblock %}
      </div>
    </div>>
 <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<title>Starter Template for Bootstrap</title>

<!--[if lt IE 9]>

<![endif]-->

</style>

</head>

<body>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">mindg.cn博客</a>

</div>

</div>

</div>

</form>

</div>

</div>

</nav>

{% block content %}

{% endblock %}

</div>

</div>>

<!-- Bootstrap core JavaScript

================================================== -->

</body>

</html>

在这个文件中，为了美观点，我引入了bootstrap的样式，这就是我们base.html文件了，现在打开index.html文件，输入如下内容，然后保存：

{% extends 'base.html' %}


{% block content %}

{% for post in posts %}
<h2>{{ post.title }}</h2>
<p>{{ post.timestamp|date:"1, F jS" }}</p>
<p>{{ post.body }}</p>
{% endfor %}

{% endblock %}

{% extends 'base.html' %}

{% block content %}

{% for post in posts %}

<h2>{{ post.title }}</h2>

<p>{{ post.timestamp|date:"1, F jS" }}</p>

{% endfor %}

{% endblock %}

这样，我们所有的模板文件就全部完成了，具体的模板语法，我不具体讲解了，请大家自行补脑，我们接下来该编写视图函数了，终于视图该上场了，都快等不及了，打开blog下的 views.py文件，写入：

from django.shortcuts import render, render_to_response
from django.template import RequestContext
from blog.models import BlogPost

# Create your views here.
def index(request):
    posts = BlogPost.objects.all()
    return render_to_response('index.html', {'posts':posts},context_instance=RequestContext(request))

from django.shortcuts import render, render_to_response

from django.template import RequestContext

from blog.models import BlogPost

# Create your views here.

def index(request):

posts = BlogPost.objects.all()

return render_to_response('index.html', {'posts':posts},context_instance=RequestContext(request))

现在我们完成了所有代码的工作，接下来只要设置好urls就可以访问了，打开myblog下的urls.py,修改如下：

from django.conf.urls import patterns, include, url

from django.contrib import admin
from blog.views import archive
admin.autodiscover()

urlpatterns = patterns('',
    # Examples:

    url(r'^admin/', include(admin.site.urls)),
    url(r'^blog/', include('blog.urls')),
)

from django.conf.urls import patterns, include, url

from django.contrib import admin

from blog.views import archive

admin.autodiscover()

urlpatterns = patterns('',

# Examples:

url(r'^admin/', include(admin.site.urls)),

url(r'^blog/', include('blog.urls')),

)

其实就是加了一行而已，因为include了一个文件，所以要便捷blog下的urls文件（如果没有就创建一个），内容如下：

from django.conf.urls import patterns, include, url
from blog.views import index

urlpatterns = patterns('',
    url(r'^$', index)
)

from django.conf.urls import patterns, include, url

from blog.views import index

urlpatterns = patterns('',

url(r'^$', index)

)

大功告成，进入命令行启动项目：

python manage.py runserver

1	python manage.py runserver

然后访问：

http://127.0.0.1:8000/blog/

如果没什么意外的话，应该你在后台发布的文章都显示出来了，不过还有一个小问题，如果随着时间的推移，你发布了很多文章，首页会变得很长很长，影响访问速度，所以这时候就用到了我们的分页功能了，待我们下篇介绍如何实现分页。

M	T	W	T	F	S	S
« Jun
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

头脑的思考

头脑的思考

手把手教你用django搭建博客(二）