08 常用的模板標(biāo)簽和過(guò)濾器

技術(shù)交流QQ群:1027579432弯予，歡迎你的加入肛跌！

本教程來(lái)源于B站楊仕航Django2.0開(kāi)發(fā)視頻教程，如需轉(zhuǎn)載钢猛，必須注明來(lái)源伙菜！

1.繼續(xù)搭建blog

繼續(xù)搭建blog.png

打開(kāi)blog目錄下的views.py文件，添加如下內(nèi)容命迈，實(shí)現(xiàn)通過(guò)url向服務(wù)器發(fā)送請(qǐng)求贩绕，服務(wù)器收到請(qǐng)求后進(jìn)行響應(yīng)，把結(jié)果顯示到前端頁(yè)面的功能壶愤。

from django.shortcuts import render_to_response, get_object_or_404
from .models import Blog
# Create your views here.


def blog_list(request):
    context = {}
    context['blogs'] = Blog.objects.all()
    return render_to_response('blog_list.html', context)


def blog_detail(request, blog_pk):
    context = {}
    context['blog'] = get_object_or_404(Blog, pk=blog_pk)
    return render_to_response('blog_detail.html', context)

創(chuàng)建模板頁(yè)面：打開(kāi)blog目錄淑倾，在目錄下面創(chuàng)建templates文件夾，在該文件夾下創(chuàng)建blog_list.html和blog_detail.html兩個(gè)文件(ps:按下英文狀態(tài)的!后征椒，再按下Tab鍵娇哆，可以快速創(chuàng)建HTML5代碼骨架)，文件具體內(nèi)容如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的網(wǎng)站</title>
</head>
<body>
<!-- blog_list.html -->
<!-- 下一行中的blogs來(lái)自于views.py中的context['blogs'] = Blog.objects.all() -->
    {% for blog in blogs %}
    <!-- 下一行中的blog.title來(lái)自于models.py中的title = models.CharField(max_length=50) -->
        <h3>{{ blog.title }}</h3>
        <p>{{ blog.content }}</p>
    {% endfor %}
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog.title }}</title>
</head>
<body>
    <!-- blog_detail.html -->
    <h3>{{ blog.title }}</h3>
    <p>{{ blog.content }}</p>
</body>
</html>

創(chuàng)建模板頁(yè)面.png

創(chuàng)建路由設(shè)置文件：打開(kāi)blog目錄勃救，在目錄下面創(chuàng)建urls.py文件碍讨，具體文件內(nèi)容如下所示：

from django.urls import path
from . import views


urlpatterns = [
    # http:localhost:8000/blog/1
    path('<int:blog_pk>', views.blog_detail, name="blog_detail"),
]

打開(kāi)mysite目錄下的全局路由設(shè)置文件urls.py，在當(dāng)中添加如下內(nèi)容：

from django.contrib import admin
from django.urls import include, path
from blog.views import blog_list

urlpatterns = [
    # 博客首頁(yè)
    path('', blog_list, name="home"),
    path('admin/', admin.site.urls),
    path('blog/', include('blog.urls')),

]

打開(kāi)瀏覽器蒙秒，在當(dāng)中輸入網(wǎng)站localhost:8000打開(kāi)首頁(yè)勃黍，顯示如下頁(yè)面：

首頁(yè).png

對(duì)上述首頁(yè)進(jìn)行前端頁(yè)面優(yōu)化，打開(kāi)blog_list.html文件晕讲，添加如下內(nèi)容后的文件內(nèi)容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的網(wǎng)站</title>
</head>
<body>
<!-- blog_list.html -->
    <div>
        <a href="{% url 'home' %}">
            <h3>個(gè)人博客網(wǎng)站</h3>
        </a>
    </div>
    <hr>
<!-- 下一行中的blogs來(lái)自于views.py中的context['blogs'] = Blog.objects.all() -->
    {% for blog in blogs %}
    <!-- 下一行中的blog.title來(lái)自于models.py中的title = models.CharField(max_length=50) -->
        <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
        <p>{{ blog.content }}</p>
    {% endfor %}
</body>
</html>

