2017-09-25 26 views
0

我对Django模板的以下行为感到困惑,它阻止了我成功地设置样式输出。Django 1.10模板在其父对象之外呈现嵌套的HTML标签

也就是说,我有以下的模板:

<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源文件似乎是正确的,浏览器将其视为以下图像说明。

As you can see, the H4 tag and others are taken outside the <p> tag.

我缺少什么?模板是否不正确?或者这是我正在观察的错误?我在Safari和Firefox中尝试了这一点。结果是一样的。

回答

1

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

一个h元素不能进入p元素。