Jekyll发布HTML

时间:2015-02-16 16:57:01

标签: html css jekyll

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

基本上,我想使用变量来自动提取内容和内容。各页信息。即主页功能标题,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>

3 个答案:

答案 0 :(得分:1)

我真的不明白你的问题,但我相信你的问题是在html中呈现降价。

在_config.yml文件中,设置:

markdown: kramdown

kramdown:
  parse_block_html: true
  parse_span_html: true

答案 1 :(得分:1)

David Jacquel的回答最终使我找到了正确的答案,但它并不完整。我将我的库从Markdown切换到Kramdown并设置标志以解析html等等为真。

接下来,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

答案 2 :(得分:1)

由于答案已过时,因为Jekyll现在支持kramdown,因此_config.yml文件中的参数不是必需的。如果您需要在撰写降价时为帖子添加课程,只需使用以下语法...

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

这应该使用您指定的类来呈现您的blockquote。