CODEWITHSUNDEEP
includejekyll
The Oddler
The Oddler

Reputation: 6718

Jekyll, include markdown with layout in html

I have a website that consists out of a few 'slides'. Each has a fixed structure, used by some scripts, but variable content. I'm hosting it on github and am now trying to use Jekyll to make it easier to add new slides.

I already have each slide in a different html file, which I include in the main page: {% include_relative _slides/about.html %}. Now I'm trying to make it a markdown file, and I wanted to use front matter to make a layout that each slide's file could use. I can include a markdown file, and get it to render by doing:

{% capture myInclude %}{% include_relative _slides/test.md %}{% endcapture %}
{{ myInclude | markdownify }}

However, when I add a front-matter block to it with a layout defined in it, the layout doesn't get applied. It just gets rendered as a horizontal line (for the first ---) and then "layout: slide title: Test Slide —" in plain text.

Is there any way to fix this? Or perhaps a better way to break up my index.html and the slides in it?

Thanks a lot!

Note: Sorry if this was asked before, I Googled everything I could imagine it would be called.

Upvotes: 5

Views: 4308

Answers (2)

The Oddler
The Oddler

Reputation: 6718

I found something that works for me. I divided my template in two parts, the part above the content, and the part under it. Then in the file I include, there are two includes as well, one at the top and one at the bottom.

So my 'slide' files look like this:

{% include slide_start.html title="About" image="images/about.jpg" %}

... the content of the slide ...

{% include slide_end.html %}

As you can see, in the first include I give some parameters, these will be filled in and can be accessed with the liquid tags {{ include.something }}.

My slide_start.html looks like:

<div class="slide">
    <div class="header">
        <span>{{ include.title }}</span><!-- no whitespace
     --><img src="{{ include.image }}" alt="{{ include.title }}"/>
    </div>

    <div class="content" markdown="1">

the slide_end.html is just two closing div tags.

Upvotes: 3

David Jacquel
David Jacquel

Reputation: 52829

You're trying to mix the page/post and the include strategies.

  1. Page/post have a front matter and are decorated with a template, which can itself be decorated. `mypage.html -> layout: page -> layout: default.
  2. Includes are included in page/post but they are only code parts. They cannot be decorated with a template.

You will have to choose.

Take a lool at https://github.com/shower/jekyller this can be helpfull.

Upvotes: 1

Related Questions