Make your hugo blog searchable by simply search for blog posts in the auto-generated RSS feed file index.xml
.
No need to generate extra .json
search index files.
Since the theme component looks for the RSS feed file, make sure you have it available in your builded site.
Clone this theme component to your project’s themes
directory:
git submodule add https://github.com/devidw/hugo-theme-component-search ./themes/hugo-theme-component-search
Add this theme component to your list of themes inside your project’s config
file (either .yaml
, .toml
or .json
):
Format | Syntax |
---|---|
|
theme:
- "…"
- "hugo-theme-component-search"
- "…" |
|
theme = ["…", "hugo-theme-component-search", "…"] |
|
"theme": ["…", "hugo-theme-component-search", "…"] |
You can embed the partial everywhere you want in to appear on your site.
If you want to have a standalone search page, you can create a page template for your search page.
To do so, create a search/single.html
template file in your theme’s layouts/
directory.
Note
|
search can be any name you want.
|
Inside the template file, include the partial as mentioned above.
You propably want to wrap the partial inside a block definition block to extend your main layout:
{{define "main"}}
{{ if templates.Exists "partials/vendor/devidw/search/include.html" }}
{{ partial "vendor/devidw/search/include.html" . }}
{{ end }}
{{ end }}
Note
|
Make sure to adjust the block name to your needs, if you main block is not named main .
|
When you have set up the template file, you can create the actual search page by creating a search.adoc
file in your content/
directory.
Note
|
search.adoc can be any valid hugo content file name. For example, search.md or search.html are just fine as well.
|
Add the following frontmatter to your search.adoc
file:
title: "Search"
description: "Quickly find what you are looking for."
type: "search"
# ...
Note
|
The type frontmatter is important. It is used to determine the page type. Any other frontmatter can be specified as you wish.
|
You should now have a standalone search page accessible under the address based on your permalink settings.
This hugo theme component was scaffolded with the cookiecutter-hugo-theme-component template.