jinja2模板错位问题

2021-06-01 约 309 字预计阅读 1 分钟

问题

我有以下模板:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="grid">
    {% for item in data.data %}
    <a href={{ item.link }} class="card">
        <span class="cardindex">{{ loop.index }}. &nbsp;&nbsp;</span>
        <span class="cardtitle">{{ item.title }}</span>
        <div class="carddetail">
            <span class="cardate">{{ item.date }}</span>
            <a href={{ item.home }} class="cardhome">
                <span class="cardauthor">{{ item.author }}</span>
            </a>
        </div>
    </a>
    {% endfor %}
</div>

渲染之后看到浏览器显示是:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<a href="******" class="card">
    <span class="cardindex">1. &nbsp;&nbsp;</span>
    <span class="cardtitle">******</span>
</a>
<div class="carddetail">
    <a href="******" class="card">
        <span class="cardate">******</span>
    </a>
    <a href="******" class="cardhome">
        <span class="cardauthor">******</span>
    </a>
</div>

明显不符合要求, 按照模板的结构carddetail应该是card的child.

解决

通过渲染结果可以大概分析出是a标签嵌套导致的错位(TODO: 为什么嵌套a标签会导致错位?), 注释第二个a标签可以正确渲染.

那么, 解决方案如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="grid">
    {% for item in data.data %}
    <a href="{{ item.link }}" target="blank" class="card">
        <span class="cardindex">{{ loop.index }}. </span>
        <span class="cardtitle">{{ item.title }}</span>
        <div class="carddetail">
            <span class="cardate">{{ item.date }}</span>
            <span class="cardauthor cardhome" onclick="javascript:window.open('{{ item.home }}')">{{ item.author }}</span>
        </div>
    </a>
    {% endfor %}
</div>

移除了a标签, 并且使用onclick事件来实现跳转.