related articles converted to hugo templating

This commit is contained in:
Gabriele Musco 2021-04-15 10:04:06 +02:00
parent cfc7d25449
commit 0c80aa9ee5
No known key found for this signature in database
GPG Key ID: 8539FD3454380B83
3 changed files with 39 additions and 62 deletions

View File

@ -20,34 +20,7 @@
{{/* pagination */}}
<div class="postlist {{ if .Site.Params.gridView }}gridView{{ end }}" id="postlist">
{{ range $pagination }}
<article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}">
<div>
<h2>
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h2>
<p class="date">
<span title="Date"></span>
{{ .Date.Format "2006-01-02" }}
{{ if .Params.tags }}
| <!-- Pipe character as visual separator between date and tags-->
<span title="Tags"></span>
{{ range .Params.tags }}
<a href="/tags/{{ . }}">#{{ . }}</a>
{{ end }}
{{ end }}
</p>
{{ if .Site.Params.imageInArticlePreview }}
{{ if .Params.Image }}
<img src="{{ .Params.Image }}" />
{{ end }}
{{end}}
<div class="articlePreview">
<p>{{ .Summary }}</p>
<p><a href="{{ .Permalink }}">Continue reading </a></p>
</div>
</div>
<hr />
</article>
{{- partial "article_card.html" . -}}
{{ end }}
</div>
<div id="getNextBtnContainer"></div>

View File

@ -0,0 +1,28 @@
<article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}">
<div>
<h2>
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h2>
<p class="date">
<span title="Date"></span>
{{ .Date.Format "2006-01-02" }}
{{ if .Params.tags }}
| <!-- Pipe character as visual separator between date and tags-->
<span title="Tags"></span>
{{ range .Params.tags }}
<a href="/tags/{{ . }}">#{{ . }}</a>
{{ end }}
{{ end }}
</p>
{{ if .Site.Params.imageInArticlePreview }}
{{ if .Params.Image }}
<img src="{{ .Params.Image }}" />
{{ end }}
{{end}}
<div class="articlePreview">
<p>{{ .Summary }}</p>
<p><a href="{{ .Permalink }}">Continue reading </a></p>
</div>
</div>
<hr />
</article>

View File

@ -1,40 +1,16 @@
{{ if and (.Site.Params.enableRelatedArticles | default false) .Params.tags }}
{{ $postsList :=
where (
where site.RegularPages "Params.tags" "!=" nil
) "Params.tags" "intersect" .Params.tags
}}
<div class="relatedArticlesContainer">
<hr />
<h2>More posts like this</h2>
<div id="relatedArticles"></div>
<div class="postlist {{ if .Site.Params.gridView }}gridView{{ end }}">
{{ range first (.Site.Params.relatedArticlesNum | default 2) $postsList }}
{{- partial "article_card.html" . -}}
{{ end }}
</div>
</div>
{{- partial "js_paginator.html" . -}}
<script>
function hasAnyTags(articleTags, targetTags) {
for (let atag of articleTags) {
if (targetTags.includes(atag)) return true;
}
return false;
}
function getRelatedArticles() {
let currentTags = {{ .Params.tags }};
let targetContainer = document.getElementById('relatedArticles');
targetContainer.innerHTML = '';
fetch('/search/index.json').then(res => res.json())
.then(res => {
let candidates = res.pages.filter(
a => hasAnyTags(a.tags, currentTags) && a.link != "{{ .Permalink }}"
);
let targetNum = Math.min(
{{ .Site.Params.relatedArticlesNum | default 2 }},
candidates.length
);
if (candidates.length <= 0) {
Array.from(
document.getElementsByClassName('relatedArticlesContainer')
).map(e => e.style.display = 'none');
}
for (let i=0; i<targetNum; i++) {
targetContainer.innerHTML += renderSingleArticle(candidates[i]);
}
});
}
getRelatedArticles();
</script>
{{ end }}