2017-09-25 55 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元素。