0848be17ba
* Add support for client-side search with Fuse.js. Implements #42. Based on https://gist.github.com/eddiewebb/735feb48f50f0ddd65ae5606a1cb41ae * Move search form code repeated in many places to one single template. * Add search box in home page. * Fix search UI + Some improvements Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Remove search.md from exampleSite Signed-off-by: hossainemruz <hossainemruz@gmail.com> Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
71 lines
2.6 KiB
HTML
71 lines
2.6 KiB
HTML
{{ define "header" }}
|
|
<link rel="stylesheet" href="{{ "/css/layouts/list.css" | relURL }}">
|
|
<link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL}}">
|
|
{{ end }}
|
|
|
|
{{ define "navbar" }}
|
|
{{ partial "navigators/navbar-2.html" . }}
|
|
{{ end }}
|
|
|
|
{{ define "sidebar" }}
|
|
{{ $blogHome:="#" }}
|
|
{{ if site.IsMultiLingual }}
|
|
{{ $blogHome = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) .Type) }}
|
|
{{ end }}
|
|
|
|
<section class="sidebar-section" id="sidebar-section">
|
|
<div class="sidebar-holder">
|
|
<div class="sidebar" id="sidebar">
|
|
<form class="mx-auto" method="get" action="{{ "search" | absURL }}">
|
|
<input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
|
|
</form>
|
|
<div class="sidebar-tree">
|
|
<ul class="tree" id="tree">
|
|
<li id="list-heading"><a href="{{ .Type | relLangURL }}" data-filter="all">{{ i18n .Type }}</a></li>
|
|
<div class="subtree">
|
|
{{ partial "navigators/sidebar.html" (dict "menus" site.Menus.sidebar "ctx" .) }}
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{ end }}
|
|
|
|
{{ define "content" }}
|
|
<section class="content-section" id="content-section">
|
|
<div class="content container-fluid" id="content">
|
|
<div class="container-fluid post-card-holder" id="post-card-holder">
|
|
<div id="search-results">
|
|
|
|
<script id="search-result-template" type="text/x-js-template">
|
|
<div class="post-card">
|
|
<a href="${link}" class="post-card-link">
|
|
<div class="card" style="min-height: 352px;"><a href="${link}" class="post-card-link">
|
|
<div class="card-head">
|
|
<img class="card-img-top" src="${hero}">
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title">${title}</h5>
|
|
<p class="card-text post-summary">${summary}</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<span class="float-left">${date}</span>
|
|
<a href="${link}" class="float-right btn btn-outline-info btn-sm">Read</a>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</script>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{ end }}
|
|
|
|
{{ define "scripts" }}
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.0/fuse.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"></script>
|
|
<script src="{{ "/js/search.js" | absURL }}"></script>
|
|
{{ end }}
|