Jekyll 用 HTML 发帖答案

【问题标题】：Jekyll posts with HTMLJekyll 用 HTML 发帖
【发布时间】：2015-02-16 16:57:01
【问题描述】：

有人可以就如何使用 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>

【问题讨论】：

谁能告诉我为什么我的问题是-1？我正在努力改进我未来的问题，但 StackExchange 文档对如何更正回答几乎没有帮助。

标签： html css jekyll

【解决方案1】：

我不太明白你的问题，但我相信你的问题是在 html 中呈现 markdown。

在您的 _config.yml 文件中，设置：

markdown: kramdown

kramdown:
  parse_block_html: true
  parse_span_html: true

【讨论】：

【解决方案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 标记，其中 css 类作为 kramdown 快捷方式传递*。

我还简化了布局，减少了部分和 HTML/CSS 标记。

结果...它可以工作，但是有人可能会说它不如 HTML 标记那么干净。确实如此，但添加的包含前端内容的段落标签仍然是 jekyll 的问题。

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

【讨论】：

【解决方案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 }

这应该使用您在下面指定的类呈现您的块引用。

【讨论】：