Question

我对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中试过这个。结果是一样的。

Answer 1

看看这个答案：

<h1>, <h2>, <h3>... tags, inline within paragraphs (<p>)

他们在那里进行了更深入的解释，但基本上<h1,2,3,4>标记中嵌入的<p>标记被浏览器视为非法，并自动关闭标记。使用其他标签，它应该可以解决您的问题。

Answer 2

不，这只是浏览器开发工具试图理解您的无效HTML。

h元素无法进入p元素。

Django 1.10模板在父项之外呈现嵌套HTML标签

2 个答案: