Django 1.10 模板在其父级之外呈现嵌套的 HTML 标签

Posted 2023-02-24

技术标签:

【中文标题】Django 1.10 模板在其父级之外呈现嵌套的 HTML 标签【英文标题】：Django 1.10 Template Renders Nested HTML Tags Outside Their Parent 【发布时间】：2018-03-06 21:22:05 【问题描述】：

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

【问题讨论】：

【参考方案1】：

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

h 元素不能进入p 元素内。

【讨论】：

【参考方案2】：

看看这个答案：

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

他们在那里更深入地解释它，但基本上你的<h1,2,3,4>标签被嵌入到<p>标签中被浏览器认为是非法的，并且会自动关闭标签。使用不同的标签，它应该可以解决您的问题。

【讨论】：