我的django之旅(二)模板和静态文件

标签(空格分隔): django


1.为什么要使用模板

在上一篇博文中,提到了HttpReponse,但是HttpReponse只能传送字符串,如果要构建一个网页,那么工作量就会十分巨大。模板是一种方便的标签,存在于HTML文件中,我们可以通过模板的语法格式,动态接收服务器发送的数据,再由模板进行渲染。

2.模板目录的配置

既然我们要使用模板,那么我们就要有个目录来存放模板。而且为了我们的程序能够搜索到模板,还要对模板目录进行配置。

(1)在我们的项目目录下新建一个templates文件夹

(2)在templates下新建rango文件夹(注:rango是我的项目中的一个应用)

(3)打开settings.py配置我们的模板信息

方法一:

TEMPLATE_DIRS=(<workspace>/<projectname>)

虽然我们可以使用绝对路径,但是当我们的项目要运行再其他人的机器上时,workspace的名称可能不一样,这样我们就需要使用动态的路径来表示。url和path这种东西,在我们的开发中切忌写“死”了

方法二:(推荐)

在我们的settings.py中有一个名为BASE_DIR的变量,它表示文件所在目录的上级目录,也就是我们的templates文件夹所在目录。

所以我们新建一个变量TEMPLATE_PATH=os.path.join(BASE_DIR,'templates')

ps:os.path.join这个函数会将路径相结合,得到的就是BASE_DIR/templates

好了,现在我们的

TEMPLATE_DIRS=(TEMPLATE_PATH)

3.添加模板

万事俱备,就等我们添加一个模板了。这个模板的位置自然就在templates/rango中,新建一个index.html

<!DOCTYPE html>
<html>
<head>
<title>Rango</title>
<h1>rango says</h1>
hello<strong>{{USERNAME}}</strong>!
<a href="/rango/about">About</a>
</head>
<body>
</body>
</html>

这段html代码表示我们对一个user,say hello

4.修改views.py

目前,我们的views.py文件中,index函数还不能映射到这个index.html文件。所以要对其进行修改

from django.shortcuts import render

引入render(渲染)

新建一个字典变量

context_dict = {'username': "Liao"}
return render(request,'rango/index.html',context_dict)

运行

python manage.py runserver

就可以看到我们的

helloLiao!

5.静态文件

前端开发,html,css,js缺一不可。我们虽然能够使用模板开始渲染了,但是还没有使用到css来给网页添加样式,也没有图片,所以得到的只是一个粗糙简单的页面

(1)在我们的项目中新建static文件夹,在static中再新建images文件夹

(2)同上面,我们为了让程序搜索到static文件夹,仍然需要在settings.py文件中配置相关变量

STATIC_PATH = os.path.join(BASE_DIR,'static')
STATICFILES_DIRS=(STATIC_PATH)

(3)让我们在images文件夹里面悄悄地放一张图片,然后运行程序,

访问

http://127.0.0.1:8000/static/images/

image-name是我们的图片名称,切记要带后缀

不出意外,我们将会在浏览器上看到这幅图片,如果出错,一般会报404 not found

仔细检查django的配置文件拼写即可。

6.结合静态文件和模板

为了使用静态文件,我们需要再模板首行加上这么一句话

{% load staticfiles %}

为了显示我们的图片

<img src="{% static "image/test1.jpg" %}" alt='test picture' />

当中使用到了static,表示我们引用的是一个静态文件。

同理,当我们要使用js,css等外部静态文件时,也可以使用static,提供路径即可。

7.总结

今天学习了模板和静态文件

1.模板

(1)在我们的templates文件夹中新建所需的模板,并且在settings.py文件中配置

    TEMPLATE_PATH=os.path.join(BASE_DIR,'tmeplates')
TEMPLATE_DIRS=(TEMPALTE_PATH,)

(2)在应用的views.py文件中新建视图函数,在视图函数中创建一个字典,在字典中存放我们要传入到模板中的数据。

(3)使用render()函数,生成渲染模板响应

2.静态文件

在static文件夹中存放我们所需的css,js等文件,在static文件夹中新建images文件夹,存放图片。

(1)配置static目录

STATIC_PATH=os.path.join(BASE_DIR,'static')
STATICFILES_DIRS=(STATIC_PATH,)

(2)访问静态文件

localhost:8000/static/images/filename

(3)在模板中访问静态文件

{% load staticfile%}

切记,上面那行代码要放再<!DOCUMENT>下面,而在上面的位置,如果放在中,会造成不必要的空格。

使用{% static "filename" %}访问静态文件。

我的django之旅(二)模板和静态文件的更多相关文章

  1. django模板和静态文件

    1.为什么要使用模板 在上一篇博文中,提到了HttpReponse,但是HttpReponse只能传送字符串,如果要构建一个网页,那么工作量就会十分巨大.模板是一种方便的标签,存在于HTML文件中,我 ...

  2. django 简易博客开发 3 静态文件、from 应用与自定义

    首先还是贴一下源代码地址  https://github.com/goodspeedcheng/sblog 上一篇博客我们介绍了 django 如何在views中使用templates以及一些常用的数 ...

  3. vert.x学习(六),动态模板与静态文件的结合

    这篇学习在动态模板里面引入css,把动态模板与静态文件结合起来使用. 编写DynamicReference.java package com.javafm.vertx.helloworld; impo ...

  4. django 模板使用静态文件

    1.新建项目 2.新建app,并在install_app中添加该app 3.和app文件夹并列新建static.和TEMPLATES  文件夹,分别放静态文件和模板 4.setting.py中设置 T ...

  5. Django app安装,配置mysql,时区,模板,静态文件,媒体,admin

    1.创建app python manage.py startapp 名字 Migrations 数据库同步目录,记录数据库同步的记录 init 包文件 Admin.py django自带的后台管理文件 ...

  6. Djanjo 的app 模板路径 静态文件 完整版登录 新手三件套 以及orm

    一: django中app的概念: 一个项目可以包含多个应用(app,类似于模块,主页打开多个模块就是多个app) 创建了app,要在配置文件中注册 二:模板路径配置: 1 templates文件夹 ...

  7. 第一个Django应用 - 第六部分:静态文件

    前面我们编写了一个经过测试的投票应用,现在让我们给它添加一张样式表和一张背景图片. 除了由服务器生成的HTML文件外,WEB应用一般需要提供一些其它的必要文件,比如图片文件.JavaScript脚本和 ...

  8. Django学习(6)配置静态文件

      本文将详细讲述如何在Django中配置静态文件,如图片(images),JavaScript,CSS等.   我们将要实现的网页如下: 当按下按钮"Change Text"时, ...

  9. Django模版结构优化和加载静态文件

    引入模版 有时候一些代码是在许多模版中都用到的.如果我们每次都重复的去拷贝代码那肯定不符合项目的规范.一般我们可以把这些重复性的代码抽取出来,就类似于Python中的函数一样,以后想要使用这些代码的时 ...

随机推荐

  1. C#模拟登录的htmlHelper类

    public class HTMLHelper { /// <summary> /// 获取CooKie /// /// </summary> /// /// <para ...

  2. Magento资源问题上CDN方案研究

    通过对Magento的了解,发现Magento的资源文件主要分布在media.js.skin三个文件夹里,media文件夹主要包括了系统自带编辑器WYSIWYG Editor 所有编辑器涉及到的资源( ...

  3. JS通用表单验证函数,基于javascript正则表达式

    表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...

  4. POJ3253 Haffman

    POJ3253 分析: 简单的哈弗曼树的应用. AC代码: //Memory: 316K Time: 16MS #include <iostream> #include <cstri ...

  5. JAVA三大特性之多态

    面向对象的三大特性:封装.继承.多态.从一定角度来看,封装和继承几乎都是为多态而准备的.这是我们最后一个概念,也是最重要的知识点. 多态的定义:指允许不同类的对象对同一消息做出响应.即同一消息可以根据 ...

  6. 怎样在Word中插入代码并保持代码原始样式不变

    怎样在Word中插入代码并保持样式不变 我们有时候需要在word中添加一段我们写的代码,但是把代码粘贴到word文档中之后就发现所有的代码的样子都变了,我们可以采用下边的方法来实现保持代码原来的样式和 ...

  7. VS2010之MFC串口通信的编写教程--转

    http://wenku.baidu.com/link?url=K1XPdj9Dcf2of_BsbIdbPeeZ452uJqiF-s773uQyMzV2cSaPRIq6RddQQH1zr1opqVBM ...

  8. HDU 3586 : Information Disturbing

    Problem Description In the battlefield , an effective way to defeat enemies is to break their commun ...

  9. [每日一题] 11gOCP 1z0-052 :2013-09-27 bitmap index.................................................C37

    转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/12106027 正确答案C 这道题目是需要我们掌握位图索引知识点. 一.首先我们来看位图索引 ...

  10. phpcms:六、频道页(category.html)

    1.当前栏目的ID:{$catid}标题样式:{title_style($v[style])}(在添加内容或编辑内容的时候,标题右边 有一个选择颜色的块).{str_cut(strip_tags($v ...