varia.website/themes/varia/templates/article.html

118 lines
4.2 KiB
HTML

{% extends "base.html" %}
{% block head %}
{{ super() }}
{% if article.description %}
<meta name="description" content="{{article.description}}" />
{% endif %}
{% if article.tags or article.category or article.keywords %}
<meta name="keywords" content="{{ [article.tags|join(', '), article.category, article.keywords]|join(', ') }}" />
{% endif %}
{% endblock %}
{% block content %}
{% set glob={} %}
{% if article.translations %}
{% for translation in article.translations %}
{% if translation.lang == 'nl' %}
{% set _ = glob.update({'published_at': 'Published at '}) %}
{% set _ = glob.update({'translate_article': 'Lees dit artikel in het Nederlands'}) %}
{% set _ = glob.update({'related_to': ' relating to '}) %}
{% set _ = glob.update({'translation_url': translation.url}) %}
{% set _ = glob.update({'written_by': 'Written by '}) %}
{% endif %}
{% if translation.lang == 'en' %}
{% set _ = glob.update({'published_at': 'Gepubliceerd op '}) %}
{% set _ = glob.update({'translate_article': 'Read this article in English'}) %}
{% set _ = glob.update({'related_to': ' gerelateerd aan '}) %}
{% set _ = glob.update({'translation_url': translation.url}) %}
{% set _ = glob.update({'written_by': 'Geschreven door '}) %}
{% endif %}
{% endfor %}
{% endif %}
<section id="content" class="body h-entry">
<div class="entry-title p-name">
{{ article.title }}
</div>
<div class="article-info">
<div class="featured-image u-photo">
{% if article.featured_image %}
{% set thumb_size ='/thumb'%}
<a href="{{ article.featured_image }}">
{% if article.featured_image.endswith('.gif') %}
{% set thumb_size =''%}
{% endif %}
<img src="{{ article.featured_image | replace('images','images'+thumb_size) }}">
</a>
{% endif %}
</div>
<div class="event-details">
{% if article.event_start %}
<div class="article-event-start">{{ article.event_start }}</div>
{% endif %}
<div>{{ glob.published_at }} {{ article.date | strftime('%d %B %Y') }}</div>
</div>
<div class="post-info">
<div class="article-authors">
{% if article.author %}
{{ glob.written_by }}
{{ article.author }}
{% endif %}
</div>
<a style="visibility:hidden;" rel="author" class="p-author h-card">{{ article.author }}</a>
<time class="dt-published" datetime="{{ article.date }}"></time>
<a class="u-url" href="{{ article.url }}"></a>
{% if article.category %}
<span class="categories">
<span itemprop="articleSection">
{% if DEFAULT_LANG == 'en' %}
<a href="/en/category{{ article.category.url }}" rel="category">{{ article.category }}</a>
{% elif DEFAULT_LANG == 'nl' %}
<a href="/category{{ article.category.url }}" rel="category">{{ article.category }}</a>
{% endif %}
</span>
</span>
{% endif %}
{% if article.tags %}
<span class="tags">
{{ glob.related_to }}
{% for tag in article.tags %}
<span itemprop="keywords">
{% if DEFAULT_LANG == 'en' %}
<a href="/en/{{ tag.url }}" rel="tag">{{ tag }}</a>
{% elif DEFAULT_LANG == 'nl' %}
<a href="/{{ tag.url }}" rel="tag">{{ tag }}</a>
{% endif %}
</span>
{% endfor %}
</span>
{% endif %}
<div class="article-translation">
<a href="{{ glob.translation_url }}">{{ glob.translate_article }}</a>
</div>
</div>
</div>
<div class="entry-content-container">
<div class="entry-content e-content">
{{ article.content }}
<div class="separator"><hr></div>
</div><!-- /.entry-content -->
</div><!-- /.entry-content-container -->
</section>
<script type="text/javascript">
var footnotes = document.querySelectorAll('[id^="fnref-"]');
for(var i in footnotes){
if(i < footnotes.length){
console.log(footnotes[i]);
var id = footnotes[i].id.replace('fnref-','fn-');
footnotes[i].innerHTML = footnotes[i].innerHTML + '<span>['+ parseInt(Number(i)+1) + '] '+ document.getElementById(id).innerHTML +'</span>';
}
}
document.getElementsByClassName('footnote')[0].remove();
</script>
{% endblock %}