related articles converted to hugo templating
This commit is contained in:
parent
cfc7d25449
commit
0c80aa9ee5
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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 }}
|
||||
|
|
Loading…
Reference in New Issue