Implementeren zoekfunctionaliteit

This commit is contained in:
Michael Boelen 2023-05-18 13:03:01 +02:00
parent 55c242d4b6
commit 372746317e
16 changed files with 247 additions and 13 deletions

View file

@ -8,7 +8,6 @@
<div class="content">
{{ partialCached "header.html" . }}
{{ partial "breadcrumb.html" . }}
<section>
<!-- <h2 class="post">{{ .Title }}</h2> -->
{{- block "main" . }}
{{ .Content }}
@ -19,7 +18,7 @@
{{ if isset .Params "show_child_pages" }}
{{ if eq .Params.show_child_pages true }}
<section>
<p>Relevante pagina's:</p>
<h3>Gerelateerde pagina's</h3>
<ul>
{{ range .Pages }}
<li>
@ -32,19 +31,23 @@
{{ end }}
{{ if eq .Section "posts" }}
<div class="post-date">
<span class="g time">{{.Date.Format "January 2, 2006"}} </span> &#8729;
{{ $taxonomy := "tags" }} {{ with .Param $taxonomy }}
{{ range $index, $tag := . }} {{ with $.Site.GetPage (printf "/%s/%s"
$taxonomy $tag) -}}
<a href="{{ .Permalink }}">{{ $tag | urlize }}</a>
{{- end -}} {{- end -}}
{{ end }}
</div>
{{ end }}
<section>
<h3>Tags</h3>
<div class="post-date">
<span class="g time">{{.Date.Format "January 2, 2006"}} </span> &#8729;
{{ $taxonomy := "tags" }} {{ with .Param $taxonomy }}
{{ range $index, $tag := . }} {{ with $.Site.GetPage (printf "/%s/%s" $taxonomy $tag) -}}
<a href="{{ .Permalink }}">{{ $tag | urlize }}</a>
{{- end -}} {{- end -}}
{{ end }}
</div>
</section>
{{ end }}
</div>
</main>
{{ partial "footer.html" . }}
</body>
{{ partialCached "scripts_loadlast.html" . }}
</html>

View file

@ -0,0 +1,3 @@
index.json
Genereert een index (/index.json) ten behoeve van zoekfunctionaliteit

View file

@ -0,0 +1,26 @@
{{ define "main" }}
<h2>Zoeken</h2>
{{ partial "search-form.html" . }}
<div class="container">
<div id="search-results"></div>
<div class="search-loading">Wachten op zoekopdracht of resulten... (JavaScript is voor deze pagina vereist)</div>
<!-- this template is sucked in by search.js and appended to the search-results div above. So editing here will adjust style -->
<script id="search-result-template" type="text/x-js-template">
<div id="summary-${key}">
<h3><a href="${link}">${title}</a></h3>
<p>${snippet}</p>
<p>
<small>
${ isset tags }Tags: ${tags}<br>${ end }
</small>
</p>
</div>
</script>
</div>
{{ end }}

View file

@ -0,0 +1,5 @@
{{ $index := slice }}
{{ range .Site.RegularPages }}
{{ $index = $index | append (dict "title" .Title "tags" .Params.tags "categories" .Params.categories "content" .Plain "url" .Permalink) }}
{{ end }}
{{ $index | jsonify }}

View file

@ -30,5 +30,6 @@
{{ end }}
</ul>
</nav>
<a href="/zoeken/">{{ partial "show-svg-icon.html" (dict "context" . "icon" "magnifying-glass") }}</a>
</div>
</header>

View file

@ -0,0 +1,15 @@
<script src="{{ "js/search.js" | absURL }}"></script>
{{ $assetBusting := not .Site.Params.disableAssetsBusting }}
{{ $scripts := getJSON "assets/js/scripts.json" }}
{{ $.Scratch.Set "jslibs" slice }}
{{ range $scripts.scripts }}
{{ $.Scratch.Add "jslibs" (resources.Get . ) }}
{{ end }}
{{ $js := .Scratch.Get "jslibs" | resources.Concat "js/combined-scripts.js" | resources.Minify | fingerprint }}
<script
src="{{ $js.RelPermalink }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"
integrity="{{ $js.Data.Integrity }}"
></script>

View file

@ -0,0 +1,4 @@
<form action="/zoeken/" method="GET">
🔍 <input type="search" name="q" id="search-query" placeholder="Zoekterm..">
<button type="submit">Zoek</button>
</form>