jinja2问题集锦

用jinja2写模板的时候遇到了一些问题，记录一下

抽出base.html作为模板

之前的小项目写得都很不规范，模板都是能用就行，基本上只用到if语句，for语句和变量。导航栏都是复制粘贴，没有把共同的部分抽出来。写模板的时候还应该注意一下不要直接在原来的html上改，这样容易把html改乱，应该新建一个template目录，再一个个写模板，这样更好。

参照jinja2的文档抽出公共部分，如

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{% block head %}
<link rel="stylesheet" href="style.css" />
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
    <body>
        <div id="content">{% block content %}{% endblock %}</div>
        <div id="footer">
        {% block footer %}
        &copy; Copyright 2008 by <a href="http://domain.invalid/">you</a>.
        {% endblock %}
    </div>
</body>

在子模板中填充对应的block就行，如

    {% block title %}
    我是标题
    {% endblock %}

对于在base.html里有但是子模板里木有的block，对应位置会采用base.html里的内容。

导航栏怎么设置为active?

很多用到导航栏的情况都会有当前所在位置高亮的设置，假设CSS中.active设为高亮了，那么在jinja2中就能给base.html传值，如：

<ul class="bd clearfix">
            <li class="team clearfix {% if active == "team" %}now{% endif %}">
                <a href="/team">
                    <div class="circle circle1" title="团队介绍"></div>
                    <div class="hover-wrap"></div>
                    <div class="title">
                        <p class="en">Team Introduction</p>
                        <p class="ch">团队介绍</p>
                    </div>
                </a>

            </li>
            <li class="group clearfix {% if active == "group" %}now{% endif %}">
                <a href="/group">
                    <div class="circle circle2" title="各组介绍"></div>
                    <div class="hover-wrap"></div>
                    <div class="title">
                        <p class="en">Group Introduction</p>
                        <p class="ch">各组介绍</p>
                    </div>
                </a>
            </li>

            <li class="pro clearfix {% if active == "works" %}now{% endif %}">
                <a href="/works">
                    <div class="circle circle3" title="陈列室"></div>
                    <div class="hover-wrap"></div>
                    <div class="title">
                        <p class="en">Portfolio</p>
                        <p class="ch">陈列室</p>
                    </div>
                </a>
            </li>


            <li class="part clearfix {% if active == "partner" %}now{% endif %}">
                <a href="/partner">
                    <div class="circle circle4" title="成员风采"></div>
                    <div class="hover-wrap"></div>
                    <div class="title">
                        <p class="en">Our Partner</p>
                        <p class="ch">成员风采</p>
                    </div>
                </a>
            </li>


            <li class="re clearfix">
                <a href="http://hr.bingyan.net/" target="_blank">
                    <div class="circle circle5" title="历届招新"></div>
                    <div class="hover-wrap"></div>
                    <div class="title">
                        <p class="en">Recruit</p>
                        <p class="ch">历届招新</p>
                    </div>
                </a>
            </li>
        </ul>

在子模板中，向base.html传active的值就行了，我们不只可以通过py文件向jinja2传值，还能在不同模板之间传值

{% extends "base.html" %}
{% set active = "group" %}

这样导航栏就能根据相应的内容显示高亮的li了！更多内容参考官方文档

如何获取列表的长度？

jinja2支持很多Python的语法，于是我尝试调用len(lst)函数，会报错。
要获取列表的长度，应该写成lst|length或是它的别称lst|count
参考这个问题

posted @ 2014-09-10 19:47  mrzero  阅读(2972)  评论(0)  编辑  收藏  举报