Create includes for greater layout flexibility

_includes/archive-single.html

@@ -22,7 +22,7 @@
             alt="{{ page.title }}">
         </div>
         {% endif %}
-      <h2 class="archive__item-title" itemprop="headline">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</h2>
+      <h2 class="archive__item-title" itemprop="headline">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}{% if post.link %}<i class="fa fa-star" aria-hidden="true"></i>{% endif %}</h2>
       {% if site.read_time and post.read_time %}<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>{% endif %}
       {% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
     </article>

_includes/page__hero.html

@@ -0,0 +1,12 @@
+<div class="page__hero">
+  <img src=
+    {% if page.header.image contains "http" %}
+      "{{ page.header.image }}"
+    {% else %}
+      "{{ page.header.image | prepend: "/images/" | prepend: base_path }}"
+    {% endif %}
+    alt="{{ page.title }}" class="page__hero-image">
+  {% if page.header.caption %}
+    <span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
+  {% endif %}
+</div>

_includes/sidebar.html

@@ -0,0 +1,20 @@
+{% if page.author_profile or page.sidebar %}
+  <div class="sidebar sticky">
+  {% if page.author_profile %}{% include author-profile.html %}{% endif %}
+  {% if page.sidebar %}
+    {% for s in page.sidebar %}
+      {% if s.image %}
+        <img src=
+        {% if s.image contains "http" %}
+          "{{ s.image }}"
+        {% else %}
+          "{{ s.image | prepend: "/images/" | prepend: base_path }}"
+        {% endif %}
+        alt="{% if s.image_alt %}{{ s.image_alt }}{% endif %}">
+      {% endif %}
+      {% if s.title %}<h3>{{ s.title }}</h3>{% endif %}
+      {% if s.text %}{{ s.text | markdownify }}{% endif %}
+    {% endfor %}
+  {% endif %}
+  </div>
+{% endif %}

_layouts/archive.html

@@ -2,7 +2,19 @@
 layout: default
 ---
 
-<div class="archive">
+{% if page.header.image %}
-  <h1 class="page__title">{{ page.title }}</h1>
+  {% include page__hero.html %}
-  {{ content }}
+{% endif %}
-</div><!-- /.archive -->
+
+{% if page.url != "/" and site.breadcrumbs and site.categories.type == "jekyll-archives" %}
+  {% include breadcrumbs.html %}
+{% endif %}
+
+<div id="main" role="main">
+  {% include sidebar.html %}
+
+  <div class="archive">
+    <h1 class="page__title">{{ page.title }}</h1>
+    {{ content }}
+  </div>
+</div>

_layouts/default.html

@@ -16,46 +16,7 @@ layout: compress
   {% include browser-upgrade.html %}
   {% include masthead.html %}
 
-  {% if page.header.image %}
+  {{ content }}
-    <div class="page__hero">
-      <img src=
-        {% if page.header.image contains "http" %}
-          "{{ page.header.image }}"
-        {% else %}
-          "{{ page.header.image | prepend: "/images/" | prepend: base_path }}"
-        {% endif %}
-        alt="{{ page.title }}" class="page__hero-image">
-      {% if page.header.caption %}
-        <span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
-      {% endif %}
-    </div>
-  {% endif %}
-
-  {% if page.url != "/" and site.breadcrumbs and site.categories.type == "jekyll-archives" %}
-    {% include breadcrumbs.html %}
-  {% endif %}
-
-  <div id="main" role="main">
-    {% if page.author_profile or page.sidebar %}<div class="sidebar sticky">
-      {% if page.author_profile %}{% include author-profile.html %}{% endif %}
-      {% if page.sidebar %}
-        {% for s in page.sidebar %}
-          {% if s.image %}
-            <img src=
-            {% if s.image contains "http" %}
-              "{{ s.image }}"
-            {% else %}
-              "{{ s.image | prepend: "/images/" | prepend: base_path }}"
-            {% endif %}
-            alt="{% if s.image_alt %}{{ s.image_alt }}{% endif %}">
-          {% endif %}
-          {% if s.title %}<h3>{{ s.title }}</h3>{% endif %}
-          {% if s.text %}{{ s.text | markdownify }}{% endif %}
-        {% endfor %}
-      {% endif %}
-    </div>{% endif %}
-    {{ content }}
-  </div>
 
   <div class="page__footer">
     <footer>

_layouts/single.html

@@ -4,62 +4,64 @@ layout: default
 
 {% include base_path %}
 
-<article class="page" itemscope itemtype="http://schema.org/CreativeWork">
+{% if page.header.image %}
-  {% if page.excerpt %}<meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
+  {% include page__hero.html %}
-  {% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %}
-  {% if page.modified %}<meta itemprop="dateModified" content="{{ page.modified | date: "%B %d, %Y" }}">{% endif %}
-
-  <div class="page__inner-wrap">
-    <header>
-      <h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
-      {% if site.read_time and page.read_time %}<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>{% endif %}
-    </header>
-
-    <section class="page__content" itemprop="text">
-      {{ content }}
-      {% if page.link %}<div><a href="{{ page.link }}" class="btn">{{ site.data.ui-text[site.locale].ext_link_label }}</a></div>{% endif %}
-    </section>
-
-    <footer class="page__meta">
-      {% if site.data.ui-text[site.locale].meta_label %}
-        <h4 class="page__meta-title">{{ site.data.ui-text[site.locale].meta_label }}</h4>
-      {% endif %}
-      {% include page__taxonomy.html %}
-      {% if page.modified %}
-        <p class="page__date"><strong>{{ site.data.ui-text[site.locale].date_label }}</strong> <time datetime="{{ page.modified | date: "%Y-%m-%d" }}">{{ page.modified | date: "%B %d, %Y" }}</time></p>
-      {% elsif page.date %}
-        <p class="page__date"><strong>{{ site.data.ui-text[site.locale].date_label }}</strong> <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time></p>
-      {% endif %}
-    </footer>
-
-    {% if site.share and page.share %}{% include social-share.html %}{% endif %}
-  </div>
-
-  {% if site.comments.provider and page.comments %}
-    <h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label }}</h4>
-    {% case site.comments.provider %}
-    {% when "disqus" %}
-      <section id="disqus_thread"></section>
-    {% when "facebook" %}
-      <section class="fb-comments" data-href="{{ base_path }}{{ page.url }}" data-num-posts="{{ site.comments.facebook.num_posts | default: 5 }}" data-width="{{ site.comments.facebook.width | default: 580 }}" data-colorscheme="{{ site.comments.facebook.colorscheme | default: 'light' }}"></section>
-    {% when "google-plus" %}
-      <section class="g-comments" data-href="{{ base_path }}{{ page.url }}" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD">Loading Google+ Comments ...</section>
-    {% when "custom" %}
-      <section id="comments"></section>
-    {% endcase %}
-  {% endif %}
-</article>
-
-{% comment %}<!-- only show related on a post page when not disabled -->{% endcomment %}
-{% if page.id and page.related and site.related_posts.size > 0 %}
-  <div class="page__related">
-    {% if site.data.ui-text[site.locale].related_label %}
-      <h4 class="page__related-title">{{ site.data.ui-text[site.locale].related_label }}</h4>
-    {% endif %}
-    <div class="grid__wrapper">
-      {% for post in site.related_posts limit:4 %}
-        {% include archive-single.html type="grid" %}
-      {% endfor %}
-    </div>
-  </div>
 {% endif %}
