zoukankan      html  css  js  c++  java
  • 实战Django:简易博客Part2

    在Part1中,我们完成了本项目的基本框架搭建,并完善了一下管理后台,现在我们来看如何设计面向公共的页面部分。

    8.创建模板


    首先,请在blog文件夹下建立templates文件夹,然后,在templates文件夹中建立一个叫bog的文件夹,在这个bog文件夹下新建一个archive.html文件,这个文件的路径应该是:

    bog/templates/bog/archive.html

    把下面这些代码添加到archive.html中:

    bog/templates/bog/archive.html

    {% for post in posts %}
    <h2>{{ post.title }}</h2>
    <p>{{ post.timestamp|date:"Y-m-d" }}</p>
    <p>{{ post.body }}</p>
    {% endfor %}

    9.编写视图


    编辑bog/views.py 文件,添加下面的内容:

    bog/views.py

    from django.template import loader, Context
    from django.http import HttpResponse
    from blog.models import BlogPost
    
    def archive(request):
        posts = BlogPost.objects.all()
        t = loader.get_template("blog/archive.html")
        c = Context({ 'posts': posts })
        return HttpResponse(t.render(c))

    我们来简单分析一下这个视图,在第三行我们从模型中导入了BlogPost对象,这样,我们便可以在第五行,用BlogPost.objects.all() 来获取数据库中所有的文章内容。

    第6行:我们只要告诉Django模板的名字,就能创建模板对象t,因为这个模板保存在应用的templates文件夹下,所以Django很轻松就能找到它。

    第7行:Django渲染的数据是由一个字典类的对象context提供的,这里的context c只有一对键与值;

    第8行:每个Django视图函数都会返回一个HttpResponse的对象,我们用render方法把字符串传递给HttpResponse,最终实现在用户的浏览器端看到整个页面。

    10.创建Url模式


    先在blog文件夹下创建一个叫url.py的文件,然后添加如下内容:

    blog/urls.py

    from django.conf.urls import patterns, url
    from blog import views 
    
    urlpatterns = patterns('',
        url(r'^$', views.archive),
    )

    我们还需要修改项目的urls.py,编辑blogproject/urls.py 文件,让它变成下面这样:

    blogproject/urls.py

    from django.conf.urls import patterns, include, url
    from django.contrib import admin
    
    urlpatterns = patterns('',
        url(r'^blog/', include('blog.urls', namespace="blog")),
        url(r'^admin/', include(admin.site.urls)),
    )

    上面这个操作做完后,我们打开浏览器,在地址栏中输入:

    可以看到我们的博客页面:

    5

    11.扩展模板


    看上去很简陋是不是?要知道,我们的文章只是介绍编程这一块的内容,美术设计这种事,还是留给专业的的人员来干吧。他们可以对现有的模板进行各种美化,最终变成大家喜闻乐见的样子。

    讲到页面风格,我们引申出一个话题,如果我们的网站上有好多种页面,比如博客、相册、“关于我们”等等,而且我们希望这些页面都使用统一的风格。最笨的办法是复制粘帖,做出三个差不多的模板。但在Django中,正确的做法是,创建一个基础模板,然后在这之上扩展出其它特定的模板来。

    在bog/templates/blog文件夹下新建一个base.html文件,然后加入下列内容:

    bog/templates/blog/base.html:

    <html>
    <style type="text/css">
    body { color: #000; background: #fff; padding: 0 5em; margin: 0; font-family:Microsoft Yahei;  }
    h1 { color: #fff; padding: 2em 1em; background: #1162A0 }
    h2 { color: #1162A0; border-top: 1px dotted #fff; margin: 1em 20 }
    p { margin: 1em 20 }
    </style>
    <body>
    <h1>实战Django</h1>
    {% block content %}
    {% endblock %}
    </body>
    </html>

    注意把这个文件储存为UTF-8编码。

    注意{% block content %} 和{% endblock %} ,这是给要扩展的模板预留的接口。

    修改archive.html模板,让它引用这个base.html模板

    bog/templates/bog/archive.html

    {% extends "blog/base.html" %}
    {% block content %}
    {% for post in posts %}
    <h2>{{ post.title }}</h2>
    <p>{{ post.timestamp|date:"Y-m-d" }}</p>
    <p>{{ post.body }}</p>
    {% endfor %}    
    {% endblock %}

    最后,刷新一下浏览器,你可以看到如下的页面:

    6

    结合前面讲过的官方实例,你可以给这个简易博客应用增加更多的内容,比如,加入一个显示文章内容的页面,增加一个“关于”我们的页面,等等。技能只有在不断的练习中才能进步,不要仅仅满足于“把这些内容看懂”。

    下一次,舍得要给大家介绍一个比较有趣的实例,叫网络相册,在那里,你可以看到更多有用的技巧。

    附上本实例的源代码下载地址:舍得学苑下载中心

    【The End】

    本文版权归舍得学苑所有,欢迎转载,转载请注明作者和出处。谢谢!
    作者:舍得
    首发:舍得学苑@博客园

  • 相关阅读:
    cgo中调用有函数指针参数的C函数
    为什么要微服务架构服务化?
    学习刘杨人像后期笔记纪要
    错误日志表设计
    通过jstack日志分析和问题排查
    【JVM】jmap命令详解----查看JVM内存使用详情
    【JVM】jstat命令详解---JVM的统计监测工具
    介绍几种常用的监控工具
    【转】Pinpoint分布式系统性能监控工具
    【转】Skywalking概述
  • 原文地址:https://www.cnblogs.com/emagic/p/4149789.html
Copyright © 2011-2022 走看看