Django搭建个人博客：锚点定位

**老读者注意：**上一章消息通知有个bug，即发给管理员的notify必须移动到new_comment.save()的后面，否则会导致action_object存储为NULL，并且导致本章的html拼接锚点失效。

原文已更正，为博主的疏忽表示歉意。

上一章已经实现了消息通知功能，可以很人性化的把用户引导到被他人回复的页面中去。

但是仔细想想，似乎还有不方便的地方：如果页面中评论较多，想找到感兴趣的那一条评论还是要费点功夫的。所以这个消息通知，最好是能够不仅前往正确的页面，还要前往正确的位置（需求是无穷无尽的…）。

为了实现这个功能，本章就要介绍一个非常古老的功能：锚点定位。以及如何在Django中实现它。

锚点是什么

我们在写html文件的容器时，经常会用到id属性：

<div id="fruit">apple</div>

这个id属性不仅可以作为Javascript或者css代码查询某个容器的标记，还可以作为锚点，定位页面应该前往的位置。输入下面的地址：

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

浏览器就会打开home页面，并且视窗前往id="fruit"的容器。

明白了锚点是什么，下面就通过三种不同的实现方法，看看锚点在Django博客项目中是如何应用的。

三种实现

html拼接

锚点首先要实现的功能，就是当管理员点击消息通知时，浏览器视窗前往此通知的评论位置。

因此首先修改文章详情页面，给渲染评论的div容器添加id属性：

templates/article/detail.html

...
<!-- 已有代码，遍历树形结构 -->
{% recursetree comments %}
{% with comment=node %}

<!-- 唯一新增代码：id属性 -->
<div class="..." id="comment_elem_{
    
    { comment.id }}" >

    ...

    <!-- 下面都是已有代码 -->
    <div class="children">
        {
  
  { children }}
    </div>
    {% endif %}
</div>

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

我们还是用comment.id来给每条评论赋予唯一的id值。注意id属性保持唯一性。前面在二级回复的Modal中用了comment_{ { comment.id }}，这里千万不要重复了。

然后修改通知列表模板，添加锚点：

templates/notice/list.html

...
{% for notice in notices %}