Introduction

PaperMod is a popular Hugo theme known for its clean design and flexibility. When using profileMode, the default setup does not display a list of pages. If you want to add a section that lists your pages (e.g., About, Contact, Projects), follow this guide.

Enabling Profile Mode

Ensure that profileMode is enabled in your site’s configuration file (config.yaml or config.toml):

[params.profileMode]
  enabled = true
  title = "Your Name"  # Customize your title
  subtitle = "Your tagline or description"
  imageUrl = "images/profile.jpg"
  buttons = [
    { name = "Blog", url = "/posts/" },
    { name = "Projects", url = "/projects/" }
  ]

Creating a Pages Section

To display a list of pages below your profile, modify layouts/partials/profile.html. Add the following snippet after the existing profile block:

{{ with site.RegularPages }}
<section>
  <h2>Pages</h2>
  <ul>
    {{ range . }}
    <li>
      <a href="{{ .RelPermalink }}">{{ .Title }}</a>
    </li>
    {{ end }}
  </ul>
</section>
{{ end }}

Explanation:

  • site.RegularPages retrieves all non-post pages.
  • The range . loops through available pages and generates a list.
  • {{ .RelPermalink }} provides the relative URL.

Filtering Specific Pages

If you want to display only certain pages (e.g., those under /pages/), update the snippet:

{{ with site.GetPage "section" "pages" }}
  {{ range .Pages }}
    <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
  {{ end }}
{{ end }}

Ensure you place pages under content/pages/ for this to work.

Conclusion

By following these steps, you can integrate a Pages section into your PaperMod profileMode layout, making it easier for visitors to navigate your site.

Happy Hugo building!