Django 教程之四：创建模板

1、建立第一个模板
在template文件夹下增加base.html, 并在其中增加如下代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example that shows off a blog page with a list of posts.">

    <title>Andrew Liu Blog</title>
    <link rel="stylesheet" href="http://labfile.oss.aliyuncs.com/courses/487/pure-min.css">
    <link rel="stylesheet" href="http://labfile.oss.aliyuncs.com/courses/487/grids-responsive-min.css">
    <link rel="stylesheet" href="http://labfile.oss.aliyuncs.com/courses/487/blog.css">
</head>
<body>

<div id="layout" class="pure-g">

<div class="sidebar pure-u-1 pure-u-md-1-4">

<div class="header">

<h1 class="brand-title">Andrew Liu Blog</h1>


<h2 class="brand-tagline">Snow Memory</h2>


<nav class="nav">

<ul class="nav-list">

<li class="nav-item">
                        <a class="pure-button" href="https://github.com/Andrew-liu">Github</a>
                    </li>


<li class="nav-item">
                        <a class="pure-button" href="http://weibo.com/dinosaurliu">Weibo</a>
                    </li>

                </ul>

            </nav>

        </div>

    </div>



<div class="content pure-u-1 pure-u-md-3-4">

<div>
            {% block content %}
            {% endblock %}

<div class="footer">

<div class="pure-menu pure-menu-horizontal pure-menu-open">

<ul>

<li><a href="http://andrewliu.tk/about/">About Me</a></li>


<li><a href="http://twitter.com/yuilibrary/">Twitter</a></li>


<li><a href="http://github.com/yahoo/pure/">GitHub</a></li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

</div>


</body>
</html>

上面这段html编写的页面是一个模板, 其中{% block content %} {% endblock %}字段用来被其他继承这个基类模板进行重写

我们继续在templates文件夹下添加home.html文件

{% extends "base.html" %}

{% block content %}

<div class="posts">
    {% for post in post_list %}

<section class="post">

<header class="post-header">

<h2 class="post-title">{{ post.title }}</h2>




                        Time:  <a class="post-author" href="#">{{ post.date_time }}</a> <a class="post-category post-category-js" href="#">{{ post.category }}</a>
                    

            </header>



<div class="post-description">


                        {{ post.content }}
                    

                </div>

        </section>

    {% endfor %}
</div>

<!-- /.blog-post -->
{% endblock %}

其中

- {% for <element> in <list> %}与{% endfor %}成对存在, 这是template中提供的for循环tag
- {% if <elemtnt> %} {% else %} {% endif %}是template中提供的if语句tag
- template中还提供了一些过滤器

然后修改my_blog/article/views.py, 并删除test.html，在views.py中添加如下代码：

# -*- coding: utf-8 -*-
def home(request):
    post_list = Article.objects.all()  #获取全部的Article对象
    return render(request, 'home.html', {'post_list' : post_list})

修改后的效果如下图所示：

修改my_blog/my_blog/urls.py，修改后的结果如下：

现在重新打开http://localhost:9000/，效果如图所示：

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

Django 教程

Django 教程之一：创建网站项目

Django 教程之二：数据库、后台

Django 教程之三：模板的工作机制

Django 教程之四：创建模板

Django 教程之五：动态URL

Django 教程之六：Markdown和代码高亮

Django 教程之七：添加评论系统

Django 教程之八：博客的归档及其他页面

Django 教程之九：搜索和ReadMore

Django 教程之十：RSS和分页

Django 教程之十一：创建自己的模板

Django 教程之十二：修改导航栏

Django 教程之十三：改进分页功能

Django 教程之十四：服务器篇

Django 教程之十五：上传代码

Django 教程之十六：配置网站

原载：蜗牛博客
网址：http://www.snailtoday.com
尊重版权，转载时务必以链接形式注明作者和原始出处及本声明。