Jekyll 在父标签外渲染内部元素答案

【问题标题】：Jekyll rendering inner element outside parent tagJekyll 在父标签外渲染内部元素
【发布时间】：2021-07-02 16:15:06
【问题描述】：

我正在使用 Hydejack Jekyll 模板创建一个网站。

以下 HTML sn-p：

<p class="note">
      <ul>
        <li>Programming Concepts</li>
        <li>Program Analysis</li>
        <li>Data Structures & Algorithms</li>
        <li>Databases</li>
        <li>Fundamentals of Machine Learning</li>
        <li>Natural Language Engineering</li>
      </ul>
</p>

和相关的 SCSS：

.note-sm {
  @extend .message;
  background: transparent;
  color: var(--body-color);
  font-size: smaller;
  border-left: 1px solid var(--border-color);
  padding: 1.2rem 1rem 0 1rem;
  margin: 1rem -1rem;
  position: relative;

  &:before {
    font-size: 0.667rem;
    font-weight: bold;
    font-style: normal;
    letter-spacing: .025rem;
    text-transform: uppercase;
    color: var(--menu-text);
    position: absolute;
    top: 0;
  }

  &[title]:before {
    content: attr(title)!important;
  }
}

.note {
  @extend .note-sm;
  font-size: 1rem;
}

呈现为：Outside tag

ul 元素在 p 元素之外。这是为什么呢？

【问题讨论】：

标签： sass jekyll liquid

【解决方案1】：

根据specification，有些标签暗示p标签的结束：

如果 p 元素后面紧跟着地址、文章、aside、blockquote、details、div、dl、fieldset、figcaption、figure、footer、form、h1、h2、h3，则可以省略 p 元素的结束标记h4、h5、h6、header、hgroup、hr、main、menu、nav、ol、p、pre、section、table 或 ul 元素，或者如果父元素中没有更多内容并且父元素是不是 a、audio、del、ins、map、noscript 或 video 元素或自主自定义元素的 HTML 元素。

所以你必须使用另一个包含标签（即div），或者将ul作为p的兄弟来处理。

【讨论】：