02–Django筆記–模闆标簽和過濾器
一、搭建渲染模闆
渲染模闆的檔案位于應用檔案夾中的 views.py 檔案中
渲染模闆即為請求後傳回的html檔案的渲染
之後修改 views.py 建立渲染函數
# from mysite.blog.models import Blog
from django.shortcuts import render, get_object_or_404
from .models import Blog, BlogType
# 渲染模闆檔案
# Create your views here.
def blog_list(request): # 部落格清單html界面的渲染
context = {} # context字典為傳入html渲染的内容
context['blogs'] = Blog.objects.all() # Blog.objects.all()為選擇資料庫中所有部落格
return render(request, 'blog_list.html', context)
def blog_detail(request, blog_pk): # 部落格細節html界面的渲染；其中blog_pk參數為部落格編号(pk意思為外鍵)
context = {} # context字典為傳入html渲染的内容
context['blog'] = get_object_or_404(Blog, id = blog_pk) # get_object_or_404()在無法取到object的時候傳回404界面
return render(request, 'blog_detail.html', context)
但是此時并沒有用于渲染的 blog_list.html 和 blog_detail.html 檔案
需要在應用内建立 templates 檔案夾後，在檔案夾下加入這兩個檔案
<!-- blog_list.html -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的網站</title>
</head>
<body>
{% for blog in blogs %} <!-- 這裡的blog是從views.py中傳入的内容 -->
<h3>{{ blog.title }}</h3>
<p>{{ blog.content }}</p>
{% endfor %}
</body>
</html>
<!-- blog_detail.html -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ blog.title }}</title><!-- 這裡的blog是從views.py中傳入的内容 -->
</head>
<body>
<h3>{{ blog.title }}</h3>
<p>{{ blog.content }}</p>
</body>
</html>
二、路由搭建
建立完模闆渲染之後，還不能立刻通路，必須要先設定路由
需要在應用檔案夾下建立 urls.py 加入路由
# urls.py
from django.urls import path
from django.urls import path
from . import views # 引入模闆渲染的函數
urlpatterns = [
# http://localhost:8000/blog/1
path('<int:blog_pk>', views.blog_detail, name = 'blog_detail'),
]
然後再在項目檔案夾 urls.py 中加入路由
當路由全部設定完畢後，即可運作代碼
效果如下：
三、html優化
1. 連結設定
在html中設定可以跳轉的連結可以使用如下方式：
其中在 urls.py 中設定的url的名稱可以直接使用。
2. 過濾器
部落格長度問題
{{ blogs|length }} 可以擷取部落格長度
效果如下：
解決長部落格顯示問題
如果部落格是長部落格，也會将所有内容顯示到部落格清單：
可以使用過濾器修改部落格顯示長度：
<p>{{ blog.content|truncatechars:30 }}</p> <!-- 其中冒号後面的内容表示顯示字元長度 -->
<!-- 或者使用truncatewords:30，表示顯示前30個單詞 -->
效果如下：
時間顯示問題
可以使用過濾器對時間進行格式化：
<p>修改時間：{{ blog.last_updated_time|date:"Y-m-d G:i:s" }}</p>
<!-- 修改時間：2021-06-09 22:34:00 -->
時間顯示問題
可以使用過濾器對時間進行格式化：
<p>修改時間：{{ blog.last_updated_time|date:"Y-m-d G:i:s" }}</p>
<!-- 修改時間：2021-06-09 22:34:00 -->