Jekyll张贴HTML

Question

有人可以提供有关如何使用Jekyll处理我的投资组合页面的一些指导或建议。 我的帖子通过变量和帖子内容的组合来处理大部分工作。 由于HTML和Markdown标记变得混乱，我在渲染帖子时遇到问题。

本质上，我想使用变量自动跨页面提取内容和信息。 即首页功能的标题，ID，首页图片和单个投资组合页面由{{content}}之间的所有内容驱动。 当我尝试解决帖子中的布局时，这就是问题所在。 从使用CSS选择器的预期HTML中可以看到，我正在尝试做一个“独特的”布局，这不像博客（内容和图像在页面上向下流动）那样，而是使用Neat＆Bourbon处理我的图像块和标题块。

有没有有效的方法可以做到这一点？

        ---
    category: Pitch
    featured: false
    publish: true
    layout: project
    type: website redesign

    id: "basil-haydens"

    role: "art direction, design"
    client: "Basil Hayden's"
    title: "Basil Hayden's"
    description: "A site built for true whiskey connoisseurs"

    summary: "Basil Hayden's, Whiskey. Among other things is a site geared toward true whiskey afficianados. With content curated by Max Wastler, the site features lifestyle content paired with recipes and traditional liquor site content making it a unique destination for whiskey connoissers."

    homeimage: hero.png
    images:
        - img-2.jpg
        - img-3.jpg
    backgroundColor: "RGB(226, 122, 15)" 
    accentColor: "#333"
    ---
    <section class="content">
    <div class="aside">
    ###### Credit
    - Designed at UnitOneNine.
    - Art Direction *Design–Amit Patel*
    - Walton Issacson
    </div>
    <div class="overview">
    <h6> Project Overview </h6>
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.
    </div>
    </section>
    <section class="content--images-three">
    <h6>Homepage</h6>
    <div class="span-6-12">
    ![My helpful screenshot](/images/{{ page.id }}/intro-1.jpg)
    </div>
    <div class="span-3-12">
    ![My helpful screenshot](/images/{{ page.id }}/intro-2.jpg)
    ![My helpful screenshot](/images/{{ page.id }}/intro-3.jpg)
    </div>
    </section>
    <section class="content--images-six">
    ######Final Designs
    ![My helpful screenshot](/images/{{ page.id }}/1.jpg)
    ![My helpful screenshot](/images/{{ page.id }}/2.jpg)
    ![My helpful screenshot](/images/{{ page.id }}/3.jpg)
    ![My helpful screenshot](/images/{{ page.id }}/4.jpg)
    ![My helpful screenshot](/images/{{ page.id }}/5.jpg)
    </section>
    <section class="content--images-three">
    <div class="span-6-12">
    ![My helpful screenshot](/images/{{ page.id }}/intro-1.jpg)
    </div>
    <div class="span-3-12">
    ![My helpful screenshot](/images/{{ page.id }}/intro-2.jpg)
    ![My helpful screenshot](/images/{{ page.id }}/intro-3.jpg)
    </div>
    </section>
    <section>
    <div class="span-8-12">
    ![My helpful screenshot](/images/{{ page.id }}/cocktail-club.jpg)
    </div>
    ###### Old Fashioneds before they were cool
    The crux of any liquor site, the recipes. Since curation was key, a basic recipe layout and design was used to account for varying assets and editability in Expression Engine.
    </section>

Answer 1

我不太了解您的问题，但是我相信您的问题是将markdown呈现为html。

在_config.yml文件中，设置：

markdown: kramdown

kramdown:
  parse_block_html: true
  parse_span_html: true

Answer 2

David Jacquel的答案最终使我找到了正确的答案，但是答案还不完整。 我将我的库从Markdown切换到Kramdown，并将用于解析html等的标志设置为true。

接下来，Kramdown支持为块元素添加“类”的快捷方式：

> A nice blockquote
{: .class1 .class2}

呈现为 ：

<blockquote class="class1 class2">
  <p>A nice blockquote</p>
</blockquote>

最后，我修改了我的jekyll标记以使用部分ID，可通过kramdown解析为HTML和传统的markdown标记，并使用以kramdown快捷方式传递的css类*。

我还用更少的部分和更少的HTML / CSS标记简化了布局。

结果……它起作用了，但是有人可能会认为它不像HTML标记那样干净。 的确如此，但是jekyll还是添加了包裹最前面内容的段落标签。

[*] http://kramdown.gettalong.org/quickref.html

Answer 3

由于答案已经过时，因为Jekyll现在支持kramdown ，因此_config.yml文件中的参数不是必需的。 如果您在编写markdown时需要在您的帖子中添加一个类，则只需使用以下语法...

> You want this to render as a blockquote in your html. But right now you are writing your post in markdown.
{: .your-class }

这应使用您在下面指定的类来呈现您的blockquote。