casper-i18n/post.hbs
2017-06-08 09:19:22 +02:00

241 lines
9.6 KiB
Handlebars

{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!-- The big featured header, it uses blog cover image as a BG if available --}}
<header class="site-header outer">
<div class="inner">
<nav class="site-nav">
<div class="site-nav-left">
{{#if @blog.logo}}
<a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
{{/if}}
{{#if @blog.navigation}}
{{!-- The blog navigation links from /ghost/settings/design --}}
{{navigation}}
{{/if}}
</div>
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url}}">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url}}">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}
<a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
{{else}}
<a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
{{/if}}
</div>
</nav>
</div>
</header>
{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}
{{!-- Floating header which appears on-scroll, pulled from includes/floating-header.hbs --}}
{{> floating-header}}
<main id="site-main" class="site-main outer" role="main">
<div class="inner">
<article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
<header class="post-full-header">
<section class="post-full-meta">
<time class="post-full-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMMM YYYY"}}</time>
{{#if tags}}
<span class="date-divider">/</span> <a href="{{@blog.url}}tag/{{tags.[0].slug}}">{{tags.[0].name}}</a>
{{/if}}
</section>
<h1 class="post-full-title">{{title}}</h1>
</header>
{{#if feature_image}}
<figure class="post-full-image" style="background-image: url({{feature_image}})">
</figure>
{{/if}}
<section class="post-full-content">
{{content}}
</section>
{{!-- Email subscribe form at the bottom of the page --}}
{{#if @labs.subscribers}}
<section class="subscribe-form">
<h3 class="subscribe-form-title">Subscribe to {{@blog.title}}</h3>
<p>Get the latest posts delivered right to your inbox</p>
{{subscribe_form placeholder="youremail@example.com"}}
</section>
{{/if}}
<footer class="post-full-footer">
{{!-- Everything inside the #author tags pulls data from the author --}}
<section class="author-card">
{{#author}}
{{#if profile_image}}
<figure class="author-card-image">
<a class="img" href="{{url}}" style="background-image: url({{profile_image}})"><span class="hidden">{{name}}'s Picture</span></a>
</figure>
{{/if}}
<section class="author-card-content">
<h4><a href="{{url}}">{{name}}</a></h4>
{{#if bio}}
<p>{{bio}}</p>
{{else}}
<p>Read <a href="{{url}}">more posts</a> by this author.</p>
{{/if}}
<div class="author-card-meta">
{{#if location}}<span class="author-card-location">{{location}}</span>{{/if}}
{{#if website}}<span class="author-card-link"><a href="{{website}}">{{website}}</a></span>{{/if}}
</div>
</section>
{{/author}}
</section>
<section class="post-full-tags">
{{tags}}
</section>
</footer>
{{!--
<section class="post-full-comments">
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = '{{url absolute="true"}}';
this.page.identifier = 'ghost-{{id}}';
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://test-apkdzgmqhj.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
</section>
--}}
</article>
</div>
</main>
{{!-- Links to Previous/Next posts --}}
<aside class="read-next outer">
<div class="inner">
<div class="read-next-feed">
{{#get "posts" filter="tags:{{tags.[0].slug}}+id:-{{id}}" limit="3"}}
<article class="read-next-card"
{{#if ../tags.[0].feature_image}}
style="background-image: url({{../tags.[0].feature_image}})"
{{else}}
{{#if @blog.cover_image}}
style="background-image: url({{@blog.cover_image}})"{{/if}}
{{/if}}
>
<header class="read-next-card-header">
<h3 class="read-next-card-header-title">Read more posts like this</h3>
</header>
<div class="read-next-card-content">
<ol>
{{#foreach posts}}
<li><a href="{{url}}">{{title}}</a></li>
{{/foreach}}
</ol>
</div>
</article>
{{/get}}
{{#next_post}}
<article class="post-card {{post_class}}">
{{#if feature_image}}
<a class="post-card-image-link" href="{{url}}">
<div class="post-card-image" style="background-image: url({{feature_image}})"></div>
</a>
{{/if}}
<div class="post-card-content">
<a class="post-card-content-link" href="{{url}}">
<header class="post-card-header">
<h2 class="post-card-title">{{title}}</h2>
</header>
<section class="post-card-excerpt">
<p>{{excerpt words="28"}}</p>
</section>
</a>
<footer class="post-card-meta">
{{#if author_image}}<img class="author-thumb" src="{{author_image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
{{author}}
{{tags prefix=" on "}}
<time class="post-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
</footer>
</div>
</article>
{{/next_post}}
{{#prev_post}}
<article class="post-card {{post_class}}">
{{#if feature_image}}
<a class="post-card-image-link" href="{{url}}">
<div class="post-card-image" style="background-image: url({{feature_image}})"></div>
</a>
{{/if}}
<div class="post-card-content">
<a class="post-card-content-link" href="{{url}}">
<header class="post-card-header">
<h2 class="post-card-title">{{title}}</h2>
</header>
<section class="post-card-excerpt">
<p>{{excerpt words="28"}}</p>
</section>
</a>
<footer class="post-card-meta">
{{#if author_image}}<img class="author-thumb" src="{{author_image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
{{author}}
{{tags prefix=" on "}}
<time class="post-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
</footer>
</div>
</article>
{{/prev_post}}
</div>
</div>
</aside>
{{/post}}
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script>
$(function() {
var $postContent = $(".post-full-content");
$postContent.fitVids();
$(window).scroll(function() {
var header = $(".floating-header");
var title = $(".post-full-title");
var trigger = title.offset().top;
var scroll = $(window).scrollTop();
if (scroll >= trigger + title.height() + 35 ) {
header.addClass("floating-active");
} else {
header.removeClass("floating-active");
}
});
});
</script>
{{/contentFor}}