Django 模板相关问题求助

This topic created in 4157 days ago, the information mentioned may be changed or developed.

缘由比较长，不知道下面哪个地方可以改进，避免写出用{% block prev_url1 %}和{% block prev_url2 %}来表示同一个block的窘境。。。

1 要写一个响应式的页面，有一个表示页码的div，想要在宽屏下显示<上一页><页码><下一页>，窄屏下显示<上一页><下一页>。
用了semanticui，宽屏下div的class属性为three colum，窄屏下是two colum，用jquery的话要监听屏幕resize事件，再删除<页码>的div，改变class的属性，有点复杂，所以写了两个div，根据屏幕尺寸隐藏其中的一个。

2 Django中多个地方都要用到页码显示，写了list.html，其他模板extends list.html

3 上一页下一页的生成用了Django的paginate，生成一个上一页页码的过程如下：
{% if page_obj.has_previous %}
{% url 'post:category_view' current_category.slug %}?page={{ page_obj.previous_page_number }}
{% endif %}
因为各个view的网址规则不同，所以在我在list.html中创建了“page”block，“page”中需要两个block:prev_url 和 next_url,又因为我有两个页码div，每个block要用两回，所以产生了开头的问题。
（因为prev_url和next_url的生成太复杂了（判断是否存在上一页，字符串拼接，with xx as 之类太长了），所以没办法把在模板中把它们定义成variable传入“page”中）

stackoverflowflow上给出的blcok重用方式是block里再嵌套一个block，感觉还不如写成两个重复的block简单些。。
想问下上面哪个环节可以改进，谢谢。

Supplement 1 · Feb 9, 2015

问题解决，感谢@timonwong
添加custom tag：prev_url和next_url
{% block page %}
{% prev_url page_obj 'post:category_view' current_category.slug as prev_url %}
{{ block.super }}
{% endblock %}

页码

div

block

3 replies • 2015-02-09 21:24:59 +08:00

icodesign

Feb 9, 2015

我抱着学习的态度讨论下：

1. 这种简单的响应式建议用 css 处理，可以参考一下 @media ，这样就不用去维护 3 中的两个 div 了（我不是前端工程师，不知道这是不是最佳实践）
3. 既然你的 url 构造很复杂，我建议把这个扔到后台逻辑中，比如给 page_obj 加上个属性 next_url 之类的（我也不是后端工程师，不知道这是不是最佳实践）

timonwong

Feb 9, 2015

可以参考.NET MVC里面的 PagedList 实现。

python中得模板表达能力比较肉，django模板的表达能力比jinja2还要弱一点，实现起来可能不是非常通用就是了。

我之前模仿 PagedList 做了一个：
https://github.com/timonwong/pypagedlist
https://github.com/timonwong/flask-pagedlist

主要思路:
1. 使用 tag;
2. 该tag接收两个参数，一个是base url (reverse(xxx))，一个是 options （当然options也可以展开作为参数）
3. 在tag里面拼接HTML（如果需求不大，可以考虑使用 inclusion tag）
4. 尤其注意options: https://github.com/timonwong/pypagedlist/blob/master/pagedlist/web/options.py
5. 以及builder ： https://github.com/timonwong/pypagedlist/blob/master/pagedlist/web/builder.py ，写得过于通用，所以代码比较多。

regex

Feb 9, 2015

@icodesign 现在再用@media来完成display:none 但是改变class属性，删除某个div的工作没法靠css实现

@timonwong 谢谢，我用tag尝试下（之前想到过tag，但没想到reverse，不知道怎么完成{% url %}的处理... (ﾟДﾟ；) ）