问题
我有以下模板:
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 }}. </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. </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
事件来实现跳转.