使用 Django 模仿堆栈溢出的焦点/跳转到某个部分并从黄色高光效果淡出

Question

我喜欢SO的效果，当您单击左上角显示"堆栈交换"的通知时，SO将打开一个新页面，跳转到特定部分，然后以黄色突出显示该部分并淡出。

目前，我有一个评论表，位于一个长网站的底部。当评论发布失败验证时，我让 jQuery 滚动到表单并执行与 SO 相同的黄色突出显示效果。

这是我的（完美工作的）代码：

$(document).ready(function() {
    {% if focus %}
        // Focus
        $('html, body').animate({scrollTop: $('#{{ focus }}').offset().top }, 'slow')
        $('#{{ focus }}').effect("highlight", {}, 3000)
    {% endif %}
})

我的base.html中有这段代码，所以每个模板都会检查一个名为 focus 的模板变量。 focus只是一个字符串，用于保持<div>的id以执行黄色突出显示效果。

正如你所看到的，我觉得这有点被黑客入侵了。我需要在 Django 的views.py中使用render()在字典中传递focus。

我真正想做的是将其作为GET变量传递。像http://www.example.com/orders/2/?focus=comment_form.然后我可以使用Javascript获取该GET变量并进行突出显示效果。但是我不知道如何使用render()传递GET变量。

目前我的render()如下所示：

dictionary = get_orders_detail_dictionary(order=order, user=request.user, comment_form=form)
dictionary['focus'] = 'comment_form'
return render(request, 'doors/orders/detail.html', dictionary)

我想使用GET的原因是为了"永久链接"选项。

Answer 1

由于它是一个 GET 变量，因此可以从 request.GET 获得。由于您使用的是render快捷方式，因此您可以启用request上下文处理器以使request对象在模板中可用，此时您可以执行{{ request.GET.focus }}。

但是，对我来说，更好的选择是使用您自己的自定义上下文处理器，它将焦点参数提取到上下文变量中：

def get_focus(request):
    return {'focus': request.GET.get('focus', '')}

然后你可以像现在一样使用{{ focus }}。