219 lines
9.3 KiB
Handlebars
219 lines
9.3 KiB
Handlebars
{{!--
|
|
This template is used for the post page.
|
|
--}}
|
|
|
|
{{!-- This block preloads specific assets for the post page --}}
|
|
{{#contentFor "preload"}}
|
|
<link rel="preload" href="{{asset "css/post.css"}}" as="style" />
|
|
<link rel="preload" href="{{asset "js/post.js"}}" as="script" />
|
|
{{/contentFor}}
|
|
|
|
{{!-- This block loads specific styles for the post page --}}
|
|
{{#contentFor "styles"}}
|
|
<link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" media="screen" />
|
|
{{/contentFor}}
|
|
|
|
{{!-- The tag below means: insert everything in this file
|
|
into the {body} of the default.hbs template --}}
|
|
{{!< default}}
|
|
|
|
{{!-- Special header.hbs partial to generate the <header> tag --}}
|
|
{{#post}}
|
|
{{> header background=feature_image}}
|
|
{{/post}}
|
|
|
|
<main class="main-wrap">
|
|
{{#post}}
|
|
{{!-- Inject styles of the hero image to make it responsive --}}
|
|
{{> hero background=feature_image}}
|
|
</section>
|
|
{{/post}}
|
|
|
|
<article>
|
|
<div class="l-content in-post">
|
|
{{!-- Everything inside the #post tags pulls data from the post --}}
|
|
{{#post}}
|
|
<div class="l-wrapper in-post {{#unless feature_image}}no-image{{/unless}} js-aos-wrapper" data-aos="fade-up"
|
|
data-aos-delay="300">
|
|
<div
|
|
class="l-post-content js-progress-content">
|
|
<header class="m-heading">
|
|
<h1 class="m-heading__title in-post">{{title}}</h1>
|
|
<div class="m-heading__meta">
|
|
{{#if primary_tag}}
|
|
<a href="{{primary_tag.url}}" class="m-heading__meta__tag">{{primary_tag.name}}</a>
|
|
<span class="m-heading__meta__divider" aria-hidden="true">•</span>
|
|
{{/if}}
|
|
<span class="m-heading__meta__time">{{date published_at}}</span>
|
|
</div>
|
|
</header>
|
|
<div class="pos-relative js-post-content">
|
|
<div class="m-share">
|
|
<div class="m-share__content js-sticky">
|
|
<a href="https://twitter.com/intent/tweet?text={{encode title}}&url={{url absolute='true'}}"
|
|
class="m-icon-button filled in-share" target="_blank" rel="noopener" aria-label="Twitter">
|
|
<span class="icon-twitter" aria-hidden="true"></span>
|
|
</a>
|
|
<button class="m-icon-button filled in-share progress js-scrolltop" aria-label="{{t "Scroll to top"}}">
|
|
<span class="icon-arrow-top" aria-hidden="true"></span>
|
|
<svg aria-hidden="true">
|
|
<circle class="progress-ring__circle js-progress" fill="transparent" r="0" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{{content}}
|
|
{{!-- List of tags --}}
|
|
{{#if tags}}
|
|
<section class="m-tags in-post">
|
|
<h3 class="m-submenu-title">{{t "Tags"}}</h3>
|
|
<ul>
|
|
{{#foreach tags}}
|
|
<li>
|
|
<a href="{{url}}" title="{{name}}">{{name}}</a>
|
|
</li>
|
|
{{/foreach}}
|
|
</ul>
|
|
</section>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{!-- Email subscribe form at the bottom of the page --}}
|
|
<section class="m-subscribe-section js-newsletter">
|
|
<div class="l-wrapper in-post">
|
|
<div class="m-subscribe-section__content">
|
|
<div class="m-subscribe-section__text">
|
|
<h4 class="m-subscribe-section__title">{{t "Subscribe to our newsletter"}}</h4>
|
|
<p class="m-subscribe-section__description">
|
|
{{t "Get the latest posts delivered right to your inbox."}}
|
|
</p>
|
|
</div>
|
|
<div class="m-subscribe-section__form">
|
|
{{> "newsletter-form"}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="m-author">
|
|
<div class="m-author__content">
|
|
<div class="m-author__picture">
|
|
<a href="{{primary_author.url}}" class="m-author-picture" aria-label="{{primary_author.name}}">
|
|
{{#if primary_author.profile_image}}
|
|
<div style="background-image: url({{primary_author.profile_image}});"></div>
|
|
{{else}}
|
|
<div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
|
|
{{/if}}
|
|
</a>
|
|
</div>
|
|
<div class="m-author__info">
|
|
<h4 class="m-author__name">
|
|
<a href="{{primary_author.url}}">{{primary_author.name}}</a>
|
|
</h4>
|
|
{{#has author="count:>1"}}
|
|
<p class="m-small-text in-author-along-with">
|
|
{{authors separator=", " prefix=(t "Among with no break line") from="2"}}
|
|
</p>
|
|
{{/has}}
|
|
{{#if primary_author.bio}}
|
|
<p class="m-author__bio">{{primary_author.bio}}</p>
|
|
{{/if}}
|
|
<ul class="m-author-links">
|
|
{{#if primary_author.website}}
|
|
<li>
|
|
<a href="{{primary_author.website}}" target="_blank" rel="noopener" aria-label="{{t "Website"}}">
|
|
<span class="icon-globe" aria-hidden="true"></span>
|
|
</a>
|
|
</li>
|
|
{{/if}}
|
|
{{#if primary_author.twitter}}
|
|
<li>
|
|
<a href="https://twitter.com/{{primary_author.twitter}}" target="_blank" rel="noopener" aria-label="Twitter">
|
|
<span class="icon-twitter" aria-hidden="true"></span>
|
|
</a>
|
|
</li>
|
|
{{/if}}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{!-- If you want to embed comments, this is a good place to do it! --}}
|
|
{{!--
|
|
<section class="m-comments">
|
|
<div class="m-load-comments__iframe l-wrapper in-comments js-comments-iframe">
|
|
<div id="disqus_thread"></div>
|
|
<script>
|
|
var disqus_config = function () {
|
|
this.page.url = "{{url absolute="true"}}";
|
|
this.page.identifier = "ghost-{{comment_id}}"
|
|
};
|
|
(function () {
|
|
var d = document, s = d.createElement('script');
|
|
s.src = 'https://CHANGETHIS.disqus.com/embed.js';
|
|
s.setAttribute('data-timestamp', +new Date());
|
|
(d.head || d.body).appendChild(s);
|
|
})();
|
|
</script>
|
|
</div>
|
|
</section>
|
|
--}}
|
|
{{/post}}
|
|
{{!-- Related posts --}}
|
|
{{#if post.tags.length}}
|
|
{{#get "posts" limit="3" filter="tags:[{{post.tags}}]+id:-{{post.id}}" include="tags,authors" as |related|}}
|
|
<section class="m-recommended">
|
|
<div class="l-wrapper in-recommended">
|
|
<h3 class="m-section-title in-recommended">{{t "Recommended for you"}}</h3>
|
|
<div class="m-recommended-articles">
|
|
<div class="m-recommended-slider glide js-recommended-slider">
|
|
<div class="glide__track" data-glide-el="track">
|
|
<div class="glide__slides">
|
|
{{!-- The tag below iterates over all the related posts --}}
|
|
{{> "loop"}}
|
|
</div>
|
|
</div>
|
|
<div data-glide-el="controls" class="glide__arrows js-controls">
|
|
<button data-glide-dir="<" class="m-icon-button filled in-recommended-articles glide-prev" aria-label="{{t "Previous"}}">
|
|
<span class="icon-arrow-left" aria-hidden="true"></span>
|
|
</button>
|
|
<button data-glide-dir=">" class="m-icon-button filled in-recommended-articles glide-next" aria-label="{{t "Next"}}">
|
|
<span class="icon-arrow-right" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{/get}}
|
|
{{else}}
|
|
<section class="m-recommended">
|
|
<div class="l-wrapper in-recommended">
|
|
<h3 class="m-section-title in-recommended">{{t "Recommended for you"}}</h3>
|
|
<div class="m-recommended-articles">
|
|
<div class="m-recommended-slider glide js-recommended-slider">
|
|
<div class="glide__track" data-glide-el="track">
|
|
<div class="glide__slides">
|
|
<div class="m-recommended-slider__item glide__slide">
|
|
<div class="m-heading no-margin">
|
|
<h3>{{t "No posts found"}}</h3>
|
|
<p>
|
|
{{t "Apparently there are no posts at the moment, check again later."}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{/if}}
|
|
</div>
|
|
</article>
|
|
</main>
|
|
|
|
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
|
|
{{#contentFor "scripts"}}
|
|
<script defer src="{{asset "js/post.js"}}"></script>
|
|
{{/contentFor}}
|