Hugo Search With Duckduckgo

June 2019 ยท 1 minute read

Hugo is a static site generator which can be extended with “shortcodes”. It’s a standalone file which can be included in pages/posts etc. Much like mediawikis templates it does supports positional and/or named arguments.

I just now created a shortcode which includes a duckduckgo search box. There are two arguments:

  1. Site name, e.g. "owlnical.net"
  2. Width of the search box, e.g. 500
{{ ddg NAME WIDTH }} 
{{ ddg " owlnical.net" 320 }}

The following is the template source. Save it as layouts/shortcodes/ddg.html.

{{/* textbox width = width - width of logo and search button */}}
{{ $textboxwidth := sub (int (.Get 1)) 133 }}
<iframe
src="https://duckduckgo.com/search.html?width={{ $textboxwidth }}&duck=yes&site={{ .Get 0 }}&prefill={{ .Get 0 }}&focus=yes"
style="overflow:hidden;margin:0 auto;display:block;padding:0;width:{{ .Get 1 }}px;height:60px;"
frameborder="0">
</iframe>

Use the official tool if you want to customize the search box further. Available options includes removing the logo, changing the background colour and replacing the prefilled text.

8af0a167416e5454c7e6dc65e649b3eec5275176