The process of building this site
Multiple Sections
To be able to style all posts differently, I hade to come up with a sollution to add multiple sections in a markdown file.
First I tried to using an variable-list-array:
sections:
- Lorem ipsum section 1.
- |
## Headline for section 2
Lorem ipsum section 2 with multiple lines and markdown
And then print out the sections in the layout:
<div>{{ page.sections[0] | markdownify }}</div>
<div>{{ page.sections[1] | markdownify }}</div>
<div>{{ page.sections[2] | markdownify }}</div>
But it wasn’t possible to add the markdownify filter to the array items. So hade to break up the sections in individual variables. I also checked if the current variable wasn’t null (nil) to prevent the codeblock from executing in case the variable wasn’t set.
{% unless page.section1 == nil %}
<div class="section section--1">
<div class="text-content">
{{ page.section1 | markdownify }}
</div>
</div>
{% endunless %}
Custom JS
To add custom javascript files to different post, I used this sollution described by Emma Tosch. First I addes the URL to the files in the post
scripts:
- vivus.js
- curious/speed-bumps.js
Then in the layout, I looped trough the files and inlined them:
{% for js in cc.scripts %}
{% assign root = 'js/' %}
<script type="text/javascript">
{% include {{ root | append: js }} %}
</script>
{% endfor %}
The js files are located in the include/js folder