對(duì)博客詳情頁(yè)面進(jìn)行前端頁(yè)面優(yōu)化覆获，打開(kāi)blog_detail.html文件榜田，添加如下內(nèi)容后的文件內(nèi)容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog.title }}</title>
</head>
<body>
    <!-- blog_detail.html -->
    <div>
        <a href="{% url 'home' %}">
            <h3>個(gè)人博客網(wǎng)站</h3>
        </a>
    </div>
    <h3>{{ blog.title }}</h3>
    <p>{{ blog.content }}</p>
</body>
</html>

對(duì)首頁(yè)進(jìn)行前端頁(yè)面優(yōu)化從而顯示總共的博客數(shù)量，有兩種方法可以實(shí)現(xiàn)锻梳。推薦方法1：打開(kāi)blog_list.html文件箭券，添加如下內(nèi)容后的文件內(nèi)容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的網(wǎng)站</title>
</head>
<body>
<!-- blog_list.html -->
    <div>
        <a href="{% url 'home' %}">
            <h3>個(gè)人博客網(wǎng)站</h3>
        </a>
    </div>
    <hr>
    <p>一共有{{ blogs|length }}篇博客</p>
    <!-- 方法2：{{ blogs_count }} -->
<!-- 下一行中的blogs來(lái)自于views.py中的context['blogs'] = Blog.objects.all() -->
    {% for blog in blogs %}
    <!-- 下一行中的blog.title來(lái)自于models.py中的title = models.CharField(max_length=50) -->
        <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
        <p>{{ blog.content }}</p>
    {% endfor %}
</body>
</html>

對(duì)首頁(yè)進(jìn)行前端頁(yè)面優(yōu)化從而顯示總共的博客數(shù)量，有兩種方法可以實(shí)現(xiàn)疑枯。方法2：打開(kāi)blog目錄下的views.py文件辩块，添加如下內(nèi)容后的文件內(nèi)容：

from django.shortcuts import render_to_response, get_object_or_404
from .models import Blog
# Create your views here.


def blog_list(request):
    context = {}
    context['blogs'] = Blog.objects.all()
    context['blogs_count'] = Blog.objects.all().count()  # 統(tǒng)計(jì)總共的博客數(shù)量
    return render_to_response('blog_list.html', context)


def blog_detail(request, blog_pk):
    context = {}
    context['blog'] = get_object_or_404(Blog, pk=blog_pk)
    return render_to_response('blog_detail.html', context)

當(dāng)全部刪除完所有博客后，對(duì)首頁(yè)進(jìn)行前端頁(yè)面優(yōu)化荆永，給出相應(yīng)的提示废亭。打開(kāi)blog_list.html文件，添加如下內(nèi)容后的文件內(nèi)容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的網(wǎng)站</title>
</head>
<body>
<!-- blog_list.html -->
    <div>
        <a href="{% url 'home' %}">
            <h3>個(gè)人博客網(wǎng)站</h3>
        </a>
    </div>
    <hr>
<!-- 下一行中的blogs來(lái)自于views.py中的context['blogs'] = Blog.objects.all() -->
    {% for blog in blogs %}
    <!-- 下一行中的blog.title來(lái)自于models.py中的title = models.CharField(max_length=50) -->
        <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
        <p>{{ blog.content }}</p>
    {% empty %}
        <p>--暫無(wú)博客具钥，敬請(qǐng)期待--</p>
    {% endfor %}
    <p>一共有{{ blogs|length }}篇博客</p>
</body>
</html>

當(dāng)有長(zhǎng)內(nèi)容的博客內(nèi)容時(shí)豆村，對(duì)首頁(yè)進(jìn)行前端頁(yè)面優(yōu)化，只顯示前面幾行的內(nèi)容骂删。打開(kāi)blog_list.html文件掌动，添加如下內(nèi)容后的文件內(nèi)容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的網(wǎng)站</title>
</head>
<body>
<!-- blog_list.html -->
    <div>
        <a href="{% url 'home' %}">
            <h3>個(gè)人博客網(wǎng)站</h3>
        </a>
    </div>
    <hr>
<!-- 下一行中的blogs來(lái)自于views.py中的context['blogs'] = Blog.objects.all() -->
    {% for blog in blogs %}
    <!-- 下一行中的blog.title來(lái)自于models.py中的title = models.CharField(max_length=50) -->
        <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
        <p>{{ blog.content|truncatechars:30 }}</p>  # |表示過(guò)濾器，{{ blog.content|truncatechars:30 }}表示只顯示博客內(nèi)容的前30個(gè)字
    {% empty %}
        <p>--暫無(wú)博客宁玫，敬請(qǐng)期待--</p>
    {% endfor %}
    <p>一共有{{ blogs|length }}篇博客</p>
