clean code

i create stuff

[老博文迁移]jinja2模板使用经验

| Comments

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

抽出base.html作为模板

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

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

(jinja0.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!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就行，如 对于在base.html里有但是子模板里没有的block，对应位置会采用base.html里的内容

(jinja1.html) download
1
2
3

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

导航栏怎么设置为active?

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

(jinja2.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<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传值，还能在不同模板之间传值

(jinja3.html) download
1
2

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

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

如何获取列表的长度？

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

2014-9-10 于博客园

迁移批注:
这篇博文由于包含jinja2的模板语法, 在解析时会与liquid发生冲突而报错, 于是我采用载入代码文件的方式解决了这个问题!

Comments