+
+{% if page.url != "/" and site.breadcrumbs and site.categories.type == "jekyll-archives" %}
+  {% include breadcrumbs.html %}
+{% endif %}
+
+<div id="main" role="main">
+  {% include sidebar.html %}
+
+  <article class="page" itemscope itemtype="http://schema.org/CreativeWork">
+    {% if page.excerpt %}<meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
+    {% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %}
+    {% if page.modified %}<meta itemprop="dateModified" content="{{ page.modified | date: "%B %d, %Y" }}">{% endif %}
+
+    <div class="page__inner-wrap">
+      <header>
+        <h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
+        {% if site.read_time and page.read_time %}<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>{% endif %}
+      </header>
+
+      <section class="page__content" itemprop="text">
+        {{ content }}
+        {% if page.link %}<div><a href="{{ page.link }}" class="btn">{{ site.data.ui-text[site.locale].ext_link_label }}</a></div>{% endif %}
+      </section>
+
+      <footer class="page__meta">
+        {% if site.data.ui-text[site.locale].meta_label %}
+          <h4 class="page__meta-title">{{ site.data.ui-text[site.locale].meta_label }}</h4>
+        {% endif %}
+        {% include page__taxonomy.html %}
+        {% if page.modified %}
+          <p class="page__date"><strong>{{ site.data.ui-text[site.locale].date_label }}</strong> <time datetime="{{ page.modified | date: "%Y-%m-%d" }}">{{ page.modified | date: "%B %d, %Y" }}</time></p>
+        {% elsif page.date %}
+          <p class="page__date"><strong>{{ site.data.ui-text[site.locale].date_label }}</strong> <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time></p>
+        {% endif %}
+      </footer>
+
+      {% if site.share and page.share %}{% include social-share.html %}{% endif %}
+    </div>
+
+    {% if site.comments.provider and page.comments %}
+      {% include comments.html %}
+    {% endif %}
+  </article>
+
+  {% comment %}<!-- only show related on a post page when not disabled -->{% endcomment %}
+  {% if page.id and page.related and site.related_posts.size > 0 %}
+    <div class="page__related">
+      {% if site.data.ui-text[site.locale].related_label %}
+        <h4 class="page__related-title">{{ site.data.ui-text[site.locale].related_label }}</h4>
+      {% endif %}
+      <div class="grid__wrapper">
+        {% for post in site.related_posts limit:4 %}
+          {% include archive-single.html type="grid" %}
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
+</div>