Django05

模板和静态媒体

  1. 设置模版目录
    设置一个储存模板的目录:
    绝对路径还是相对路径? 选择相对路径更好
    BASE_DIR内容是/tango_with_django_project/.

在你的Django项目目录里(例如/tango_with_django_project/)),创建一个新的目录叫做templates.在这个目录里创建另一个rango目录.所以我们将在/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,它将返回/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,
]
  1. 编辑模版
    在我们创建模板目录和设置好路径以后,我们需要在template/rango/目录里建立一个叫做index.html的文件,在新文件里加入下面代码:


   
        Rango
    
 
        

Rango says...

hello world! {{ boldmessage }}
About
  1. 修改视图rango/views.py
def index(request):
    context_dict = {'boldmessage': "I am bold font from the context"}
    return  render(request,'rango/index.html', context_dict)
  1. 效果图
Django05_第1张图片
效果

提供静态媒体

  1. 设置静态媒体目录

为了设置静态媒体,你需要设立存储它们的目录.在你的项目目录(例如/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,
]
  1. 静态媒体文件和模板

{% load staticfiles %} 

    
        Rango
    
    
        

Rango says...

hello world! {{ boldmessage }}
About
![]({% static )

首先,我们需要使用{% load static %}标签来使用静态媒体.所以我们才可以用{% static "rango.jpg" %在模板里调用static文件.Django模板标签用{ }来表示.在这个例子里我们用static标签,它将会把STATIC_URL和rango.jpg连接起来,如下所示.

Django05_第2张图片
使用静态文件
  • 效果图


    Django05_第3张图片
    效果图

基本流程

Django05_第4张图片
基本流程

练习

Django05_第5张图片
Paste_Image.png

效果图:

Django05_第6张图片
效果图

代码:
views.py

Django05_第7张图片
views

about.html

Django05_第8张图片
about

你可能感兴趣的:(Django05)