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

参考这个问题