</body>
</html>

打開(kāi)博客詳情頁(yè)面內(nèi)容文件blog_detail.html粗恢，添加作者信息等內(nèi)容后的文件內(nèi)容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog.title }}</title>
</head>
<body>
    <!-- blog_detail.html -->
    <div>
        <a href="{% url 'home' %}">
            <h3>個(gè)人博客網(wǎng)站</h3>
        </a>
    </div>
    <h3>{{ blog.title }}</h3>
    <p>作者: {{ blog.author }}</p>
    <p>發(fā)表日期: {{ blog.created_time|date:"Y-m-d G:i:s"}}</p>
    <p>分類(lèi): {{ blog.blog_type }}</p>
    <p>{{ blog.content }}</p>
</body>
</html>

關(guān)于網(wǎng)頁(yè)顯示時(shí)間與中國(guó)時(shí)間相差8小時(shí)的處理方法見(jiàn)該鏈接https://www.cnblogs.com/fixdq/p/9887575.html。

需求：例如點(diǎn)擊博客詳情頁(yè)面中顯示的分類(lèi):隨筆欧瘪，可以將屬于隨筆類(lèi)別的博客全部顯示出來(lái)眷射。首先打開(kāi)blog文件下的urls.py文件，添加如下內(nèi)容：

from django.urls import path
from . import views


urlpatterns = [
    # http:localhost:8000/blog/1
    path('<int:blog_pk>', views.blog_detail, name="blog_detail"),
    path('<int:blog_type_pk>', views.blogs_with_type, name="blogs_with_type"),
]

接著打開(kāi)blog文件下的views.py文件佛掖，添加blogs_with_type處理方法如下所示：

from django.shortcuts import render_to_response, get_object_or_404
from .models import Blog, BlogType
# Create your views here.


def blog_list(request):
    context = {}
    context['blogs'] = Blog.objects.all()
    return render_to_response('blog_list.html', context)


def blog_detail(request, blog_pk):
    context = {}
    context['blog'] = get_object_or_404(Blog, pk=blog_pk)
    return render_to_response('blog_detail.html', context)


def blogs_with_type(request, blogs_with_type):
    context = {}
    blog_type = get_object_or_404(BlogType, pk=blogs_with_type)
    context['blogs'] = Blog.objects.filter(blog_type=blog_type)
    context['blog_type'] = blog_type
    return render_to_response('blogs_with_type.html', context)

然后根據(jù)上一步中的views.py文件可知妖碉，還需要?jiǎng)?chuàng)建模板頁(yè)面。因此芥被，打開(kāi)blog文件夾下的templates文件目錄欧宜，增加blogs_with_type.html文件。如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog_type.type_name }}</title>
</head>
<body>
<!-- blog_list.html -->
    <div>
        <a href="{% url 'home' %}">
            <h3>個(gè)人博客網(wǎng)站</h3>
        </a>
    </div>
    <hr>
    <h3>{{ blog_type.type_name }}</h3>
<!-- 下一行中的blogs來(lái)自于views.py中的context['blogs'] = Blog.objects.all() -->
    {% for blog in blogs %}
    <!-- 下一行中的blog.title來(lái)自于models.py中的title = models.CharField(max_length=50) -->
        <a href="{% url 'blog_detail' blog.pk %}"><h3>{{ blog.title }}</h3></a>
        <p>{{ blog.content|truncatechars:30 }}</p>
    {% empty %}
        <p>--暫無(wú)博客撕彤，敬請(qǐng)期待--</p>
    {% endfor %}
    <p>一共有{{ blogs|length }}篇博客</p>
</body>
</html>

同時(shí)鱼鸠，對(duì)blog_detail.html文件進(jìn)行修改猛拴，修改部分如下：

<p>分類(lèi): {{ blog.blog_type }}</p>
---------------------- 修改為 --------------------------
<p>分類(lèi):
    <a href="{% url 'blogs_with_type' blog.blog_type.pk%} ">
        {{ blog.blog_type }}
    </a>
</p>

