143 lines
5.1 KiB
HTML
143 lines
5.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="{{ page.lang | default(value="en") }}">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>{{ page.title }}{% if site.title %} - {{ site.title }}{% endif %}</title>
|
||
|
|
{% if page.description %}
|
||
|
|
<meta name="description" content="{{ page.description }}">
|
||
|
|
{% endif %}
|
||
|
|
{% if page.keywords %}
|
||
|
|
<meta name="keywords" content="{{ page.keywords | join(sep=", ") }}">
|
||
|
|
{% endif %}
|
||
|
|
{% if page.author %}
|
||
|
|
<meta name="author" content="{{ page.author }}">
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<!-- Open Graph -->
|
||
|
|
<meta property="og:title" content="{{ page.title }}">
|
||
|
|
{% if page.description %}
|
||
|
|
<meta property="og:description" content="{{ page.description }}">
|
||
|
|
{% endif %}
|
||
|
|
<meta property="og:type" content="article">
|
||
|
|
{% if page.image %}
|
||
|
|
<meta property="og:image" content="{{ page.image }}">
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<!-- Blog metadata -->
|
||
|
|
{% if page.published_date %}
|
||
|
|
<meta property="article:published_time" content="{{ page.published_date }}">
|
||
|
|
{% endif %}
|
||
|
|
{% if page.category %}
|
||
|
|
<meta property="article:section" content="{{ page.category }}">
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<!-- CSS will be injected here by the build system -->
|
||
|
|
<link rel="stylesheet" href="assets/css/main.min.css">
|
||
|
|
</head>
|
||
|
|
<body class="blog-page">
|
||
|
|
<div class="container">
|
||
|
|
<header class="blog-header">
|
||
|
|
{% if page.category %}
|
||
|
|
<span class="blog-category">{{ page.category }}</span>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if page.title %}
|
||
|
|
<h1 class="blog-title">{{ page.title }}</h1>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if page.excerpt %}
|
||
|
|
<p class="blog-excerpt">{{ page.excerpt }}</p>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="blog-meta">
|
||
|
|
{% if page.author %}
|
||
|
|
<div class="author-info">
|
||
|
|
{% if page.author_avatar %}
|
||
|
|
<img src="{{ page.author_avatar }}" alt="{{ page.author }}" class="author-avatar">
|
||
|
|
{% endif %}
|
||
|
|
<span class="author-name">{{ page.author }}</span>
|
||
|
|
{% if page.author_bio %}
|
||
|
|
<span class="author-bio">{{ page.author_bio }}</span>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="post-info">
|
||
|
|
{% if page.published_date %}
|
||
|
|
<time class="published-date" datetime="{{ page.published_date }}">
|
||
|
|
{{ page.published_date | date(format="%B %d, %Y") }}
|
||
|
|
</time>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if page.reading_time %}
|
||
|
|
<span class="reading-time">{{ page.reading_time }} min read</span>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% if page.tags %}
|
||
|
|
<div class="blog-tags">
|
||
|
|
{% for tag in page.tags %}
|
||
|
|
<a href="#tag-{{ tag }}" class="tag">{{ tag }}</a>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</header>
|
||
|
|
|
||
|
|
{% if page.image %}
|
||
|
|
<div class="featured-image">
|
||
|
|
<img src="{{ page.image }}" alt="{{ page.title }}">
|
||
|
|
{% if page.image_caption %}
|
||
|
|
<figcaption>{{ page.image_caption }}</figcaption>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<main class="blog-content">
|
||
|
|
{{ content | safe }}
|
||
|
|
</main>
|
||
|
|
|
||
|
|
{% if page.show_sharing | default(value=true) %}
|
||
|
|
<aside class="sharing-section">
|
||
|
|
<h3>Share this post</h3>
|
||
|
|
<div class="share-buttons">
|
||
|
|
<a href="https://twitter.com/intent/tweet?text={{ page.title | urlencode }}&url={{ page.url | urlencode }}" target="_blank" class="share-twitter">
|
||
|
|
Share on Twitter
|
||
|
|
</a>
|
||
|
|
<a href="https://www.linkedin.com/sharing/share-offsite/?url={{ page.url | urlencode }}" target="_blank" class="share-linkedin">
|
||
|
|
Share on LinkedIn
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if page.show_footer | default(value=true) %}
|
||
|
|
<footer class="blog-footer">
|
||
|
|
{% if page.modified_date %}
|
||
|
|
<p class="last-modified">
|
||
|
|
Updated: <time datetime="{{ page.modified_date }}">{{ page.modified_date | date(format="%B %d, %Y") }}</time>
|
||
|
|
</p>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if page.next_post or page.prev_post %}
|
||
|
|
<nav class="post-navigation">
|
||
|
|
{% if page.prev_post %}
|
||
|
|
<a href="{{ page.prev_post.url }}" class="prev-post">
|
||
|
|
← {{ page.prev_post.title }}
|
||
|
|
</a>
|
||
|
|
{% endif %}
|
||
|
|
{% if page.next_post %}
|
||
|
|
<a href="{{ page.next_post.url }}" class="next-post">
|
||
|
|
{{ page.next_post.title }} →
|
||
|
|
</a>
|
||
|
|
{% endif %}
|
||
|
|
</nav>
|
||
|
|
{% endif %}
|
||
|
|
</footer>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- JavaScript will be injected here by the build system -->
|
||
|
|
</body>
|
||
|
|
</html>
|