layout for the homepage
<!– includes the code for the header –> {% include header.html %}
<!– displays the main content of the front page –> <main class=“page-content” aria-label=“Content”>
<div class="margin"> {% if page.content %} <div class="wrapper home-content"> {{ content }} </div> {% endif %} </div> <!-- displays the columns on the front page, if there's content for it set in the site's global comfiguration --> {% if site.home-columns %} <div class="dark-section"> <div class="wrapper"> <!-- displays as much columns as there's set in the site's global configuration --> {% for item in site.home-columns %} <div class="col"> <h3>{{ item.heading }}</h3> <p> {{ item.content }} </p> <!-- if a link is defined, displays it as a button --> {% if item.button-url %} <a href="{{ item.button-url }}" class="button" target="_blank"> {{ item.button-label }} </a> {% endif %} </div> {% endfor %} </div> </div> {% endif %} <div class="margin"> <!-- displays posts of the category that is set in the pages corresponding variable --> {% assign post_count = site.categories[page.show-category] | size %} {% if post_count > 0 %} <div class="wrapper posts-wrapper"> <!-- displays the tag filter, if the corresponding page variable is set --> {% if page.tag-filter %} <ul class="tag-list"> <li> <a href="#" class="button tag selected show-all">{{ page.show-all-filter-label }}</a> </li> <!-- goes through every tag of the entire site and checks if there are posts in the post category to show (as set in the pages front matter) with that tag. if so, then it displays a button for the tag --> {% assign sorted_tags = site.tags | sort %} {% for tag in sorted_tags %} {% assign zz = tag[1] | where: "category", page.show-category | sort %} {% if zz != empty %} <li> <a href="#" class="button tag" id="{{ tag[0] }}">{{ tag[0] }}</a> </li> {% endif %} {% endfor %} </ul> {% endif %} <!-- loop for displaying the posts --> {% assign post_limit = page.post-limit %} <!-- displays every post in the blog category to show (as set in the page's front matter) and limits the number of posts to display (also as set in the page's front matter) --> {% for post in site.categories[page.show-category] limit:post_limit %} <div class="post {% for tag in post.tags %} {{ tag }}{% endfor %}"> <!-- if there's a featured-image set in the posts front matter, then it's dipslayed alongside the content --> {% if post.featured-image %} <h2 class="dark with-img">{{ post.title }}</h2> <div class="post-contents"> <div class="left"> <img src="{{ post.featured-image }}" /> </div> <div class="right"> <!-- if there's a publishing-date set in the posts front matter, then it's displayed alongside the content --> {% if post.publishing-date %} <span class="date">{{ post.publishing-date }}</span> {% endif %} <p class="post-excerpt">{{ post.excerpt }}</p> <a class="button" href="{{ post.url | prepend: site.baseurl }}"> {{ site.post-button-label }} </a> </div> </div> <!-- loop that displays the posts without a featured image set --> {% else %} <h2 class="dark">{{ post.title }}</h2> <div class="post-contents"> <div class="left"> </div> <div class="right"> <!-- if there's a publishing-date set in the posts front matter, then it's displayed alongside the content --> {% if post.publishing-date %} <span class="date">{{ post.publishing-date }}</span> {% endif %} <p class="post-excerpt">{{ post.excerpt }}</p> <a class="button" href="{{ post.url | prepend: site.baseurl }}"> {{ site.post-button-label }} </a> </div> </div> {% endif %} </div> {% endfor %} </div> {% endif %} </div>
</main>
<!– includes the code for the header –> {% include footer.html %}