I am trying to move my current website (HTML5, CSS, JS) to Jekyll (and plan to host on GitHub Pages vs. Azure where it is now). I want to edit in Markdown as constantly editing the HTML is so slow.
The biggest challenge I’m having is that I really like how I built my side with some pages having asides. You can see it on my site’s CV for instance. (Vince Arter, Jr.'s CV / Resume). I have a <section id="content">. Inside that I have <article> and <aside> tags. Hopefully, you can see where I’m going.
<section id="content">
<article id="article">Article content</article>
<aside id="aside">Aside content</aside>
</section>
I want to have one Markdown file that I can use with {{ content }} but cannot get it to work. I have tried some recommendations I found on StackOverflow around splitting the content, but it doesn’t work as it only puts one paragraph (unformatted) of each and skips the rest of my content. It uses the excerpt, but again it won’t pull all the content. This is the type of thing I’ve tried.
{% if post. Content contains '<!--more-->' %}
{{ post. Content | split:'<!--more-->' | first }}
{% else %}
{{ post. Content }}
{% endif %}
Is there anyway to more easily (and accurately) do something like an article and aside (which is standard HTML5 stuff) in Jekyll? I really like it so far, but this is stopping me from continuing my migration.
Many thanks!!!
My first guess is to suggest using a front matter variable for the aside. For example (untested code):
---
title: My Page
aside: |
## My Aside
This is the aside markdown. Note indenting for YAML multi-line literal.
---
This is the page content.
The layout for the page would output both the content and aside:
<main>
<aside>
{{ page.aside | markdownify }}
</aside>
{{ content }}
</main>
1 Like
Thanks, @chuckhoupt. I thought about that but some of my aside content is complex (like on my CV page). But it might be what I have to do.
Do you know, is there a way to do that in the front matter via an import? So I could have Markdown in a separate Mardown file or such.
I think you can import with a variable (untested code):
---
title: My Page
aside: myaside.md
---
Layout:
<aside>
{% import {{ page.aside }} %}
</aside>
Another option might be to use mixed HTML and Markdown, which is possible with Jekyll default Markdown processor Kramdown. For example, a page could be written like this (untested code):
---
title: My Page
---
<article markdown=1>
# Article Title
Article body.
</article>
<aside markdown=1>
## An Aside
Comments on the main article.
</aside>
I think Kramdown has configuration options to remove the need for markdown=1.
1 Like
Thanks again, @chuckhoupt. I’ll give both of those a try. I thought about option two but never tried it. Thanks for your advice. I’ll let you know how it goes.
Another variation to avoid extraneous HTML is to nest the aside inside the article (I believe this is ok, since your asides are always related to the article). This would give you:
---
title: My Page
---
# Article Title
Article body.
<aside markdown=1>
## An Aside
Comments related to this article.
</aside>
Layout:
<article>
{{ content }}
</article>
1 Like
Oooo. That’s cool. I plan to try all of these after work today!
Just a note that this version (aside: myaside.md) does not work. Jekyll / Liquid reports that import is not a valid tag. Going to try the others next.
Oh well. Didn’t work perfectly. I’ll keep at it. If you put the <aside> inside <article> the aside won’t show until the bottom. 
I changed to nested <div> and same issue. But you got me very close, @chuckhoupt.
@chuckhoupt, this winds up being the only solution that seems to work. See my comment below about nesting <aside> inside <article> which won’t work. Once I fix a small CSS issue and finish testing, I’ll post the listing if anyone else is interested in the solution.
Jekyll / Liquid do not easily support targeting Markdown content to different <section>, <div>, or specifically to <article> and <aside>. The only tenable work around is to include those tags in the actual Markdown files with the attribute markdown=1 on each and just using {{ content }} in the Liquid layout.
Note: It seems to be important to leave a space after / before the HTML tags or the Markdown doesn’t seem to get picked up correctly by the layout engine and renders as flat (unformatted) text.
=== Example ===
Markdown File
---
layout: default
title: Example
permalink: /example/
---
## {{page. Title}}
<article id="article" markdown=1>
### This is some Markdown content
Words words words.
More words. More words.
And more words and more words.
</article>
<aside id="aside" markdown=1>
### Some Aside Info
One
Two
Three
</aside>
Layout HTML File
<!-- Stuff probably comes before this. -->
<section id="content">
{{ content }}
<p class="clear"></p>
</section>
<!-- Stuff probably comes after this. -->
That’s the important stuff. If you do this it seems to work consistently and the bulk of the content management is still Markdown and not all the manually HTML tag formatting you’d need in a plain, static site.
Thanks. The solution I worked out from suggestions from chuckhoupt seem to be working well. I need to clean up some code but it is working. I might mess around with the include_relative and see if that makes the Markdown cleaner. I’m just stoked it is working now. 
For the <aside> inside <article> scheme, it might be possible to get the layout you want with CSS. For example, here’s a sketch using position relative/absolute:
Aside inside Article - JSFiddle - Code Playground
Of course, that’s just a sketch, so don’t underestimate the difficulty of integrating fiddly CSS with an existing layout. The solution you have may be the most practical.
Hi @VinnieDaArm. I don´t know if understand well, but you can see how I did mine aside in my business blog. I let you this sample: gurcoff.com/blog.
I use a layout for the post, liquid for the aside content, and CSS.
I got it working using <article markdown=1> and <aside markdown=1> tags in the Markdown file and it works fine. You can see it in action on my migration site: CV of Vince Arter, Jr. (varterjr.github.io).