mirror of
https://github.com/foo-dogsquared/hugo-theme-more-contentful.git
synced 2025-01-31 16:57:59 +00:00
68 lines
1.9 KiB
Plaintext
68 lines
1.9 KiB
Plaintext
|
---
|
||
|
|
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 https://gohugo.io/templates/data-templates/[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`.
|
||
|
|
|
||
|
|
```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`).
|
||
|
|
|
||
|
|
```go
|
||
|
|
<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.
|