hugo-theme-more-contentful/exampleSite/content/en/recipes/configurable-list-of-contacts.adoc

---

title: "Configurable list of contacts" date: 2020-10-20T20:38:24+08:00

categories: - "recipe" ---

Configurable list of contacts

John Doe <johndoe@example.com> 2020-10-20 20:38:24 +0800 :stem: latexmath

Most themes offer quick social media links with site configuration. However, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.

To get around this, we’ll make use of data templates. Let’s create a quick game plan how does it work.

The data is a top-level dictionary/object with each key contains an object with the following fields.

• url is the…​ contact link itself and it is required to have it.

• name is the text to appear in the output. Also required to have.

• weight is an integer similar to how Hugo sorts the pages with the lower weight having high precedence; if this key is absent, it will be interpreted as 0.

And here’s the data example in TOML which is placed in data/contact.toml.

[github]
    name = "GitHub"
    url = "https://github.com/foo-dogsquared"

[gitlab]
    name = "Gitlab"
    url = "https://gitlab.com/foo-dogsquared"

[keybase]
    name = "Keybase"
    url = "https://keybase.io/foo_dogsquared"
    weight = -1

[twitter]
    name = "Twitter"
    url = "https://twitter.com/foo_dogsquared"

I want my Keybase profile to appear first than anything else for whatever reason so the weight key is set to -1.

With this data, we can then create a template out of it. I’ve put the following template in a partial named contacts (i.e., layouts/partials/contacts).

<address>
{{- range (sort $.Site.Data.contacts "weight" "asc") -}}
| <a rel="me" href="{{ .url }}">{{- .name -}}</a> |
{{- end -}}
</address>

A suggestion (and an exercise) for extending this is to create image links. Maybe add another key named image that accepts either URL. The name would now be the image alternative text.