Question

我在Django模板中生成了ul部分：

<ul>
    {% for item in items %}
        <li>{{ item.name }}</li>
    {% endfor %}
</ul>

我想将它分成包含例如10个元素的列。我该怎么做？

Answer 1

我想将它分成包含例如10个元素的列。我该怎么做？

您的意思是“划分为10列”或“划分为 n 列，每行不超过10行”？通常最好修复列数（因为水平空间往往有限）。无论哪种方式，您都可以使用自定义模板标记执行此操作，如下所示：

from django import template
from itertools import chain, izip
import math

register = template.Library()

@register.tag
def colgroup(parser, token):
    """
    Usage:: {% colgroup items into 3 cols as grouped_items %}

    <table border="0">
        {% for row in grouped_items %}
        <tr>
            {% for item in row %}
            <td>{% if item %}{{ forloop.parentloop.counter }}. {{ item }}{% endif %}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </table>

    Outputs::
    ============================================
    | 1. One   | 1. Eleven   | 1. Twenty One   |
    | 2. Two   | 2. Twelve   | 2. Twenty Two   |
    | 3. Three | 3. Thirteen | 3. Twenty Three |
    | 4. Four  | 4. Fourteen |                 |
    ============================================
    """
    class Node(template.Node):
        def __init__(self, iterable, num_cols, varname):
            self.iterable = iterable
            self.num_cols = num_cols
            self.varname = varname

        def render(self, context):
            iterable = template.Variable(self.iterable).resolve(context)
            num_cols = self.num_cols
            context[self.varname] = izip(*[chain(iterable, [None]*(num_cols-1))] * num_cols)
            return u''

    try:
        _, iterable, _, num_cols, _, _, varname = token.split_contents()
        num_cols = int(num_cols)
    except ValueError:
        raise template.TemplateSyntaxError("Invalid arguments passed to %r." % token.contents.split()[0])
    return Node(iterable, num_cols, varname)

如果您熟悉Django's Custom Template tags，那么大部分应该是熟悉的。

Answer 2

我认为，最好的决定是使用 css3列功能来执行该任务 - 它会有一个更好的语义而SEO-guys会很高兴：）

现代浏览器已经可以将您的li分成列。

我解决了同样的问题：

.columns-x {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;

    column-gap: 20px;
    -moz-column-gap: 20px;    
    -webkit-column-gap: 20px;
}

好的，旧浏览器怎么样？如果broser支持css3-columns，我使用Modernizr来获取。如果没有 - 我使用jquery-columnizer

所以，这就是我在html中所做的：

<script type='text/javascript'>
    Modernizr.load({
        test:Modernizr.csscolumns,
        yep:'{{ STATIC_URL }}_b/columns/css/columns-pure.css', // this is .columns-x - you've seen it above
        nope:[ 
             // load columnizer plugin
            '{{ STATIC_URL }}_b/columns/js/jquery.columnizer.min.js', 
            //  tell it what to do
            '{{ STATIC_URL }}_b/columns/js/columns-trick.js'
        ]
    })
</script>

这就是我告诉专栏作家要做的事情（columns-trick.js）：

$(document).ready(function() {
    $('.columns-x').columnize({columns: 3});
});

如何将ul（li）分成Django模板中的列？

2 个答案: