我对Django模板的以下行为感到有点困惑,这使我无法成功地设计输出样式。你知道吗
也就是说,我有以下模板:
<article class="article
{% if article.is_featured %} featured{% endif %}
{% if not article.published %} unpublished{% endif %}">
{% if not detail_view %}
<div class="post-preview">
<a href="{% namespace_url 'article-detail' article.slug namespace=namespace default='' %}">
<h2 class="post-title">
{% render_model article "title" "" "" "striptags" %}
</h2>
{% if article.lead_in %}
<h3 class="post-subtitle">
{% if not detail_view %}
{% render_model article "lead_in" "" "" "truncatewords:'20'|striptags" %}
{% else %}
{% render_model article "lead_in" "" "" "striptags" %}
{% endif %}
</h3>
{% endif %}
</a>
<p class="post-meta" style="margin-bottom: 0;"> Posted by
{% include "aldryn_newsblog/includes/author.html" with author=article.author %}
on {{ article.publishing_date|date:"F d, Y" }}
</p>
<p class="post-meta" style="margin: 0">
<h4 style="display:inline-flex">Categories:</h4>
{% for category in article.categories.all %}
<a href="/articles/category/{{category.name|lower}}">{{ category.name }} {% if not forloop.last %}, {% endif %}</a>
{% endfor %}
</p>
<p class="post-meta" style="margin: 0">
<h4 style="display:inline-flex">Tags:</h4>
{% for tag in article.tag %}
<a href="/articles/category/{{tag.name|lower}}">{{ tag.name }} {% if not forloop.last %}, {% endif %}</a>
{% endfor %}
</p>
</div>
<hr>
{% endif %}
{% if detail_view %}
<!-- <h3>Testing template! (from article with detail_view=True)</h3> -->
{% render_placeholder article.content language placeholder_language %}
{% endif %}
</article>
此模板的输出大致如下:
<article class="article">
<div class="post-preview">
<a href="/articles/third-post/">
<h2 class="post-title">
Third Post
</h2>
<h3 class="post-subtitle">
Third post lead-in text.
</h3>
</a>
<p class="post-meta" style="margin-bottom: 0;"> Posted by
<a href="">
</a>
on September 19, 2017
</p>
<p class="post-meta" style="margin: 0">
<h4 style="display:inline-flex">Categories:</h4>
<a href="/articles/category/programming">Programming </a>
</p>
<p class="post-meta" style="margin: 0">
<h4 style="display:inline-flex">Tags:</h4>
</p>
</div>
<hr>
</article>
尽管源HTML看起来是正确的,但浏览器将其视为下图所示。你知道吗
我错过了什么?模板是否不正确?或者这是我观察到的虫子?我在Safari和Firefox上试过这个。结果是一样的。你知道吗
不,那只是浏览器开发工具试图理解无效的HTML。你知道吗
h
元素不能进入p
元素内部。你知道吗看看这个答案:
<h1>, <h2>, <h3>... tags, inline within paragraphs (<p>)
他们在这里更深入地解释了这一点,但基本上,浏览器认为嵌入在
<p>
标记中的<h1,2,3,4>
标记是非法的,并且会自动关闭这些标记。使用不同的标签,它应该可以解决你的问题。你知道吗相关问题 更多 >
编程相关推荐