장고 bootstrap templates 활용해서 아이템 이쁘게 정돈하기

1. modulus (%) 연산 함수를 정의

vi templatetags/utils.py

# -*- coding: utf-8 -*-

from django.template.defaulttags import register


@register.filter

def mod( value, arg ):

  return value % arg

* templatetags 디렉토리 안에 __init__.py 파일 생성


2. 기본 html 수정

{% extends "brand/basic_frame.html" %}

{% block content %}

{% load utils %} 


<div class="pagination">

  <span class="step-links">

    <ul class="pagination">

    {% if contacts.has_previous %}

      <li><a href="?page={{ contacts.previous_page_number }}"> prev </a></li>

    {% endif %}

      <li><a href="#"> Page {{ contacts.number }} of {{ contacts.paginator.num_pages }}. </a></li>

    {% if contacts.has_next %}

      <li><a href="?page={{ contacts.next_page_number }}"> next </a></li>

    {% endif %}

  </ul>

  </span>

</div>


<div class="container">

  {% for d in contacts %}

    {% ifequal forloop.counter|mod:3 0 %}

    <div class="row">

    {% endifequal %}

      <div class="col-sm-4">

        <div class="panel panel-success">

          <div class="panel-heading"> {{forloop.counter}} {{d.pname}}</div>

          <div class="panel-body"><img src="{{d.imgurl}}" class="img-responsive" style="width:100%" alt="Image"></div>

          <div class="panel-footer">{{d.brand}}</div>

        </div>

      </div>

    {% ifequal forloop.counter|mod:3 0 %}

    </div>

    {% endifequal %}

  {% endfor %}

</div><br>


{% endblock %}


3. 기본 html에서 동작 확인


+ Recent posts