Create includes for greater layout flexibility
This commit is contained in:
Michael Rose
parent
0e365ee248
commit
3663ba897a
6 changed files with 104 additions and 97 deletions
|
|
@ -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>
|
||||
|
|
|
|||
12
_includes/page__hero.html
Normal file
12
_includes/page__hero.html
Normal file
|
|
@ -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>
|
||||
20
_includes/sidebar.html
Normal file
20
_includes/sidebar.html
Normal file
|
|
@ -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 %}
|
||||
|
|
@ -2,7 +2,19 @@
|
|||
layout: default
|
||||
---
|
||||
|
||||
<div class="archive">
|
||||
<h1 class="page__title">{{ page.title }}</h1>
|
||||
{{ content }}
|
||||
</div><!-- /.archive -->
|
||||
{% if page.header.image %}
|
||||
{% include page__hero.html %}
|
||||
{% 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 %}
|
||||
|
||||
<div class="archive">
|
||||
<h1 class="page__title">{{ page.title }}</h1>
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -16,46 +16,7 @@ layout: compress
|
|||
{% include browser-upgrade.html %}
|
||||
{% include masthead.html %}
|
||||
|
||||
{% if page.header.image %}
|
||||
<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>
|
||||
{{ content }}
|
||||
|
||||
<div class="page__footer">
|
||||
<footer>
|
||||
|
|
|
|||
|
|
@ -4,62 +4,64 @@ layout: default
|
|||
|
||||
{% include base_path %}
|
||||
|
||||
<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 %}
|
||||
{% if page.header.image %}
|
||||
{% include page__hero.html %}
|
||||
{% 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>
|
||||
{% if page.url != "/" and site.breadcrumbs and site.categories.type == "jekyll-archives" %}
|
||||
{% include breadcrumbs.html %}
|
||||
{% endif %}
|
||||
|
||||
<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>
|
||||
<div id="main" role="main">
|
||||
{% include sidebar.html %}
|
||||
|
||||
<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>
|
||||
<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 %}
|
||||
|
||||
{% if site.share and page.share %}{% include social-share.html %}{% endif %}
|
||||
</div>
|
||||
<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>
|
||||
|
||||
{% 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>
|
||||
<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>
|
||||
|
||||
{% 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 %}
|
||||
<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>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% 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>
|
||||
Loading…
Reference in a new issue