4、模板和静态媒体

这章讲解模板引擎

4.1使用模板

前面我们讲解了view和url 映射,创建出了django 的web页面,现在就要将模板混合进去

好的网站在布局上总是有许多重复的。django提供模板更快的达到这个设计目标。将逻辑和页面分离。这一章,会新建一个模板用来新建html页面。这个模板会通过一个django视图分发出去。我们会利用models动态生成数据,混合在模板里面,以期达到更深入的学习。

4.1.1配置模板文件夹

在tango_with_django_project下面新建一个templates 的文件夹。再新建一个rango的文件夹,形如tango_with_django_project/templates /rango,这个模板就是为了rango应用创建的。

4.1.2动态路径

创建好上述文件夹之后,还要告诉你的django工程你创建的文件夹在哪。所以在settings.py里面进行配置。

先在文件头加上如下代码

import os

SETTINGS_DIR = os.path.dirname(__file__)

然后在下面新增下面两端代码

PROJECT_PATH = os.path.join(SETTINGS_DIR,os.pardir)

PROJECT_PATH = os.path.abspath(PROJECT_PATH)

设置好绝对路径之后,再添加如下代码指示templates文件夹的位置

TEMPLATE_PATH = os.path.join(PROJECT_PATH,'template')

然后配置TEMPLATE_DIRS元组

TEMPLATE_DIRS = (

TEMPLATE_PATH,

)

4.1.3添加一个模板

你的模板文件夹的路径配置好之后,在templates/rango文件夹下面新建一个index.html文件,代码如下:

<!DOCTYPE html>

<html>

  <head>

    <title>Rango</title>

  </head>

  <body>

    <h1>Rango says...</h1>

    hello world!<strong>{{boldmessage}}</strong><br/>

    <a href="/rango/about/">About</a><br/>

  <body>

</html>

上述代码中有一个{{boldmessage}},这是一个Django模板变量,我们会为这个变量设置一个值去展示输出。

为了使用这个模板,我们需要重新配置index(),这一次,不展示文字。而是展示模板,在rango/views.py里面添加如下代码

from django.template import RequestContext

from django.shortcuts import render_to_response

更新index()视图,像下面这样

def index(request):

  context = RequestContext(request)

context_dict = {'boldmessage':"I am bold font from the context"}

return render_to_response('rango/index.html',context_dict,context)

重启服务器,输入http://127.0.0.1:8000/rango/,会见到如图所示效果

4.2提供静态媒体

4.2.1在tango_with_django_project下创建一个static的文件夹用来存放css,js等文件。

static文件夹新建之后,得告诉django他的位置所在,就像刚才创建template一样。在setting.py文件里面,更新两个变量,一个STATIC_URL和STATICFILES_DIRS元组。首先新建一个变量存储static文件夹的路径。

STATIC_PATH = os.path.join(PROJECT_PATH,'static')

STATIC_URL = '/static/'

STATICFILES_DIRS = (

  STATIC_PATH,

)

STATIC_URL定义了你的django应用访问静态资源的根路径,定义错误会引起很多麻烦。

STATICFILES_DIRS指定你电脑上的static文件夹放置的位置。就像TEMPLATE_DIRS元组一样。

4.3静态媒体文件和模板

现在你已经可以通过你的模板访问那些静态文件了,修改index.html文件如下所示:

<!DOCTYPE html>

{% load static %}

<html>

<head>

  <title>Rango</title>

  <link rel="stylesheet" href="{% static "css/base.css" %}">

  <script src="{% static "js/jquery.js" %}"></script>

<body>

  <h1>Rango says...</h1>

  hello world!<strong>{{boldmessage}}</strong><br/>

  <a href="/rango/about/">About</a><br/>

  <img src="{% static "rango.jpg" %}" alt="Picture of Rango"/>

{% load static %}用来声明模板中可以使用static里面的静态文件,形如{% static "rango.jpg" %}

</body>

</head>

</html>

4.4.静态媒体服务器

现在许多站点都会给他们的用户提供上传的功能,所以需要给你的django工程添加一个简单的媒体服务器。

新建一个media文件夹,和static是同一个等级。新增该文件夹之后,修改tango_with_django_project/tango_with_django_project/下面的urls.py文件,添加以下代码

from django.conf import settings

#放在urlpatterns下面

if settings.DEBUG:

  urlpatterns += patterns(

    'django.views.static',

    (r'media/(?P<path>.*)',

    'serve',

    {'document_root':settings.MEDIA_ROOT})

)

