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

Question

我在Django模板來生成UL部分：

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

我想將它分裂以含有例如10個元素的列。我該怎麼做？

Answer 1

我想將它分成包含例如10個元素的列。我該怎麼做？

您是不是要找「分成10列」或「分成ñ列，其中包含每個不超過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

我認爲，最好的descision是使用CSS3列功能該任務 - 這將有更好的語義和搜索引擎優化人會很高興:)

現代瀏覽器已經可以分裂貴麗的成列。

我解決這樣同樣的問題：

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

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

好吧，以及有關舊的瀏覽器是什麼？我用Modernizr來得到broser是否支持css3-columns。如果沒有 - 我用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> 

這裏是什麼，我告訴columnizer做（列-trick.js）：

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