模板和静态媒体
- 设置模版目录
设置一个储存模板的目录：
绝对路径还是相对路径？ 选择相对路径更好
BASE_DIR内容是<workspace>/tango_with_django_project/.
在你的Django项目目录里(例如<workspace>/tango_with_django_project/)),创建一个新的目录叫做templates.在这个目录里创建另一个rango目录.所以我们将在<workspace>/tango_with_django_project/templates/rango/目录里存放关于rango应用的模板.
.在setting.py中创建TEMPLATE_PATH变量,用它来储存templates目录.这里我们使用os.path.join()函数
TEMPLATE_PATH = os.path.join(BASE_DIR, 'templates')
我们用os.path.join()函数来连接BASW_DIR变量和templates,它将返回<workspace>/tango_with_django_project/templates/.我们可以为TEMPLATE_DIRS添加TEMPLATE_PATH,就像下面一样.
TEMPLATE_DIRS = [
# Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
TEMPLATE_PATH,
]
- 编辑模版
在我们创建模板目录和设置好路径以后,我们需要在template/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>
- 修改视图rango/views.py
def index(request):
context_dict = {'boldmessage': "I am bold font from the context"}
return render(request,'rango/index.html', context_dict)
- 效果图
效果
提供静态媒体
- 设置静态媒体目录
为了设置静态媒体,你需要设立存储它们的目录.在你的项目目录(例如<workspace>/tango_with_django_project/),创建叫做static的目录.在static里再创建一个images目录.
现在在static/images目录里放置一个图片
在settings.py文件,我们需要更新两个变量STATIC_URL和STATICFILES_DIRS元组,像下面一样创建一个储存静态目录(STATIC_PATH)的变量.
STATIC_PATH = os.path.join(BASE_DIR,'static')
STATIC_URL = '/static/' # You may find this is already defined as such.
STATICFILES_DIRS = [
STATIC_PATH,
]
- 静态媒体文件和模板
<!DOCTYPE html>
{% load staticfiles %} <!-- New line -->
<html>
<head>
<title>Rango</title>
</head>
<body>
<h1>Rango says...</h1>
hello world! <strong>{{ boldmessage }}</strong><br />
<a href="/rango/about/">About</a><br />
 <!-- New line -->
</body>
</html>
首先,我们需要使用{% load static %}标签来使用静态媒体.所以我们才可以用{% static "rango.jpg" %在模板里调用static文件.Django模板标签用{ }来表示.在这个例子里我们用static标签,它将会把STATIC_URL和rango.jpg连接起来,如下所示.
使用静态文件
-
效果图
效果图
基本流程
基本流程
练习
Paste_Image.png
效果图：
效果图
代码：
views.py
views
about.html
about
网友评论