摘要：在父頁(yè)面中文章詳情模板添加需要執(zhí)行錨點(diǎn)拼接的函數(shù)新增函數(shù)，處理二級(jí)回復(fù)去除尾部符號(hào)刷新并定位到錨點(diǎn)函數(shù)中運(yùn)用了的三元運(yùn)算符，翻譯成人話就是如果成立則返回，如果不成立就返回。

老讀者注意：上一章消息通知有個(gè)bug，即發(fā)給管理員的notify必須移動(dòng)到new_comment.save()的后面，否則會(huì)導(dǎo)致action_object存儲(chǔ)為NULL，并且導(dǎo)致本章的html拼接錨點(diǎn)失效。
原文已更正，為博主的疏忽表示歉意。

上一章已經(jīng)實(shí)現(xiàn)了消息通知功能，可以很人性化的把用戶引導(dǎo)到被他人回復(fù)的頁(yè)面中去。

但是仔細(xì)想想，似乎還有不方便的地方：如果頁(yè)面中評(píng)論較多，想找到感興趣的那一條評(píng)論還是要費(fèi)點(diǎn)功夫的。所以這個(gè)消息通知，最好是能夠不僅前往正確的頁(yè)面，還要前往正確的位置（需求是無(wú)窮無(wú)盡的..）。

為了實(shí)現(xiàn)這個(gè)功能，本章就要介紹一個(gè)非常古老的功能：錨點(diǎn)定位。以及如何在Django中實(shí)現(xiàn)它。

我們?cè)趯?xiě)html文件的容器時(shí)，經(jīng)常會(huì)用到id屬性：

apple

這個(gè)id屬性不僅可以作為Javascript或者css代碼查詢某個(gè)容器的標(biāo)記，還可以作為錨點(diǎn)，定位頁(yè)面應(yīng)該前往的位置。輸入下面的地址：

http://www.myblog.com/home#fruit

瀏覽器就會(huì)打開(kāi)home頁(yè)面，并且視窗前往id="fruit"的容器。

明白了錨點(diǎn)是什么，下面就通過(guò)三種不同的實(shí)現(xiàn)方法，看看錨點(diǎn)在Django博客項(xiàng)目中是如何應(yīng)用的。

錨點(diǎn)首先要實(shí)現(xiàn)的功能，就是當(dāng)管理員點(diǎn)擊消息通知時(shí)，瀏覽器視窗前往此通知的評(píng)論位置。

因此首先修改文章詳情頁(yè)面，給渲染評(píng)論的div容器添加id屬性：

templates/article/detail.html

...

{% recursetree comments %}
{% with comment=node %}




    ...

    
    

        {{ children }}
    
    {% endif %}


{% endwith %}
{% endrecursetree %}
...

我們還是用comment.id來(lái)給每條評(píng)論賦予唯一的id值。注意id屬性保持唯一性。前面在二級(jí)回復(fù)的Modal中用了comment_{{ comment.id }}，這里千萬(wàn)不要重復(fù)了。

然后修改通知列表模板，添加錨點(diǎn)：

templates/notice/list.html

...
{% for notice in notices %}

    
    
        ...
    
    ...

{% endfor %}
...

注意這里url中拼接了兩種玩意兒：

跟在?后面的是查詢參數(shù)，用于給視圖傳遞參數(shù)，是之前寫(xiě)的舊代碼

跟在#后面的是錨點(diǎn)，也就是本章正在學(xué)的東東

?和#一個(gè)重要的差別，就是?不能夠傳遞到下個(gè)頁(yè)面的url中去，而#可以。

測(cè)試一下，用普通用戶賬號(hào)發(fā)幾條一級(jí)評(píng)論，登錄管理員賬號(hào)并點(diǎn)擊消息通知：

瀏覽器視窗沒(méi)有在頁(yè)面頂部，而是直接前往到該條評(píng)論處。

通過(guò)html拼接是實(shí)現(xiàn)錨點(diǎn)最簡(jiǎn)單直接的方法。

html拼接雖好，但它不是萬(wàn)能的。如果要前往一個(gè)當(dāng)前頁(yè)面還沒(méi)有創(chuàng)建的容器，該怎么辦？

舉個(gè)栗子。按照目前我們的博客設(shè)計(jì)，當(dāng)用戶發(fā)表評(píng)論時(shí)，頁(yè)面會(huì)刷新、視窗將停留在文章詳情的頂部。但實(shí)際上這時(shí)候視窗應(yīng)該停留在新發(fā)表的評(píng)論處才比較合理，因?yàn)橛脩艨赡芟霗z查一下自己發(fā)表的評(píng)論是否正確。而在原頁(yè)面時(shí)由于新評(píng)論都還沒(méi)發(fā)表，所以comment.id是不存在的，沒(méi)辦法用html拼接錨點(diǎn)。讀者好好思考一下是不是這樣。

這種情況下就需要在視圖中拼接錨點(diǎn)了。修改文章評(píng)論視圖，將錨點(diǎn)拼接到redirect函數(shù)中：

comment/views.py

