Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Add a search bar or a tutorial on how to add one. #465

Closed
AribYadi opened this issue May 8, 2023 · 2 comments
Closed

Comments

@AribYadi
Copy link

AribYadi commented May 8, 2023

I need a search bar or a search page on my blog. If you don't want to add one, can you make a tutorial on how to add one?

@blakeashleyjr
Copy link
Contributor

Hi @AribYadi, because Hugo produces a static website, dynamic functionality like search would have to generally have to be provided by an external provider like Elasticsearch, Solr, or Algolia.

There are some client-side search options you can look at: https://github.com/nextapps-de/flexsearch

@ben-krieger
Copy link

I wouldn't say I love the content matching algorithm, but this was a simple solution that looks quite nice with this theme.

Add hugomods/search:

> hugo mod get github.com/hugomods/search@latest

Add to config.toml:

# Navbar menu item
[[languages.en.menu.main]]
  identifier = "search"
  name = "Search (^K)"
  url = "/search"

# Search mod config
[params.search]
  min_match_char_length = 3
  ignore_location = true
  threshold = 0
  distance = 0
  index_content = true
  index_all_pages = false
  expand_results_meta = true

# Output search index for modal and search page
[outputs]
  home = ['HTML', 'Search', 'SearchIndex']

# Add module
[[module.imports]]
  path = 'github.com/hugomods/search'

Add JS/CSS to layouts/partials/extended_footer.html:

{{ partial "search/assets/js" . }}
{{ partial "search/assets/css" . }}

<!-- NOTE: Styling is configured for the green theme -->
<style>
:root {
  --search-primary: rgb(120, 226, 160);
  --search-color: rgba(120, 226, 160);
  --search-bg: rgb(31, 34, 42);
  --search-result-bg: rgb(31, 34, 42);
  --search-border-color: rgb(120, 226, 160);
} 
</style>

Create a search page (for when not using the modal via keyboard shortcut) by adding layouts/index.search.html:

{{ define "main" }}
<div class="search-container"></div>
{{ end }}

If this is helpful, I can create a doc. And if anyone has better search algorithms or parameters, let me know!

@panr panr closed this as completed Aug 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants