Page sections with varying styling

Help
1

I have pages with quite a bit of content on them. I want to make the content more appealing to the reader and not just a “wall of text”.

In order to do this, I want to divide the content up into sections that have varying styling and introduce imagery.
I find this pretty hard to do with jekyll.

Example pages that illustrate what I mean:

Here each subsection (H2 element and accompagnying text) is placed inside a

with a changing background color.

How can I do this with jekyll?

If I just put

around my markdown, then it gets treated as literal HTML.

Like:

<div class="section1">
## section 1
lorem ipsum

dolor amet...
</div>

This would just lead to the following content:

<div class="section1">## section 1 lorem ipsum dolor amet...</div>

and not expected

<div class="section1">
<h2>section 1</h2>
<p>
lorem ipsum
</p>
<p>
dolor amet...
</p>
</div>

Another approach that might work is to instead of haveing all the content in mypage.md, then have mypage.md, and then have that {{ include }} the content for each section and then have the html styling outside of the include.
While this might work, it would be a huge mess to organize. Firstly, because all the included files would have to just float around inside _include folder. Secondly, because the number of files would be huge. I am currently working on a single page that has 10 h2 subsections. I would then need 10 include pages just for that page alone. This site probably have at least 50 of such pages. So that is 500 include pages…
Thirdly, this approach would make it very difficult to actually change the content because I would have to open and manage 10 include pages just to change the content…

I think doing this type of page design with varying styles on sections is a pretty common pattern nowadays and thus, I hope there is a better way of doing this with jekyll. I am sure others have thought about this too.

2

I just went into Showcase | Jekyll • Simple, blog-aware, static sites and opened a few pages.

I assume all these are made with jekyll. I see multiple doing something like what I want to do.

Examples:

These sites do this to a varying degree.

Any idea how they do it?

PS. How does one get their site on the Jekyll Showcase?

3

Update: I just wanted to share something that I tried but didnt work:

Since this type of section all consist of the same html pattern:

$PREFIX_HTML
$MARKDOWN_CONTENT
$SUFFIX_HTML

Where $PREFIX_HTML would be something like this:

<div class="section1 bgblue">
	<div class="row">
		<div class="col">
		<img src="foo.png">
		</div>
		<div class="col">

and $MARKDOWN_CONTENT would just be regular content like this:

## section 1
lorem ipsum

dolor amet...

and $SUFFIX_HTML would then be HTML to close the divs, like this:

		</div>
	</div>
</div>

I figured I could have two include files for these sections: One to include at the start of each section containing $PREFIX_HTML and one to include at the end of each section containing $SUFFIX_HTML.

However, this approach does not seem to work. What happens is that the markdown content going in between is not rendered. It is just presented as plain text with ##foo instead of <h2>foo</h2> :frowning:

4

If you’re using Jekyll’s default Markdown processor (Kramdown), then you can mix HTML and Markdown by using the markdown attribute. Like this:

<div class="section1" markdown="1">
## section 1

Paragraph...

</div>
5

Wow, this is exactly what I am looking for, I think! Thanks.

6

So I guess I was too quick in my excitement here. I tried this and it does not seem to work.

This

<div class="row" markdown="1">                                                   
<div class="col">                                                                
                   
**foo**

* item 1
* item 2    
                                                                                 
</div>                                                                           
<div class="col">                                                                
</div>                                                                           
</div>

Just ends up as:

**foo** * item 1 * item 2

Not sure what I am doing wrong?

7

you might need it on either all the html tags or the one that is the parent of the md content. So add it to the col div and see what happens

1 Like
8

Ah! This fixed it. Thanks.
So I guess the conclusion is that I need it on all tags containing markdown…

9

to render inline markdown in a html template file you’d can capture it to a variable or assign it to a string. It’s a little cumbersome and the question is if this is a layout file or include file, then probably pure html is better choice and more maintainable than actually rendering markdown in the include or layout file… but, in order to actually do this. you might do something like:

{% capture section_markdown %}

# Section 1

**foo**

* item 1

* item 2

...

etc

{% endcapture %}

{{ section_markdown | markdownify }}

Personally, I try NOT to include regular Html in the the markdown pages themselves unless its a last resort… and I try to limit any sort of dynamic tags or processing to only liquid tags or actual markdown. I assume this was in a page file or post file ending in .md? Either way, this will work even in a template or include.

However, if you want the “over-engineered solution” you can include {% include section.html %} and in that html file, you can iterate over page.section, which is what I do:

title: Title
subtitle: Page Subtitle 
section: 
 - container: is-fluid is-fullhd
   title: section 1 
   color : is-primary
 - container: is-fluid is-fullhd
  title: section 2
  color: is-secondary
- container: is-fluid is-fullhd
  title: section 3
  color: is-black

And the colors refer to CSS classes which will allow me to style each section, such as the footer, or just a page can be made up of multiple sections, each with their own class (which correspond to the background color, or font, text alignment, etc. this is probably a better way, rather than typing out the HTML manually each time you watn to adjust the section in your markdown (in my opinion)

And here’s the relevant part of my page.html

{% assign layout_sections = layout.sections | sort_by: 'order' %}
{% assign page_sections = page.sections | sort_by: 'order' %}
{% if page_sections.first %}
{% for p_section in page_sections %}
{% assign sec_no = forloop.index %}
{% include layout/section.html section=p_section sec_no=sec_no route='page' %}
{% endfor %}
{% endif %}

Here’s the relevant part of section.html where the color class is specified from the page’s front matter.

{% assign section = include.section %}
{% assign section_content = include.content %}
{% assign sec_no = include.sec_no %}
{% assign section_route = inlcude.route %}

<section class="section {{section.css | default: 'section-header' }} {{ section.height | default: '' }}  {{ section.color | default: 'has-background-darkblue-dark' }}">
    <div class="container {{ section.container | default: 'is-fullhd is-fluid-touch' }}">

Might seem like overkill, but once you have the code done once, you dont have to insert any html ever again (at least for sections anyway)