django.conf的settings模块允许我们访问工程的settings文件里的变量。可选条件就是用来检查django工程是否运行在DEBUG模式。如果是,那么下面那个URL会添加到上面的元组里面。这个pattern表示任何一个以media开头的URL请求,会被定向到django.views.static视图。这个视图会为你处理上传文件的调度。

同样需要修改settings.py文件里面的配置,添加代码如下:

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(PROJECT_PATH,'media')

4.5总结

这一章,要学会怎么在视图里面使用模板,使用静态媒体文件,以及上传文件。

【翻译】How To Tango With Django 1.5.4 第四章的更多相关文章

  1. 《Django By Example》第四章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...

  2. 【翻译】How To Tango With Django 1.5.4 第五章

    5数据模型和数据库 一个模型就是一个描述你数据表的python对象.不用再通过SQL来操作数据库,而是使用python对象来操作数据库. 5.1rango要求 ...一个目录下面有多个下面 ...一个 ...

  3. 【翻译】How To Tango With Django 1.5.4 第三章

    django基础 3.1测试你的配置 测试你的python版本和你的django版本是否兼容 3.2新建django工程 在dos里面进到你事先新建的code文件夹,然后在执行下列命令新建工程 c:\ ...

  4. Tango with Django 1.9 中文——1.概述

    译者注:英文书地址https://leanpub.com/tangowithdjango19/,作者为Leif Azzopardi 和 David Maxwell.本文仅为尝试.学习和交流,著作权利归 ...

  5. 《Django By Example》第六章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:无他,祝大家年会都中奖!) 第六章 ...

  6. 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章  ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...

  7. 《Entity Framework 6 Recipes》中文翻译系列 (21) -----第四章 ASP.NET MVC中使用实体框架之在页面中创建查询和使用ASP.NET URL路由过虑

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 4.2. 构建一个搜索查询 搜索数据是几乎所有应用的一个基本功能.它一般是动态的,因 ...

  8. Gradle 1.12 翻译——第十四章. 教程 - 杂七杂八

    有关其它已翻译的章节请关注Github上的项目:https://github.com/msdx/gradledoc/tree/1.12,或訪问:http://gradledoc.qiniudn.com ...

  9. Django搭建博客网站(四)

    Django搭建博客网站(四) 最后一篇主要讲讲在后台文章编辑加入markdown,已经在文章详情页对markdown的解析. Django搭建博客网站(一) Django搭建博客网站(二) Djan ...

随机推荐

  1. LSM树由来、设计思想以及应用到HBase的索引

    讲LSM树之前,需要提下三种基本的存储引擎,这样才能清楚LSM树的由来: 哈希存储引擎  是哈希表的持久化实现,支持增.删.改以及随机读取操作,但不支持顺序扫描,对应的存储系统为key-value存储 ...

  2. HDU4609 3-idiots(母函数 + FFT)

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=4609 Description King OMeGa catched three men wh ...

  3. c# 基本值类型及其默认值

    //值类型 C# 类型      .NET Framework 类型 bool            System.Boolean 4Byte 32bit布尔型变量 逻辑值,true或者false,默 ...

  4. 【BZOJ1426】收集邮票 期望

    [BZOJ1426]收集邮票 Description 有n种不同的邮票,皮皮想收集所有种类的邮票.唯一的收集方法是到同学凡凡那里购买,每次只能买一张,并且买到的邮票究竟是n种邮票中的哪一种是等概率的, ...

  5. 【BZOJ3211&3038】花神游历各国&上帝造题的七分钟2(CodeVS)

    Description   Input   Output 每次x=1时,每行一个整数,表示这次旅行的开心度 Sample Input 4 1 100 5 5 5 1 1 2 2 1 2 1 1 2 2 ...

  6. Redis常用命令(一)

    Redis::__construct描述:创建一个Redis客户端范例:$redis = new Redis(); connect, open描述:实例连接到一个Redis.参数:host: stri ...

  7. jquery插件之文字无缝向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...

  8. 1022. D进制的A+B (20)

    1022. D进制的A+B (20) 时间限制 100 ms 内存限制 32000 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 输入两个非负10进制整数A和 ...

  9. 【LeetCode】16. 4Sum

    题目:Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = ...

  10. getAttribute与setAttribute用法

    getAttribute和setAttribute只能用于元素节点. 1.当用getElementById获得元素节点时 /*---------------------------index.html ...