...
# 文章評(píng)論視圖
def post_comment(request, article_id, parent_comment_id=None):
    ...
    # 已有代碼
    if request.method == "POST":
        ...
        if comment_form.is_valid():
            ...
            if parent_comment_id:
                ...
            new_comment.save()
            if not request.user.is_superuser:
                notify.send(...)

            # 新增代碼，添加錨點(diǎn)
            redirect_url = article.get_absolute_url() + "#comment_elem_" + str(new_comment.id)
            # 修改redirect參數(shù)
            return redirect(redirect_url)

get_absolute_url()是之前章節(jié)寫(xiě)的方法，用于查詢某篇文章的地址。

說(shuō)白了就是把拼接的位置從模板挪到了視圖中，因?yàn)樾略u(píng)論必須在視圖中保存之后才會(huì)被分配一個(gè)id值。

最后我們來(lái)看稍微復(fù)雜點(diǎn)的情況。

當(dāng)用戶發(fā)表一級(jí)評(píng)論時(shí)，我們?cè)谝晥D中拼接錨點(diǎn)解決了刷新當(dāng)前頁(yè)面并定位的問(wèn)題。但是二級(jí)評(píng)論是通過(guò)iframe + ajax實(shí)現(xiàn)的，這又該怎么辦？

理一理思路。

首先，新評(píng)論的id值是在視圖中創(chuàng)建的，但是由于視圖是從iframe中請(qǐng)求的，在視圖中沒(méi)辦法刷新iframe的父頁(yè)面。所以我們唯一能做的就是把數(shù)據(jù)傳遞出去，到前端去處理。

修改文章評(píng)論視圖：

comment/views.py

# 引入JsonResponse
from django.http import JsonResponse

...
# 文章評(píng)論視圖
def post_comment(request, article_id, parent_comment_id=None):
    article = get_object_or_404(ArticlePost, id=article_id)

    # 已有代碼
    if request.method == "POST":
        ...
        if comment_form.is_valid():
            ...
            if parent_comment_id:
                ...

                # 修改此處代碼
                # return HttpResponse("200 OK")
                return JsonResponse({"code": "200 OK", "new_comment_id": new_comment.id})

            ...

新引入的JsonResponse返回的是json格式的數(shù)據(jù)，由它將新評(píng)論的id傳遞出去。

json是web開(kāi)發(fā)中很常用的輕量級(jí)數(shù)據(jù)格式，非常像python的字典，讀者請(qǐng)自行了解。
特別提醒json格式必須用雙引號(hào)。

現(xiàn)在數(shù)據(jù)在iframe中了。但是我們需要刷新的是iframe的父頁(yè)面啊，所以還要繼續(xù)把數(shù)據(jù)往父頁(yè)面“扔"。

修改二級(jí)評(píng)論的模板：

templates/comment/reply.html

...

由于現(xiàn)在ajax獲取的是json數(shù)據(jù)，因此用e.code獲取視圖返回的狀態(tài)。

舊代碼用parent.location.reload()刷新了父頁(yè)面。同樣的，用parent.abc()可以調(diào)用父頁(yè)面的abc()函數(shù)。這樣就把數(shù)據(jù)傳遞到父頁(yè)面里去了。

這下就好說(shuō)了。在父頁(yè)面中（文章詳情模板）添加需要執(zhí)行錨點(diǎn)拼接的函數(shù)：

templates/article/detail.html

...

{% block script %}
...

{% endblock script %}

函數(shù)中運(yùn)用了JavaScript的三元運(yùn)算符a ? b : c，翻譯成人話就是：如果a成立則返回b，如果a不成立就返回c。作用是去掉url尾部的/，否則錨點(diǎn)不會(huì)生效。你可能會(huì)問(wèn)，三元運(yùn)算符多麻煩，為什么不直接把url末尾一個(gè)字符剔除掉呢？答案是這樣寫(xiě)代碼更加健壯。萬(wàn)一哪天Django解析的url尾部沒(méi)有斜杠了呢。

window.location.replace()作用是重定向頁(yè)面，在這里面終于可以愉快的拼接錨點(diǎn)了。

一切都OK啦。測(cè)試發(fā)表二級(jí)評(píng)論，運(yùn)氣好的同學(xué)應(yīng)該可以順利將視窗定位到剛評(píng)論的位置了。

感受到數(shù)據(jù)的流動(dòng)沒(méi)有？

本章學(xué)習(xí)了錨點(diǎn)的html拼接、視圖拼接、ajax+iframe綜合運(yùn)用，理解后就能應(yīng)付絕大部分的狀況了。

錨點(diǎn)雖然古老，但并不陳舊。

合理的運(yùn)用錨點(diǎn)，可以讓你的博客相當(dāng)?shù)娜诵曰@也是好網(wǎng)站的一個(gè)標(biāo)志。

有疑問(wèn)請(qǐng)?jiān)诙刨惖膫€(gè)人網(wǎng)站留言，我會(huì)盡快回復(fù)。

或Email私信我：dusaiphoto@foxmail.com

項(xiàng)目完整代碼：Django_blog_tutorial