點(diǎn)擊博客詳情頁(yè)面分類(lèi)：隨筆羹铅，會(huì)出現(xiàn)如下錯(cuò)誤。原因是由于blog文件目錄下的urls.py文件中的路由設(shè)置有問(wèn)題愉昆，因此對(duì)該文件下的內(nèi)容進(jìn)行修改职员，如下所示：

錯(cuò)誤.png

from django.urls import path
from . import views


urlpatterns = [
    # http:localhost:8000/blog/1
    path('<int:blog_pk>', views.blog_detail, name="blog_detail"),
    path('type/<int:blog_type_pk>', views.blogs_with_type, name="blogs_with_type"),  # 增加一個(gè)type參數(shù)與上面一個(gè)路由進(jìn)行區(qū)分
]

點(diǎn)擊博客詳情頁(yè)面分類(lèi)：隨筆，會(huì)繼續(xù)出現(xiàn)上面的錯(cuò)誤跛溉。原因是由于blog文件目錄下的views.py文件中blogs_with_type()方法所傳入的參數(shù)blogs_with_type名稱(chēng)不對(duì)焊切，應(yīng)該傳入的參數(shù)名稱(chēng)為blog_type_pk扮授。因此對(duì)該文件下的內(nèi)容進(jìn)行修改，如下所示：
```
def blogs_with_type(request, blog_type_pk):
    context = {}
    blog_type = get_object_or_404(BlogType, pk=blog_type_pk)
    context['blogs'] = Blog.objects.filter(blog_type=blog_type)
    context['blog_type'] = blog_type
    return render_to_response('blogs_with_type.html', context)
```

2.常用的模板標(biāo)簽

常用的模板標(biāo)簽.png

3.常用的過(guò)濾器

常用的過(guò)濾器.png

3.本節(jié)結(jié)果展示

結(jié)果1.png

結(jié)果2.png

結(jié)果3.png

最后編輯于：2020.05.14 16:17:43

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末专肪，一起剝皮案震驚了整個(gè)濱河市刹勃，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌嚎尤，老刑警劉巖荔仁，帶你破解...
沈念sama閱讀 206,311評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異芽死，居然都是意外死亡乏梁，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,339評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)关贵，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)遇骑，“玉大人，你說(shuō)我怎么就攤上這事揖曾÷湮” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 152,671評(píng)論 0贊 342
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵炭剪，是天一觀的道長(zhǎng)模暗。經(jīng)常有香客問(wèn)我，道長(zhǎng)念祭，這世上最難降的妖魔是什么兑宇？我笑而不...
開(kāi)封第一講書(shū)人閱讀 55,252評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮粱坤，結(jié)果婚禮上隶糕，老公的妹妹穿的比我還像新娘。我一直安慰自己站玄，他們只是感情好枚驻，可當(dāng)我...
茶點(diǎn)故事閱讀 64,253評(píng)論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著株旷，像睡著了一般再登。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上晾剖，一...
開(kāi)封第一講書(shū)人閱讀 49,031評(píng)論 1贊 285
城市分裂傳說(shuō)
那天锉矢，我揣著相機(jī)與錄音，去河邊找鬼齿尽。笑死沽损，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的循头。我是一名探鬼主播绵估，決...
沈念sama閱讀 38,340評(píng)論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼炎疆，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了国裳？” 一聲冷哼從身側(cè)響起形入，我...
開(kāi)封第一講書(shū)人閱讀 36,973評(píng)論 0贊 259
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎缝左，沒(méi)想到半個(gè)月后唯笙，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,466評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡盒使，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,937評(píng)論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年崩掘，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片少办。...
茶點(diǎn)故事閱讀 38,039評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡苞慢，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出英妓，到底是詐尸還是另有隱情挽放，我是刑警寧澤，帶...
沈念sama閱讀 33,701評(píng)論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布蔓纠，位于F島的核電站辑畦，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏腿倚。R本人自食惡果不足惜纯出，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,254評(píng)論 3贊 307
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望敷燎。院中可真熱鬧暂筝，春花似錦、人聲如沸硬贯。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,259評(píng)論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)饭豹。三九已至鸵赖，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間拄衰，已是汗流浹背它褪。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1贊 262
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留肾砂，地道東北人列赎。一個(gè)月前我還...
沈念sama閱讀 45,497評(píng)論 2贊 354
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像镐确，于是被迫代替她去往敵國(guó)和親包吝。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,786評(píng)論 2贊 345