Home >  > Django 教程之四:创建模板

Django 教程之四:创建模板

1

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})

修改后的效果如下图所示:
Snap18177

修改my_blog/my_blog/urls.py,修改后的结果如下:
Snap18178

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

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

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
尊重版权,转载时务必以链接形式注明作者和原始出处及本声明。

本文暂无标签