Include markdown file in html file

Question

In Jekyll, I have created a layout file dev.html which is already using some other layout: default but that is not important.

dev.html

---
layout: default
title: Developer
---
<div>
{{ want to include page1.md }}
</div>

<div>
{{ want to include page2.md }}
</div>

Now, I have those 2 markdown pages which I need to include somehow in dev.html file. How can I do that? I have tried using variable {{content}} but that would include both pages at once in the dev.html file.

page1.md

---
layout: dev
---
page1 file content in markdown...

page2.md

---
layout: dev
---
page2 file content in markdown...

You have this tagged [jekyll]. Jekyll has a way to do this (the HTML is a "template" and the Markdown document is a "page". How does Jekyll not work for you? — Waylan
– Waylan, Commented Feb 26, 2018 at 18:04
I am trying to do that also using variables but no luck yet. I have created layout and in layout I want to use variables to display for example 3 different .md files but don't know how to use those variables. — Ady96
– Ady96, Commented Feb 26, 2018 at 18:44
Ah, that was not clear from you question. Please include more information so we can help you. Don't use a comment, but edit your question. — Waylan
– Waylan, Commented Feb 26, 2018 at 18:48
Possible duplicate of How to render two files from a single markdown — Kevin Workman
– Kevin Workman, Commented Feb 27, 2018 at 1:29

Christian Specht · Accepted Answer · 2018-02-28 21:21:45Z

As far as I know, it's not possible to "load" two different pages in a layout file.

Do the pages HAVE to have YAML front-matter?
If not, I have a different solution for you: use Jekyll's Includes.

The way how includes work is basically this:

You put some HTML files in the _includes folder, for example foo.html
You can include their content into another file like this: {% include foo.html %}

The only problem is that by default, includes are supposed to be HTML files. But it's possible to use a Markdown file as an include, and render the Markdown by using Liquid's markdownify filter.

Example:

dev.html

(regular page, not layout file)

---
layout: default
title: Developer
---
<div>
{% capture p1 %}{% include page1.md %}{% endcapture %}
{{ p1 | markdownify }}
</div>

<div>
{% capture p2 %}{% include page2.md %}{% endcapture %}
{{ p2 | markdownify }}
</div>

page1.md

(without front-matter)

page1 file content in markdown...

page2.md

(without front-matter)

page2 file content in markdown...

Mr. Hugo · Accepted Answer · 2018-03-01 14:28:11Z

0

I would do this:

---
layout: default
title: Developer
---
<div>
  {% assign sitepages = site.pages | where: "slug", "page1" %}
  {% for p in sitepages %}
    {{ p.content }}
  {% endfor %}
</div>

<div>
  {% assign sitepages = site.pages | where: "slug", "page2" %}
  {% for p in sitepages %}
    {{ p.content }}
  {% endfor %}
</div>

answered Mar 1, 2018 at 14:28

Mr. Hugo

12.7k3 gold badges47 silver badges66 bronze badges

Collectives™ on Stack Overflow

Include markdown file in html file

2 Answers 2

dev.html

page1.md

page2.md

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

dev.html

page1.md

page2.md

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related