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

如何解决Jekyll 在父标签外渲染内部元素

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

以下 HTML 片段：

<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 元素之外。这是为什么？

解决方法

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

如果 p 元素后紧跟地址、文章、旁白、块引用、详细信息、div、dl、字段集、figcaption、图形、页脚、表单、h1、h2、h3，则可以省略 p 元素的结束标记， h4、h5、h6、header、hgroup、hr、main、menu、nav、ol、p、pre、section、table 或 ul 元素，或者如果父元素中没有更多内容并且父元素是一个 HTML 元素，它不是 a、audio、del、ins、map、noscript 或 video 元素，也不是自治的自定义元素。

因此您必须使用另一个包含标记（即 div），或者将 ul 作为 p 的兄弟处理。