Customize the “about” widget in hugo academic theme

Question

I am using the hugo-academic theme via RStudio/blogdown to build my webpage. The example page is here: https://themes.gohugo.io/theme/academic/

I would like to add a second list of non-academic Interests below the academic ones. Is this possible?

In the configuration section of about.md there is a section for this list

# List your academic interests.
 [interests]
   interests = [
     "Artificial Intelligence",
     "Computational Linguistics",
     "Information Retrieval"
   ]

but i am not sure how it is passed to the process that actually builds the site. In the spirit of "just add stuff to see if it works" i've tried adding another [other_interests] section but it doesn't seem to do anything.

Answer 1

You can add another list of interests, but the theme doesn't know about the list you added. In the theme's source you'll find this section:

  {{ with $page.Params.interests }}
  <div class="col-sm-5">
    <h3>{{ i18n "interests" | markdownify }}</h3>
    <ul class="ul-interests">
      {{ range .interests }}
      <li>{{ . }}</li>
      {{ end }}
    </ul>
  </div>
  {{ end }}

https://github.com/gcushen/hugo-academic/blob/master/layouts/partials/widgets/about.html#L50-L59

Which renders an HTML section based on a predefined list.
You could try to copy/paste this section and change interests to your other_interests and see how it goes:

  {{ with $page.Params.other_interests }}
  <div class="col-sm-5">
    <h3>{{ i18n "interests" | markdownify }}</h3>
    <ul class="ul-interests">
      {{ range .other_interests }}
      <li>{{ . }}</li>
      {{ end }}
    </ul>
  </div>
  {{ end }}

I suggest reading up on templating in Hugo to get a better understanding of what's happening there. If you have more questions specific to this theme, maybe the source GitHub repository might be a good place to start.