How to make like glossary page

I want to create a glossary page.

please check the attached image.

I want to A to Z character and when click anyone shows below term and when click any term then show data related to term on the same page.
Please let me know how is this possible with a right structure.

Thanks !

Nope! There are too many moving parts for what you ask. Please read the docs, start your project, and when you run into an issue, come and ask about it in #support. :slight_smile:

You might also search the forums for glossary and book index.


You could achieve this by using categories and tags, so India would be your category and the letter I could be your tag. Hugo also has custom categories (search the forum) how you can add more taxonomy to your site rather than the standard categories/tags.

Quite a old thread here.
But just in case it could help someone else, Kubernetes documentation showcase a nice example of glossary setup with Hugo

Here is a quick overview of their setup

  • English glossary content : /content/en/docs/reference/glossary
  • Glossary layout : /layouts/docs/glossary.html
  • Glossary terms partial : /layouts/partials/docs/glossary-terms.html
  • Glossary tooltip shortcode : /layouts/shortcodes/glossary_tooltip.html
  • Glossary definition shortcode : /layouts/shortcodes/glossary_definition.html

I followed the same principles for our documentation and it works great.
Love the way they use a partial to get the glossary terms through the Scratch utility, and then use it to display tooltips and definitions everywhere.