mirror of https://github.com/jkjoy/hugoblog.git
79 lines
3.6 KiB
HTML
79 lines
3.6 KiB
HTML
|
{{ define "main" }}
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@8.1.0/themes/reset-min.css"
|
||
|
|
integrity="sha256-2AeJLzExpZvqLUxMfcs+4DWcMwNfpnjUeAAvEtPr0wU=" crossorigin="anonymous">
|
||
|
|
<div class="site--main">
|
||
|
|
<header class="archive-header archive-header__search">
|
||
|
|
<div id="searchbox"></div>
|
||
|
|
</header>
|
||
|
|
<div id="hits" class="articleList"></div>
|
||
|
|
<div id="pagination"></div>
|
||
|
|
</div>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.20.0/dist/algoliasearch-lite.umd.js"
|
||
|
|
integrity="sha256-DABVk+hYj0mdUzo+7ViJC6cwLahQIejFvC+my2M/wfM=" crossorigin="anonymous"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.60.0/dist/instantsearch.production.min.js"
|
||
|
|
integrity="sha256-9242vN47QUX50UG5Gf5XDO1YREWCEJRyXHofh5fsl24=" crossorigin="anonymous"></script>
|
||
|
|
<script>
|
||
|
|
const searchClient = algoliasearch('{{ .Site.Params.searchAPPID }}', '{{ .Site.Params.searchKey }}');
|
||
|
|
|
||
|
|
const search = instantsearch({
|
||
|
|
indexName: '{{ .Site.Params.indexName }}',
|
||
|
|
searchClient,
|
||
|
|
insights: false
|
||
|
|
});
|
||
|
|
|
||
|
|
search.addWidgets([
|
||
|
|
instantsearch.widgets.searchBox({
|
||
|
|
container: '#searchbox',
|
||
|
|
showReset: false,
|
||
|
|
placeholder: 'Search for stories',
|
||
|
|
cssClasses: {
|
||
|
|
form: ['search-form'],
|
||
|
|
input: ['search-field']
|
||
|
|
},
|
||
|
|
templates: {
|
||
|
|
submit: `<input type="submit" class="search-submit" value="Search">`
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
|
||
|
|
instantsearch.widgets.hits({
|
||
|
|
container: '#hits',
|
||
|
|
templates: {
|
||
|
|
item(hit, { html, components, sendEvent }) {
|
||
|
|
const time = new Date(hit.date);
|
||
|
|
const date = time.toLocaleDateString('en-US', {
|
||
|
|
year: 'numeric',
|
||
|
|
month: 'long',
|
||
|
|
day: 'numeric',
|
||
|
|
});
|
||
|
|
const lngString = '{{ .Site.Language }}';
|
||
|
|
const uri = hit.uri.replace("/" + lngString + "/", "/");
|
||
|
|
const cover = hit.cover ? html`<img src="${hit.cover}" class="cover" itemprop="image" />` : '';
|
||
|
|
return html`<article class="post--item" itemtype="http://schema.org/Article" itemscope="itemscope">
|
||
|
|
<div class="content">
|
||
|
|
<h2 class="post--title">
|
||
|
|
<a href="${uri}">${components.Highlight({ attribute: 'title', hit })}</a>
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div class="description">${hit.description}</div>
|
||
|
|
<div class="meta">
|
||
|
|
<svg class="icon" viewBox="0 0 1024 1024" width="16" height="16">
|
||
|
|
<path
|
||
|
|
d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512s152.81981 341.333333 341.333333 341.333333 341.333333-152.81981 341.333333-341.333333S700.513524 170.666667 512 170.666667z m36.571429 89.697523v229.86362h160.865523v73.142857H512a36.571429 36.571429 0 0 1-36.571429-36.571429V260.388571h73.142858z">
|
||
|
|
</path>
|
||
|
|
</svg>${date}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
${cover}
|
||
|
|
</article>
|
||
|
|
`;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
})
|
||
|
|
]);
|
||
|
|
|
||
|
|
search.start();
|
||
|
|
const queryString = window.location.search;
|
||
|
|
const params = new URLSearchParams(queryString);
|
||
|
|
search.helper.setQuery(params.get("s")).search();
|
||
|
|
</script>
|
||
|
|
{{ end }}
|