post.hbs

{{! Post page; this file renders a single post and loads all the content}}
{{> head}}
{{> navbar}}

<div class="uk-section">
	<div class="uk-container uk-container-small uk-animation-fade">

		{{! injects code via a Custom HTML tool - as defined in the config.json file in the "renderer" section }}
		{{#if @customHTML.beforePost}}
			<div id="custom-html-before-post">
				{{{@customHTML.beforePost}}}
			</div>
		{{/if}}
		{{! /injects code via a Custom HTML tool }}

		{{! indicates the post's context}}
		<div uk-grid>
			<div class="uk-width-expand@s">
				{{#post}}
					<article class="uk-article">
						{{! post title }}
						<h1 class="uk-article-title uk-text-center">
							{{title}}
						</h1>
						{{! /post title }}

						{{! post header }}
						<div class="uk-article-meta">
							{{! post author }}
							{{ translate 'post.publishedBy' }}
							{{#author}}
								<a href="{{url}}" rel="author" title="{{name}}">{{name}}</a>
							{{/author}}
							{{! /post author }}

							{{! post creation date }}
							{{ translate 'post.publishedDate' }}
							<time
								datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}"
							>
								{{date createdAt}}.
							</time>
							{{! /post creation date }}

							{{! post modification date }}
							{{#if modifiedAt}}
								{{ translate 'post.lastUpdatedDate' }}
								<time datetime="{{date modifiedAt 'YYYY-MM-DDTHH:mm'}}">
									{{date modifiedAt}}.
								</time>
							{{/if}}
							{{! /post modification date }}

							{{! main tag - if not selected, the first tag in the list of all tags will be displayed }}
							{{#if mainTag}}
								{{ translate 'post.mainTag' }}
								{{!-- <a href="{{ mainTag.url }}"> --}}
									{{mainTag.name }}.
								{{!-- </a> --}}
							{{/if}}
							{{! /main tag }}
						</div>
						{{! /post header }}

						{{! featured image }}
						{{#featuredImage}}
							{{! check if an image exists }}
							{{#if url}}
								<figure id="featured-image">
									<img
										src="{{url}}"
										{{! checks if the Responsive Images option (located in Site Settings -> Website Speed) is enabled  }}
										{{#if @config.site.responsiveImages}}
											{{responsiveImageAttributes 'featuredImage' srcset sizes}}
										{{/if}}
										{{! generates a native loading attribute; if the Media Lazy Load option (located in Site Settings -> Website Speed) is disabled, the loading attribute is not generated }}
										{{ lazyload "eager" }}
										height="{{height}}"
										width="{{width}}"
										alt="{{alt}}"
									>
									{{! checks if the caption or credits exist }}
									{{#checkIfAny caption credits}}
										<figcaption>
											{{caption}}
											{{credits}}
										</figcaption>
									{{/checkIfAny}}
									{{! /checks if the caption or credits exist }}
								</figure>
							{{else}}
								<div class="uk-cover-container uk-height-small">
									<canvas width="" height=""></canvas>
									<img
										src="{{@config.custom.postDefaultHeaderImageUrl}}"
										{{! generates a native loading attribute; if the Media Lazy Load option (located in Site Settings -> Website Speed) is disabled, the loading attribute is not generated }}
										{{ lazyload "eager" }} uk-cover
									>
								</div>
							{{/if}}
							{{! /check if an image exists }}
						{{/featuredImage}}
						{{! /featured image }}

						{{! post body }}
						<p>
							{{{text}}}
						</p>
						{{! /post body }}
					</article>
				{{/post}}

				<a href="#" uk-totop uk-scroll uk-sticky></a>
			</div>
			{{! /indicates the post's context}}
		</div>

		{{! code injection by a Custom HTML tool - defined in config.json file in the renderer section}}
		{{#if @customHTML.afterPost}}
			<div id="custom-html-after-post">
				{{{@customHTML.afterPost}}}
			</div>
		{{/if}}
		{{! injects code via a Custom HTML tool }}
	</div>
</div>

<div class="uk-section">
	<div class="uk-container uk-dark" uk-scrollspy="cls: uk-animation-slide-right">
		<h2 class="uk-heading-divider uk-text-center">Continue reading</h2>
		<div class="uk-grid-small uk-child-width-1-2@m" uk-grid="masonry: true">
			{{#previousPost}}
				<div>{{> post-card post=. }}</div>
			{{/previousPost}}
			{{#nextPost}}
				<div>{{> post-card post=. }}</div>
			{{/nextPost}}
		</div>
	</div>
</div>

{{> footer}}