Django-4.2博客開發教程:初識模板(九)

一、模板簡介

  • 爲了更好的維護和展示頁面數據,使用直接返回數據顯然是呆板的,不夠美觀,不夠靈活,所以要使用模板。
  • 模板一般都放到項目根目錄下的templates文件夾裏。模板包含一些基礎的HTML代碼和一些特殊的語法,通過特殊的語法將數據動態的插入HTML頁面中。
  • 特殊的語法中有一些變量和標籤。模板變量由視圖函數生成的,然後通過上下文傳遞到模板裏,由瀏覽器渲染出來。

二、模板使用方法

1)首先在同項目名目錄下配置模板路徑

在myblog/settings.py >> templates裏的dirs

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

 2) 增加url規則

myblog/urls.py 》》 增加view.index

urlpatterns = [
    ...
    path('', views.index),   
]

3)不同數據類型的操作實例

a. 變量

 blog/views.py

def index(request):
    sitename = '白灰博客'
    url = 'www.baihui.com'
    # 把兩個變量封裝到上下文裏
    context = {
        'sitename': sitename,
        'url': url,
    }
    # 把上下文傳遞到模板裏
  return render(request, 'index.html', context)

 myblog根目錄創建templates文件夾,下面再建一個index.html   ,刷新頁面查看首頁渲染結果。變量需要用雙大括號 {{ 變量名}} 來顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyBlog</title>
</head>
<body>
<h2>網站:{{ sitename }}</h2>
<h2>域名:{{ url }}</h2>
</body>
</html>

b. 列表

  blog/views.py

def index(request):
    sitename = '白灰博客'
    url = 'www.baihui.com'
    # 新加一個列表
    list = [
        '測試數據1',
        '測試數據2',
        '測試數據3',
        '測試數據4',
        '測試數據5',
    ]
    # 把兩個變量封裝到上下文裏
    context = {
        'sitename': sitename,
        'url': url,
        'list2': list,
    }
    # 把上下文傳遞到模板裏
    return render(request, 'index.html', context)

注意上面的list2是content的key,模板引用的就是這個key list2,不是上面的變量名list。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyBlog</title>
</head>
<body>
<h2>網站:{{ sitename }}</h2>
<h2>域名:{{ url }}</h2>
{#新加代碼#}
<div>
    <ul>
    <h4>測試數據列表:</h4>
        {% for list in list2  %}
        <li>{{ list }}</li>
        {% endfor %}
    </ul>
</div>
</body>
</html>

 

c. 字典

 

def index(request):
    sitename = '白灰博客'
    url = 'www.baihui.com'
    list = [
        '測試數據1',
        '測試數據2',
        '測試數據3',
        '測試數據4',
        '測試數據5',
    ]
    myinfo = {
        'name': 'baihui',
        'addr': 'beijing',
        'age': 33,
        'sex': 'm',
        'as name': 'robin',
    }
    context = {
        'sitename': sitename,
        'url': url,
        'list2': list,
        'info': myinfo,
    }
    # 把上下文傳遞到模板裏
    return render(request, 'index.html', context)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyBlog</title>
</head>
<body>
<h2>網站:{{ sitename }}</h2>
<h2>域名:{{ url }}</h2>
{#新加代碼#}
<div>
    <ul>
    <h4>測試數據列表:</h4>
        {% for list in list2  %}
        <li>{{ list }}</li>
        {% endfor %}
    </ul>
</div>
<div>
    <ul>
        <h3>我的個人信息</h3>
        {% for k,v in info.items %}
        <li>{{k}} : {{v}}</li>
        {% endfor %}
    </ul>
</div>
</body>
</

最終結果如下

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章