[{"content_html":"\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eMost themes offer quick social media links with site configuration.\nHowever, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eTo get around this, we’ll make use of \u003ca href=\"https://gohugo.io/templates/data-templates/\"\u003edata templates\u003c/a\u003e.\nLet’s create a quick game plan how does it work.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThe data is a top-level dictionary/object with each key contains an object with the following fields.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eurl\u003c/code\u003e is the… contact link itself and it is required to have it.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003ename\u003c/code\u003e is the text to appear in the output.\nAlso required to have.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eweight\u003c/code\u003e is an integer similar to how Hugo sorts the pages with the lower weight having high precedence;\nif this key is absent, it will be interpreted as 0.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAnd here’s the data example in TOML which is placed in \u003ccode\u003edata/contact.toml\u003c/code\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e[github]\n name = \u0026#34;GitHub\u0026#34;\n url = \u0026#34;https://github.com/foo-dogsquared\u0026#34;\n\n[gitlab]\n name = \u0026#34;Gitlab\u0026#34;\n url = \u0026#34;https://gitlab.com/foo-dogsquared\u0026#34;\n\n[keybase]\n name = \u0026#34;Keybase\u0026#34;\n url = \u0026#34;https://keybase.io/foo_dogsquared\u0026#34;\n weight = -1\n\n[twitter]\n name = \u0026#34;Twitter\u0026#34;\n url = \u0026#34;https://twitter.com/foo_dogsquared\u0026#34;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eI want my Keybase profile to appear first than anything else for whatever reason so the \u003ccode\u003eweight\u003c/code\u003e key is set to -1.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWith this data, we can then create a template out of it.\nI’ve put the following template in a partial named \u003ccode\u003econtacts\u003c/code\u003e (i.e., \u003ccode\u003elayouts/partials/contacts\u003c/code\u003e).\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;address\u0026gt;\n{{- range (sort $.Site.Data.contacts \u0026#34;weight\u0026#34; \u0026#34;asc\u0026#34;) -}}\n| \u0026lt;a rel=\u0026#34;me\u0026#34; href=\u0026#34;{{ .url }}\u0026#34;\u0026gt;{{- .name -}}\u0026lt;/a\u0026gt; |\n{{- end -}}\n\u0026lt;/address\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eA suggestion (and an exercise) for extending this is to create image links.\nMaybe add another key named \u003ccode\u003eimage\u003c/code\u003e that accepts either URL.\nThe \u003ccode\u003ename\u003c/code\u003e would now be the image alternative text.\u003c/p\u003e\n\u003c/div\u003e\n","date_modified":"2022-10-24T00:09:47+08:00","date_published":"2020-10-20T20:38:24+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/configurable-list-of-contacts/","summary":"Mostthemesofferquicksocialmedialinkswithsiteconfiguration.However,itisonlylimitedtopopularmediasitessuchasFacebook,Twitter,Instagram,GitHub,etc.\nTogetaroundthis,we<EFBFBD>